【前端知識體系】CSS基礎知識強化

時間 2019-11-17

原文原文鏈接

1.CSS樣式（選擇器）的優先級？

1.1 權重的計算規則

第一優先級：無條件優先的屬性只須要在屬性後面使用!important。它會覆蓋頁面內任何位置定義的元素樣式。（ie6支持上有些bug）。
第一等：內聯樣式，如：style="color:red;"，權值爲1000.（該方法會形成css難以管理，因此不推薦使用）
第二等：ID選擇器，如：#header，權值爲0100.
第三等：類選擇器、如：.bar，權值爲0010.
第四等：類型（標籤）選擇器和僞元素選擇器，如：div ::first-line 權值爲0001.
通配符，子選擇器，相鄰選擇器等。如*，>,+, 權值爲0000.
繼承的樣式沒有權值。

[!NOTE]
CSS選擇器的優先級：!important > 行內樣式 > ID選擇器 > 類選擇器 > 標籤選擇器 > 其餘css

1.2 實際案例

<style>
    a{color: yellow;} /*權值：0,0,0,1*/
    div a{color: green;} /*權值：0,0,0,2*/
    .demo a{color: black;} /*權值：0,0,1,1*/
    .demo input[type="text"]{color: blue;} /*權值：0,0,2,1*/
    .demo *[type="text"]{color: grey;} /*權值：0,0,2,0*/
    #demo a{color: orange;} /*權值：0,1,0,1*/
    div#demo a{color: red;} /*權值：0,1,0,2*/
</style>

<body>
    <a href="">第一條應該是黃色</a> <!-適用第1行規則->
    <div class="demo">
    <input type="text" value="第二條應該是藍色" /><!-適用第四、5行規則，第4行優先級高->
    <a href="">第三條應該是黑色</a><!-適用第二、3行規則，第3行優先級高->
    </div>
    <div id="demo">
    <a href="">第四條應該是紅色</a><!-適用第五、6行規則，第6行優先級高->
    </div>
</body>

2.雪碧圖的做用？

[!NOTE]
減小HTTP的請求次數，提升加載的性能
在一些狀況下能夠減小圖片的大小
關鍵在於對background-position概念的理解和使用html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>購物車特效</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .select{
            margin: 0 auto;
            display: block;
            width: 1000px;
            height: 35px;
            background-color:#F5FFFA;
        }
        div{
            width: 42px;
            height: 34px;
            background-image: url(amazon-sprite_.png);
            background-repeat: no-repeat;
            background-position: -8px -335px;
        }
        div:hover{
            background-image: url(amazon-sprite_.png);
            background-repeat: no-repeat;
            background-position: -55px -335px;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com" target='_blank' class="select">
        <div></div>

    </a>
</body>
</html>

3.自定義字體的使用場景？

[!NOTE]
宣傳/品牌/banner等固定文案
字體圖標中使用css3

<style>
@font-face{
     font-family: '字體名稱隨便起'; 
     src: url('../font/字體名稱.eot');
     src:url('../font/字體名稱.woff') format('woff'),
         url('../font/字體名稱.ttf') format('truetype'),
         url('../font/字體名稱.svg') format('svg');
}
/* 使用方法：html中的代碼中加一個h1或者其餘的，裏面寫你本身想要的特殊文字 */
h1{
    font-size:36px; 
    color:#ccc;
    font-family: "字體名稱隨便起";
}

</style>

4.Base64的使用？

4.1 概念

Base64就是一種基於64個可見字符(26個大寫字母，26個小寫字母，10個數字，1個+，一個 / 恰好64個字符)來表示二進制數據的表示方法。web

[!NOTE]
擴展：不可見字符其實並非不顯示，只是這些字符在屏幕上顯示不出來，好比：換行符、回車、退格......字符。svg

Base64字符表中的字符本來用6個bit就能夠表示，如今前面添加2個0，變爲8個bit，會形成必定的浪費。所以，Base64編碼以後的文本，要比原文大約三分之一性能

4.2 原理

第一步，將待轉換的字符串每三個字節分爲一組，每一個字節佔8bit，那麼共有24個二進制位。
第二步，將上面的24個二進制位每6個一組，共分爲4組。
第三步，在每組前面添加兩個0，每組由6個變爲8個二進制位，總共32個二進制位，即四個字節。
第四步，根據Base64編碼對照表（見下圖）得到對應的值。

[!NOTE]
兩個字節：兩個字節共16個二進制位，依舊按照規則進行分組。此時總共16個二進制位，每6個一組，則第三組缺乏2位，用0補齊，獲得三個Base64編碼，第四組徹底沒有數據則用「=」補上。所以，上圖中「BC」轉換以後爲「QKM=」；
一個字節：一個字節共8個二進制位，依舊按照規則進行分組。此時共8個二進制位，每6個一組，則第二組缺乏4位，用0補齊，獲得兩個Base64編碼，然後面兩組沒有對應數據，都用「=」補上。所以，上圖中「A」轉換以後爲「QQ==」；字體

4.3 做用

用於減小HTTP請求
適用於小圖片
base64編碼圖片以後的體積約爲原圖的4/3

5.僞類和僞元素的區別？

僞元素是真的有元素
前者是單冒號，後者是雙冒號

<style>
li:first-child {
    height: 20px;
    width: 100px;
    background-color: #139aff;
}
li:last-child {
    height: 60px;
    width: 100px;
    background-color: #89ff56;
    line-height: 60px;
}
p:first-of-type {
    background-color:  red;
}
p:last-of-type {
    background-color:deeppink;
}


/*每一個p標籤以前新增一個Hello文本*/
.container p::before {
    content: 'Hello';
}
.container p::after {
    content: 'Thanks';
}
.container p::first-letter {
    font-size: 32px;
}
.container p::first-line {
    background-color: #f1ffad;
}

/*全部選中的元素會變色*/
.container p::selection {
    background-color: #1025ff;
    color: red;
}
</style>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
<div>
    <h1>h1文本</h1>
    <p>p文本1</p>
    <p>p文本2</p>
    <p>p文本3</p>
    <p>p文本4</p>
</div>

<div class="container">
    <p> css1 </p>
    <p> css2 </p>
    <p> css3 </p>
    <p>我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素</p>
</div>
</body>
</html>

6.如何美化CheckBox？

[!NOTE]編碼

label[for]和id

隱藏原生的input

:checked + label 選擇器

<style>
#value1{
        display: none;
}
#value1:checked+label{
    color:blue;
    background: #4cda60;
}
#value1:checked+label:before{
    left:31px;
}
#value1+label{
    cursor: pointer;
    color:red;
    display: block;
    width:60px;
    height: 30px;
    background: #fafbfa;
    border-radius: 15px;
    position: relative;
    box-shadow:inset 0 0 0 0 #eee,0 0 1px rgba(0,0,0,0.4);
    transition: background 0.1s;
    -webkit-transition: background 0.1s;
    -moz-transition: background 0.1s;
    -o-transition: background 0.1s;
}
#value1+label:before{
    content:'';
    position: absolute;
    background: #fff;
    top:1px;
    left:1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow:0 3px 1px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.3);
    transition: left 0.1s;
    -webkit-transition: left 0.1s;
    -moz-transition: left 0.1s;
    -o-transition: left 0.1s;
}
</style>
<body>
    <input type="checkbox" name="timeType" value="1" id="value1" checked="checked"/>
    <label for="value1"></label>
</body>