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個標籤選擇器一起,也不如一個類選擇器。