前端開發(fā)中容易被忽略CSS特性有哪些-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)前端開發(fā)中容易被忽略CSS特性有哪些的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、吉林網(wǎng)絡(luò)推廣、微信小程序開發(fā)、吉林網(wǎng)絡(luò)營銷、吉林企業(yè)策劃、吉林品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供吉林建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：muchs.cn

大小寫不敏感

雖然我們平時在寫CSS的時候都是用小寫，但其實CSS并不是大小寫敏感的

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

前端開發(fā)中容易被忽略CSS特性有哪些

雖然把background-color寫為了background-COLOR，但仍然會生效，之所以寫成小寫是因為xhtml標準的關(guān)系，但是即使不是xhtml還是寫成小寫比較好，美觀、易讀而且可以應(yīng)對可能的轉(zhuǎn)換需求
選擇器優(yōu)先級

當(dāng)兩個規(guī)則都作用到了同一個html元素上時，如果定義的屬性有沖突，那么應(yīng)該用誰的值的，CSS有一套優(yōu)先級的定義。

不同級別

在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式。

作為style屬性寫在元素內(nèi)的樣式

  1. id選擇器

  2. 類選擇器

  3. 標簽選擇器

  4. 通配符選擇器

  5. 瀏覽器自定義或繼承

同一級別

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

上面的級別還是很容易看懂的，但是有時候有些規(guī)則是多個級別的組合，像這樣

<!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是應(yīng)用那條規(guī)則呢，有個簡單的計算方法（經(jīng)園友提示，權(quán)值實際并不是按十進制，用數(shù)字表示只是說明思想，一萬個class也不如一個id權(quán)值高）

  1. 內(nèi)聯(lián)樣式表的權(quán)值為 1000

  2. ID 選擇器的權(quán)值為 100

  3. Class 類選擇器的權(quán)值為 10

  4. HTML 標簽選擇器的權(quán)值為 1

我們可以把選擇器中規(guī)則對應(yīng)做加法，比較權(quán)值，如果權(quán)值相同那就后面的覆蓋前面的了，div.class的權(quán)值是1+10=11，而.test1 .test2的權(quán)值是10+10=20，所以div會應(yīng)用.test1 .test2變成綠色

前端開發(fā)中容易被忽略CSS特性有哪些

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

并不是所有的屬性對行內(nèi)元素都能夠生效

  1. 行內(nèi)元素不會應(yīng)用width屬性，其長度是由內(nèi)容撐開的

  2. 行內(nèi)元素不會應(yīng)用height屬性，其高度也是由內(nèi)容撐開的，但是高度可以通過line-height調(diào)節(jié)

  3. 行內(nèi)元素的padding屬性只用padding-left和padding-right生效，padding-top和padding-bottom會改變元素范圍，但不會對其它元素造成影響

  4. 行內(nèi)元素的margin屬性只有margin-left和margin-right有效，margin-top和margin-bottom無效

  5. 行內(nèi)元素的overflow屬性無效，這個不用多說了

  6. 行內(nèi)元素的vertical-align屬性無效（height屬性無效）

<div style="background-color: #a44;">
        <span style="padding:4px; margin:8px; height: 500px; width:1000px; background-color:#0e0;">123456789123456789</span>
    </div>

    <div style="background-color: #a44;">
        <span style="padding:4px; margin:8px; height: 500px; width:1000px; background-color:#0a0;">123456789</span>
    </div>

前端開發(fā)中容易被忽略CSS特性有哪些

通過例子可以看出，我們對span設(shè)置的width和height屬性并沒有生效，margin-top和margin-bottom無效，padding-top和padding-bottom會改變元素范圍（背景區(qū)域變大了），但并沒有影響下面元素位置

一些互斥的元素

  1. 對于absolute和fixed定位的(固定大小，設(shè)置了width和height屬性)元素，如果設(shè)置了top和left屬性，那么設(shè)置bottom和right值就沒有作用了，應(yīng)該是top和left優(yōu)先級高，否則同時寫了瀏覽器怎么知道按照誰定位

  2. 對于absolute和fixed定位的元素，如果設(shè)置了top、left、bottom、right的值后margin屬性也就不起作用了

  3. 對于absolute和fixed定位的元素，如果設(shè)置了top、left、bottom、right的值后float屬性同樣會失效

  4. 塊元素如果設(shè)置了float屬性或者是absolute、fixed定位，那么vertical-align屬性不再起作用

