css小知識點

2021-09-11 08:10:14 字數 1730 閱讀 5829

1、選擇器查詢順序是自右向左的順序查詢

2、色值: #******,六位,每兩位代表乙個顏色的飽和度,rgb分別代表紅綠藍,每一位是乙個十六進製制,如果每個的兩位都重複,那麼可以只寫乙個

3、 行內元素不能設定寬高、塊級元素可以、行內塊級元素

4、只需設定乙個寬或者高,另乙個會自動改變

5、凡是inline和inline-block都是帶有文字特性的,比如兩個img標籤,由於存在換行,他們之間會存在乙個空白符,相當於兩個文字,中間會出現文字分隔符(空格)

6、開發流程: 先定義css功能,再使用css的功能組合

7、body預設是margin: 8px;

8、塊級元素寬度自適應, 如設定了margin-right那麼塊級元素的寬度會填滿剩下的空間

9、margin塌陷: 子級與父級同時設定margin-top的時候,子級無法相對於父級設定margin-top的情景,使用bfc來解決這種情況,下面是觸發bfc的方法,根據情況對父元素使用相應的方式

10、margin合併: 兩個元素水平方向設定margin實際表現出來的是兩個margin相加,兩個非行內元素垂直方向設定margin,不管是否巢狀,margin為兩者當中最大的那乙個,垂直方向的可以通過觸發bfc來解決,將其中之一通過容器包裹,並將容器觸發bfc, 如果非巢狀,一般這個問題不解決,應為會破壞html結構。

11、浮動float: 浮動元素會產生浮動流,有以下規則

12、清楚浮動:clear:both, 由於浮動元素對塊級元素不可見,所以不會撐開父級塊級元素,但是可以通過下面的方式解決

//清楚浮動,然後就可以緊接著前面的div元素並撐開父元素

-------------------------------------------

.two

p

.one::after

13、position設定為absolute、fixed會脫離文件流,不會撐開父元素

14、設定了position:absolute|fixedfloat:left/right的元素會變成inline-block

15、設定文字的大小是設定的是文字的高度

16、單行文字溢位

white-space: nowrap; //是文字失去換行功能

overflow: hidden;

text-overflow:ellipsis;

17、多行文字溢位css3出現了解決方案,但是由於pc端的相容性不是特別好,所以一般只實現移動端。

18、當網速不好的時候,無法載入css的時候,對於載入不了,顯示文字的情況,可以像下面這樣。

**網

a // 這樣當載入了css就會顯示背景而不會顯示文字

a
19、html元素鑲嵌規定

20、inline-block設定後面的文字類,會與其內部的文字底部對齊

21、當父元素的高為固定值的時候height才能設定百分比

22、img 的對其方式是字型的底部,所以有一種情況是如果字型過大,相對小,那麼對其字型的底部。

css小知識點

1,z index 該屬性設定乙個定位元素沿 z 軸的位置,z 軸定義為垂直延伸到顯示區的軸。如果為正數,則離使用者更近,為負數則表示離使用者更遠。z index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。元素可擁有負的 z index 屬性值。z index...

CSS小知識點

id選擇器 100 類選擇器 10 元素選擇器 1 content div 10 1 data 10 content data 10 10 選擇器是有優先順序的,可以通過權重來計算其優先順序 background color屬性用於為元素設定背景色,該屬 性接受任何合法的顏色值 bodybodybo...

css 小知識點

1.width auto或者不設width 與 width 100 區別 width auto或者不設 子元素會預設撐滿父元素content區域,如果子元素有margin border padding的話,content區域會自動減去margin border padding,這樣子元素一定不會超出...