1、CSS之選擇器及其優先級
!important > (權重1000)內聯樣式 > (權重100)ID選擇器 > (權重10)類選擇器、屬性選擇器、僞類選擇器 > (權重1)元素選擇器、僞元素選擇器；
CSS權重：https://www.w3cplus.com/css/css-specificity-things-you-should-know.html
通配選擇器 `*` 對權重沒有任何貢獻；
混合選擇器權重疊加。例 #id .class的權重爲 110；
屬性選擇器：
僞類選擇器：
2、常見的僞類選擇器
參考鏈接：https://blog.csdn.net/weixin_44570988/article/details/88931559
2、CSS之定位
Position的屬性值有：
1. Absolute：絕對定位，脫離文檔流，是相對於最近的且不是static定位的父元素來定位。
2. Fixed：絕對定位，脫離文檔流，是相對於瀏覽器窗口的可視區域來定位的，是固定的，不會跟屏幕一起滾動。
3. Relative：相對定位，不脫離文檔流，是相對於其原本的位置來定位的。
4. Static：默認值，沒有定位。
5. Inherit：繼承父元素的position值。
3、CSS之Flex佈局
flex佈局：
6個設置在flex容器上的屬性：flex-direction、flex-wrap、flex-flow、justify-content、align-item、align-content；
6個設置在flex容器裏元素的屬性：flex-grow、flex-shrink、flex-basis、flex、order、align-self；
4、CSS之三類元素
4.1塊元素
塊元素的特性
1.獨霸一行，總是在新行上開始
2.寬度缺省是它父級元素的100%，除非設定一個寬度
3.高度、行高、外邊距、內邊距都可以設置
4.可以容納其他內聯元素或者其他塊元素
常見的塊元素：div，p，h1-h6，hr，table
4.2行內元素 inline element
行內元素的特性
1.和其他元素都在一行上，遇到父級元素邊界會自動換行
2.高、行高以及內外邊距都不可以改變
3.寬度與內容一樣寬，且不可改變
4.行內元素只能容納文本或者其他行內元素
對於行內元素，需要注意的是：設置寬度width無效，設置高度無效，可以通過設置line-height來設置，設置margin只有左右有效，上下無效，設置padding只有左右有效，上下無效
常見的行內元素：a，span，q，input，select
4.3行內塊元素
行內塊元素的特性
1.元素排列在一行
2.寬度默認由內容決定
3.元素間默認有間距
4.支持寬高、外邊距、內邊距的所有樣式的設置
常見的行內塊元素：img，button
5、CSS之動畫
css實現動畫效果分爲兩步：
1.使用@keyframs + 動畫名 定義動畫，如下圖。
2.在需要動畫的樣式中定義屬性animation使用動畫；
6、CSS之過渡
過渡屬性transition，例transition:width 2s,height 2s;
7、CSS之2D/3D轉換
8、Less
1.變量
@valueName:1px;
.style1{
width:@valueName;
}
2.嵌套
編譯前：
#a {
margin: 10
.b {
padding: 20
}
}
編譯後：
#a {
margin: 10
}
#a .b {
padding: 20
}
3.Mixin
普通混合：編譯後定義的混合(本例中.center )會輸出到css文件中
.center {
text-align: center
}
.a {
.center
}
不帶輸出的混合：混合後加一個括號()，編譯後定義的混合(本例中.center )不會輸出到css文件中
.center() {
text-align: center
}
.a {
.center
}
帶參數的混合：可以在定義時加入參
.m($a, $b) {
}
帶參數並且有默認值的混合
.m($a:10px, $b:pink) {
}
命名參數：對於多參數混合的調用，可以通過@b:red的方式指定要給那個參數賦值
.m($a:10px, $b:pink) {
}
.n {
.m(@b:red)
}
arguments變量：用@arguments表示mixin的所有入參
.b(@a, @b, @c) {
border: @arguments
}
.c {
.b(1px, solid, black)
}
4.運算
在Less中可以進行加減乘除的運算，計算雙方只有一方帶單位(px)即可
.a {
width: (100 + 100px)
}
5.繼承
.a {
}
.b {
$:extend(.a)
}
性能比混合高
靈活度比混合低: 不支持參數
6.避免編譯、!important
通過~""將不想被編譯的Less代碼放到雙引號中，這樣編譯器會講內容默認輸出到編譯後的css文件中
!important直接加在樣式後面即可
9、css渲染規則
css的渲染規則，是從上到下，從右到左渲染的。
.main h4 a { font-size: 14px; }
渲染過程是這樣的：首先先找到所有的 a，沿着 a 的父元素查找h4，然後再沿着 h4，查找.main。中途找到了符合匹配規則的節點就加入結果集。如果找到根元素的 html 都沒有匹配，則這條路徑不再遍歷。下一個 a 開始重複這個查找匹配，直至沒有a繼續查找。
10、選擇器等級
選擇器是不分上下級的。只管優先級。
第一等：內聯樣式，如: style=””，權值爲1000。
第二等：ID選擇器，如：#content，權值爲0100。
第三等：僞類選擇器>屬性選擇器>類選擇器，如.content，權值爲0010。
第四等：類型選擇器和僞元素選擇器，如div p，權值爲0001。
通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值爲0000。
繼承的樣式沒有權值。
權值相同時後定義的覆蓋先定義的。
權值是可以疊加的，但是不能越界。意思是及時你有11個標籤選擇器一起，也不如一個類選擇器。