css面试题十五道
1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？
標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin
2、box-sizing屬性？
用來控制元素的盒子模型的解析模式，默認為content-box
context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬
3、CSS選擇器有哪些？哪些屬性可以繼承？
CSS選擇符：id選擇器(#myid)、類選擇器(.myclassname)、標簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、后代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel=”external”]）、偽類選擇器（a:hover, li:nth-child）
可繼承的屬性：font-size, font-family, color
不可繼承的樣式：border, padding, margin, width, height
優先級（就近原則）：!important > [ id > class > tag ]
!important 比內聯優先級高
4、CSS優先級算法如何計算？
元素選擇符：1
class選擇符：10
id選擇符：100
元素標簽：1000
!important聲明的樣式優先級最高，如果沖突再進行計算。
如果優先級相同，則選擇最后出現的樣式。
繼承得到的樣式的優先級最低。
5、CSS3新增偽類有哪些?
p:first-of-type 選擇屬于其父元素的首個元素
p:last-of-type 選擇屬于其父元素的最后元素
p:only-of-type 選擇屬于其父元素唯一的元素
p:only-child 選擇屬于其父元素的唯一子元素
p:nth-child(2) 選擇屬于其父元素的第二個子元素
:enabled :disabled 表單控件的禁用狀態。
:checked 單選框或復選框被選中。
6、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
div：
border: 1px solid red; margin: 0 auto;? height: 50px; width: 80px;
浮動元素的上下左右居中：
絕對定位的左右居中：
7、display有哪些值？說明他們的作用?
inline（默認）–內聯
none–隱藏
block–塊顯示
table–表格顯示
list-item–項目列表
inline-block
8、position的值？
static（默認）：按照正常文檔流進行排列；
relative（相對定位）：不脫離文檔流，參考自身靜態位置通過 top, bottom, left, right 定位；
absolute(絕對定位)：參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位；
fixed(固定定位)：所固定的參照對像是可視窗口。
9、CSS3有哪些新特性？
RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（對長的不可分割單詞換行）word-wrap：break-word
文字陰影：text-shadow：5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）
font-face屬性：定義自己的字體
圓角（邊框半徑）：border-radius 屬性用于創建圓角
邊框圖片：border-image: url(border.png) 30 30 round
盒陰影：box-shadow: 10px 10px 5px #888888
媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會采用不同的屬性
10、請解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場景？
該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。在傳統的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內在的方向限制，可以由開發人員自由操作。
使用場景：彈性布局適合于移動前端開發，在Android和ios上也完美支持。
11、用純CSS創建一個三角形的原理是什么？
首先，需要把元素的寬度、高度設為0。然后設置邊框樣式。
width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;
?
12、一個滿屏品字布局如何設計?
第一種真正的品字：
三塊高寬是確定的；
上面那塊用margin: 0 auto;居中；
下面兩塊用float或者inline-block不換行；
用margin調整位置使他們居中。
第二種全屏的品字布局:
上面的div設置成100%，下面的div分別寬50%，然后使用float或者inline使其不換行。
13、常見的兼容性問題？
1.不同瀏覽器的標簽默認的margin和padding不一樣。*{margin:0;padding:0;}
2.IE6雙邊距bug：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大。? ? ?hack：display:inline;將其轉化為行內屬性。
3. 漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有? ? ? ? 情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
{ background-color:#f1ee18;/*所有識別*/ .background-color:#00deff\9; /*IE6、7、8識別*/ +background-color:#a200ff;/*IE6、7識別*/ _background-color:#1e0bd1;/*IE6識別*/ }
?
4.設置較小高度標簽（一般小于10px），在IE6，IE7中高度超出自己設置高度。hack：給超出高? ? ? ? 度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。
5.IE下，可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬? ? ? ?性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統一通過getAttribute()獲取自? ? ?定義屬性。
6. Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -? ? ? ? ? ? webkit-text-size-adjust: none; 解決。
7. 超鏈接訪問過后hover樣式就不出現了，被點擊訪問過的超鏈接樣式不再具有hover和active了。? ? ? 解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {}? ? ? ? ? ? ? ? a:active {}
14、為什么要初始化CSS樣式
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
15、absolute的containing block計算方式跟正常流有什么不同？
無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：
若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
否則,則由這個祖先元素的 padding box 構成。
如果都找不到，則為 initial containing block。
補充：
static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
absolute: 向上找最近的定位為absolute/relative的元素
fixed: 它的containing block一律為根元素(html/body)
————————————————
版權聲明：本文為CSDN博主「無編落木蕭蕭下」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/m0_48425862/article/details/106715939
總結
