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