font-size單位

我們在寫字體的尺寸的時候常用的單位有

  1. px

  2. pt

  3. em

  4. rem

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

  1. px是pixel縮寫，是基于像素的單位.在瀏覽網(wǎng)頁過程中，屏幕上的文字、圖片等會隨屏幕的分辨率變化而變化，一個100px寬度大小的圖片，在800&times;600分辨率下，要占屏幕寬度的1/8，但在1024&times;768下，則只占約1/10。所以如果在定義字體大小時，使用px作為單位，那一旦用戶改變顯示器分辨率從800到1024，用戶實際看到的文字就要變“小”（自然長度單位），甚至?xí)床磺?，影響瀏覽。

  2.  pt是point(磅)縮寫，是一種固定長度的度量單位,大小為1/72英寸。如果在web上使用pt做單位的文字，字體的大小在不同屏幕（同樣分辨率）下一樣，這樣可能會對排版有影響，但在Word中使用pt相當(dāng)方便。因為使用Word主要目的都不是為了屏幕瀏覽，而是輸出打印。當(dāng)打印到實體時，pt作為一個自然長度單位就方便實用了：比如Word中普通的文檔都用“宋體 9pt”，標題用“黑體 16pt”等等，無論電腦怎么設(shè)置，打印出來永遠就是這么大。

  3. em：是相對單位，是一個相對長度單位，最初是指字母M的寬度，所以叫em，現(xiàn)指的是字符寬度的倍數(shù)，用法類似百分比，如：0.8em, 1.2em,2em等。通常1em=16px（瀏覽器默認字體大小16px），em是指父元素的字體大小。在一個頁面上給定了一個父元素的字體大小,這樣就可以通過調(diào)整一個元素來成比例的改變所有元素大小.它可以自由縮放,比如用來制作可伸縮的樣式表。類似還有ex的概念，ex 相對于字符“x”的高度，此高度通常為字體尺寸的一半。

  4. rem：rem是CSS新增的，em是相對于其父元素來設(shè)置字體大小的，這樣就會存在一個問題，進行任何元素設(shè)置，都有可能需要知道他父元素的大小，在多次使用時，就會帶來無法預(yù)知的錯誤風(fēng)險。而rem是相對于根元素(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>

前端開發(fā)中容易被忽略CSS特性有哪些

對于前兩個margin變成10px我們不奇怪，但是當(dāng)我們看select的option的時候會發(fā)現(xiàn)被選中的option的margin業(yè)變成了10px，沒有被選中的option則沒有變化！

前端開發(fā)中容易被忽略CSS特性有哪些

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

并不是所有圖片都會被加載

我們知道寫在頁面上的img標簽，無論顯示與否，圖片都會被加載（所以試圖通過對圖片display:none來達到節(jié)省網(wǎng)絡(luò)流量的做法就省省吧。。。），我們也經(jīng)常使用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">
        ![](images/5.jpg)</div>
</body>
</html>

看一下網(wǎng)絡(luò)監(jiān)視情況（怎么柳巖的照片變小后感覺怪怪的。。。）

前端開發(fā)中容易被忽略CSS特性有哪些

我們可以發(fā)現(xiàn)圖片0和4沒有被下載，0是沒有用到的CSS，4是父容器的display被設(shè)為none的情況，這兩種情況下的CSS引用的圖片是不會被加載的，而父容器設(shè)置visibility屬性為hidden仍然會加載圖片，不要搞混了

感謝各位的閱讀！關(guān)于“前端開發(fā)中容易被忽略CSS特性有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

新聞標題：前端開發(fā)中容易被忽略CSS特性有哪些-創(chuàng)新互聯(lián)
新聞來源：http://muchs.cn/article16/depodg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、虛擬主機、手機網(wǎng)站建設(shè)、Google、動態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計