CSS 一些基礎知識(優先級、行內元素的一些屬性、font-size單位) 怎樣不加載圖片

時間 2019-11-11

標籤 css 一些基礎知識優先級元素屬性 font size 單位怎樣加載圖片欄目 CSS 简体版

原文原文鏈接

轉載自：http://www.cnblogs.com/ctriphire/p/4159935.htmlcss

CSS大小寫不敏感

選擇器優先級以下所示：

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

同一級別html

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

規則是多個級別的組合，把選擇器中規則對應作加法，比較權值，若是權值相同那就後面的覆蓋前面的了，各個選擇器的權值爲：瀏覽器

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

行內(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屬性無效）

一些互斥的元素

對於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單位

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

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

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頁面全部字體了。

怎樣讓圖片不被加載

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

<!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>

看一下網絡監視狀況spa

咱們能夠發現圖片0和4沒有被下載，0是沒有用到的CSS，4是父容器的display被設爲none的狀況，這兩種狀況下的CSS引用的圖片是不會被加載的，而父容器設置visibility屬性爲hidden仍然會加載圖片
也就是說css當中設置了background-image但html當中未引用這個css樣式那麼此樣式中的background-image圖片不會被加載3d

另外就是css當中設置了background-image可是html當中引用此樣式的父容器的display:none，這樣狀況下圖片也不會被加載！

相關標籤/搜索

每日一句

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