前端面試常考知識點---CSS
阿新 • • 發佈:2018-12-13
1.CSS3的新特性有哪些
- CSS3選擇器 .
-
CSS3邊框與圓角
CSS3圓角border-radius:
屬性值由兩個引數值構成: value1 / value2,值之間用/分隔,value1代表圓角的水平半徑,value2代表圓角的垂直半徑
盒陰影box-shadow:
語法:box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 擴充套件程度 顏色 是否具有內陰影 -
CSS3背景與漸變
重要的幾個:
``` 語法:backgroundimage:url('1.jpg),url('2.jpg') ```
background-imagebackground-origin
background-repeat
``` 定義:設定是否及如何重複背景影象,預設地,背景影象在水平和垂直方向上重複。 ```background-size
``` 定義:指定背景影象的大小 語法:background-size:number / % / cover / contain ```太多了,本寶寶休息一下再寫
- CSS3過渡
- CSS3變換
- CSS3動畫
2.flex
這篇講的很全
簡單易懂
一方面是在父容器的幾個屬性,另一些就是子元素的屬性
父: * flex-direction 子元素排列方向 * flex-wrap 如果一條軸線排不下,如何換行 * flex-flow flex-direction屬性和flex-wrap屬性的簡寫形式 * justify-content 在主軸上的對齊方式 * align-items 在交叉軸上如何對齊 * align-content 多根軸線的對齊方式 子: * order * flex-grow * flex-shrink * flex-basis * flex * align-self
3.BFC
- 內部的box會在垂直方向,一個接一個的放置
- 每個元素的margin box的左邊,與包含塊border box的左邊相接觸(對於從做往右的格式化,否則相反)
- box垂直方向的距離由margin決定,屬於同一個bfc的兩個相鄰box的margin會發生重疊
- bfc的區域不會與浮動區域的box重疊
- bfc是一個頁面上的獨立的容器,外面的元素不會影響bfc裡的元素,反過來,裡面的也不會影響外面的
- 計算bfc高度的時候,浮動元素也會參與計算
怎麼建立bfc
- float屬性不為none(脫離文件流)
- position為absolute或fixed
- display為inline-block,table-cell,table-caption,flex,inine-flex
- overflow不為visible
- 根元素
應用場景
- 自適應兩欄佈局
- 清除內部浮動
-
防止垂直margin重疊
為什麼overflow:hidden可以消除margin合併?
我們首先要搞清楚為什麼會發生margin合併。這些元素(包括兄弟、父子元素等)之間之所以會發生margin合併,是因為它們屬於同一個BFC。所以,我們就知道怎麼辦了,只要讓它們不屬於同一個BFC不就可以了?通過overflow:hidden建立了一個BFC
為什麼overflow:hidden可以清除浮動的影響?
當給.parent設定"overflow:hidden"時,實際上建立了一個超級屬性BFC,此超級屬性反過來決定了"height:auto"是如何計算的。在“BFC佈局規則”中提到:計算BFC的高度時,浮動元素也參與計算。因此,父元素在計算其高度時,加入了浮動元素的高度,“順便”達成了清除浮動的目標,所以父元素就包裹住了子元素。
-
link、import、require的區別
import和requirerequire是執行時呼叫,所以require理論上可以運用在程式碼的任何地方
import是編譯時呼叫,所以必須放在檔案開頭當一個頁面被載入的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被載入,而@import引用的CSS會等到頁面全部被下載完再載入。所以有時候瀏覽@import載入CSS的頁面時會沒有樣式(就是閃爍),網速慢的時候還挺明顯。
原文地址:https://segmentfault.com/a/1190000017257916