容易被忽略CSS特性

時間 2019-12-08

標籤容易忽略 css 特性欄目 CSS 简体版

原文原文鏈接

CSS初學感受很簡單，但隨着學習的深刻才感受CSS的水由多深，日常總會遇到各類坑，先總結一些常常遇到的坑css

大小寫不敏感

雖然咱們平時在寫CSS的時候都是用小寫，但其實CSS並非大小寫敏感的html

.test{
    background-COLOR:#a00;
    width:100px;
    height: 100px;
}

雖然把background-color寫爲了background-COLOR，但仍然會生效，之因此寫成小寫是由於xhtml標準的關係，可是即便不是xhtml仍是寫成小寫比較好，美觀、易讀並且能夠應對可能的轉換需求web

選擇器優先級

當兩個規則都做用到了同一個html元素上時，若是定義的屬性有衝突，那麼應該用誰的值的，CSS有一套優先級的定義。瀏覽器

不一樣級別網絡

在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
做爲style屬性寫在元素內的樣式
id選擇器
類選擇器
標籤選擇器
通配符選擇器
瀏覽器自定義或繼承

同一級別less

同一級別中後寫的會覆蓋先寫的樣式學習

上面的級別仍是很容易看懂的，可是有時候有些規則是多個級別的組合，像這樣字體

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div.test{
            background-COLOR:#a00;
            width:100px;
            height: 100px;
        }

        .test.test2{
            background-COLOR:#0e0;
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="test test2"></div>
</body>
</html>

到底div是應用那條規則呢，有個簡單的計算方法（經園友提示，權值實際並非按十進制，用數字表示只是說明思想，一萬個class也不如一個id權值高）url

內聯樣式表的權值爲 1000
ID 選擇器的權值爲 100
Class 類選擇器的權值爲 10
HTML 標籤選擇器的權值爲 1

咱們能夠把選擇器中規則對應作加法，比較權值，若是權值相同那就後面的覆蓋前面的了，div.class的權值是1+10=11，而.test1 .test2的權值是10+10=20，因此div會應用.test1 .test2變成綠色spa

行內(inline)元素的一些屬性

並非全部的屬性對行內元素都可以生效

行內元素不會應用width屬性，其長度是由內容撐開的
行內元素不會應用height屬性，其高度也是由內容撐開的，可是高度能夠經過line-height調節
行內元素的padding屬性只用padding-left和padding-right生效，padding-top和padding-bottom會改變元素範圍，但不會對其它元素形成影響
行內元素的margin屬性只有margin-left和margin-right有效，margin-top和margin-bottom無效
行內元素的overflow屬性無效，這個不用多說了
行內元素的vertical-align屬性無效（height屬性無效）

<div style="">
        <span style="padding:4px; margin:8px; height: 500px; width:1000px; ">123456789123456789</span>
    </div>

    <div style="">
        <span style="padding:4px; margin:8px; height: 500px; width:1000px; ">123456789</span>
    </div>

經過例子能夠看出，咱們對span設置的width和height屬性並無生效，margin-top和margin-bottom無效，padding-top和padding-bottom會改變元素範圍（背景區域變大了），但並無影響下面元素位置

一些互斥的元素

對於absolute和fixed定位的(固定大小，設置了width和height屬性)元素，若是設置了top和left屬性，那麼設置bottom和right值就沒有做用了，應該是top和left優先級高，不然同時寫了瀏覽器怎麼知道按照誰定位
對於absolute和fixed定位的元素，若是設置了top、left、bottom、right的值後margin屬性也就不起做用了
對於absolute和fixed定位的元素，若是設置了top、left、bottom、right的值後float屬性一樣會失效
塊元素若是設置了float屬性或者是absolute、fixed定位，那麼vertical-align屬性再也不起做用

font-size單位

咱們在寫字體的尺寸的時候經常使用的單位有

這些字體分別有什麼含義？

px是pixel縮寫，是基於像素的單位.在瀏覽網頁過程當中，屏幕上的文字、圖片等會隨屏幕的分辨率變化而變化，一個100px寬度大小的圖片，在800×600分辨率下，要佔屏幕寬度的1/8，但在1024×768下，則只佔約1/10。因此若是在定義字體大小時，使用px做爲單位，那一旦用戶改變顯示器分辨率從800到1024，用戶實際看到的文字就要變「小」（天然長度單位），甚至會看不清，影響瀏覽。
pt是point(磅)縮寫，是一種固定長度的度量單位,大小爲1/72英寸。若是在web上使用pt作單位的文字，字體的大小在不一樣屏幕（一樣分辨率）下同樣，這樣可能會對排版有影響，但在Word中使用pt至關方便。由於使用Word主要目的都不是爲了屏幕瀏覽，而是輸出打印。當打印到實體時，pt做爲一個天然長度單位就方便實用了：好比Word中普通的文檔都用「宋體 9pt」，標題用「黑體 16pt」等等，不管電腦怎麼設置，打印出來永遠就是這麼大。
em：是相對單位，是一個相對長度單位，最初是指字母M的寬度，因此叫em，現指的是字符寬度的倍數，用法相似百分比，如：0.8em, 1.2em,2em等。一般1em=16px（瀏覽器默認字體大小16px），em是指父元素的字體大小。在一個頁面上給定了一個父元素的字體大小,這樣就能夠經過調整一個元素來成比例的改變全部元素大小.它能夠自由縮放,好比用來製做可伸縮的樣式表。相似還有ex的概念，ex 相對於字符「x」的高度，此高度一般爲字體尺寸的一半。
rem：rem是CSS新增的，em是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能須要知道他父元素的大小，在屢次使用時，就會帶來沒法預知的錯誤風險。而rem是相對於根元素<html>(r:root)，使用rem咱們只須要在根元素肯定一個參考值，而後就能夠控制整個html頁面全部字體了。

:checked 選擇器範圍

咱們知道:checked會選擇被選中的checkbox和radio，看個例子

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        :checked{
            margin: 10px;
        }
    </style>
</head>
<body>
    <input id="t1" type="checkbox" checked/>
    <input id="t3" type="radio" checked/>
    <select>
        <option id="t2">test</option>
        <option id="t4">test2</option>
    </select>
</body>
</html>

對於前兩個margin變成10px咱們不奇怪，可是當咱們看select的option的時候會發現被選中的option的margin業變成了10px，沒有被選中的option則沒有變化！

是的:checked也會選擇被選中的option

並非全部圖片都會被加載

咱們知道寫在頁面上的img標籤，不管顯示與否，圖片都會被加載（因此試圖經過對圖片display:none來達到節省網絡流量的作法就省省吧。。。），咱們也常用backgroung-image等css屬性爲頁面添加圖片，這些圖片是否是必定會被加載呢，看個例子

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .useless{
            background-image: url(images/0.jpg);
        }
        .hidden{
            background-image: url(images/1.jpg);
        }
        .none{
            background-image: url(images/2.jpg);
        }
        .parentHidden{
            background-image: url(images/3.jpg);
        }
        .parentNone{
            background-image: url(images/4.jpg);
        }
    </style>
</head>
<body>
    <div class="hidden"></div>

    <div class="none"></div>

    <div style="visibility:hidden;">
        <div class="parentHidden"></div>
    </div>

    <div style="display:none;">
        <div class="parentNone"></div>
    </div>
    
    <div style="display:none">
        <img src="images/5.jpg"></div>
</body>
</html>

看一下網絡監視狀況（怎麼柳巖的照片變小後感受怪怪的。。。）

咱們能夠發現圖片0和4沒有被下載，0是沒有用到的CSS，4是父容器的display被設爲none的狀況，這兩種狀況下的CSS引用的圖片是不會被加載的，而父容器設置visibility屬性爲hidden仍然會加載圖片，不要搞混了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。