#盒子模型
##標準盒模型:content-
- 怪異盒子模型: border content
專題推薦:2020年CSS面試題總結(最新)
行內元素
特徵設定寬高無效- 設定margin只有左右有效,上下無效
- 設定padding上下左右均有效,會撐起空間
- 不會進行自動換行
-
常見的行內元素
行內塊元素
- 」區塊級元素
如果未設定寬高,預設繼承父級寬高p p ul li h1-h6
- css實作居中
- margin: 0 auto;
- position定位配合transform:translate
- flex佈局
- text-align配合line-height,用於字體在其父元素區域內居中
vertical-align: middle; 用來設定行內元素的居中
/*IE 6*/* html .p {
color: red;}/*IE 7*/* + html .p {
color: green;}
em是繼承父元素的font-size大小單位
support
@support用來偵測瀏覽器是否支援某個css屬性,可以理解為條件判斷,一般用作相容性處理。
media
媒體查詢,依照視口大小寫對應的css樣式,一般配合rem做行動端的相容。
calc
css的計算屬性,用於動態計算長度值,支援數學運算。
清除浮動-
原理:在父元素的偽元素中設定clear:both,即可解決高度崩塌的問題。
::after {
content: "";
clear: both;
overflow: hidden;
height: 0;}
BFC:是一個獨立的佈局環境-
- 格式化上下文,是一個獨立的渲染區域,讓處於BFC內部的元素與外部的元素相互隔離,使內外元素的定位不會相互影響。
- 規則
- 同一個BFC下,相鄰的兩個box預設垂直排列
- 同一個BFC下,上下相鄰的兩個box,margin會發生重疊
- BFC不會與float區域重疊
- 計算BFC高度時,浮動子元素也會參與計算,所以不設定BFC高度,也會被浮動子元素撐開。
文字層不會被浮動層覆蓋,而是環繞在周圍
#解決父子邊緣重疊時子元素margin帶著父元素一起移動
### 原理:利用偽元素為父元素增加一個高度為0的table####
盒子模型
- #標準盒子模型:content
- 怪異盒子模型: border content
行內元素
- 特徵
- 設定寬高無效
- 設定margin只有左右有效,上下無效
- 設定padding上下左右均有效,會撐起空間
- 不會進行自動換行
- #常見的行內元素
行內塊元素
「區塊級元素
可以設定寬高
所有區塊級元素會獨佔一行- 如果未設定寬高,預設繼承父級寬高
-
- #常見的區塊級元素
- p p ul li h1-h6
-
css實作居中
-
#margin: 0 auto;- position定位配合transform:translate
flex佈局- text-align配合line-height,用於字體在其父元素區域內居中
vertical-align: middle; 用來設定行內元素的居中-
css hack
釋意:針對不同的瀏覽器,寫不同的css,用作相容
.p {
color: red; /*IE 8+*/
*color: green; /*IE 7*/
_color: yellow; /*IE 6*/}
選擇器hack
/*IE 6*/* html .p {
color: red;}/*IE 7*/* + html .p {
color: green;}
px 和em
px是絕對單位,值是固定的
em是繼承父元素的font-size大小單位
- support
- @support用來偵測瀏覽器是否支援某個css屬性,可以理解為條件判斷,一般用作相容性處理。
media
媒體查詢,依照視口大小寫對應的css樣式,一般配合rem做行動端的相容。
calc
- css的計算屬性,用於動態計算長度值,支援數學運算。
- 清除浮動
格式化上下文,是一個獨立的渲染區域,讓處於BFC內部的元素與外部的元素相互隔離,使內外元素的定位不會相互影響。
規則
同一個BFC下,相鄰的兩個box預設垂直排列
同一個BFC下,上下相鄰的兩個box,margin會發生重疊BFC不會與float區域重疊
計算BFC高度時,浮動子元素也會參與計算,所以不設定BFC高度,也會被浮動子元素撐開。
###文字層不會被浮動層覆蓋,而是環繞在周圍################解決父子邊緣重疊時子元素margin帶著父元素一起移動# ##### 原理:利用偽元素為父元素添加一個高度為0的table#########相關教學推薦:###CSS影片教學##########
以上是整理css常見面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章!