CSS前端面試
系列文章：
HTML及HTTP面試筆試題
JavaScript面試筆試題
1.CSS有什么書寫順序侯勉？
1.
位置屬性：position宅此，top等，z-index枪眉，display彤守，float等毯侦。2. 大小：width具垫，height侈离，padding，margin筝蚕。3. 文字系列：font系列卦碾，line-height，letter-space起宽，color等洲胖。4. 背景與邊框：background，border坯沪。5. 其他animation绿映，transition
2.CSS其他書寫規(guī)范？
屬性寫壓縮屬性，去掉小數(shù)點(diǎn)前的0叉弦，命名用全稱丐一，顏色縮寫，中劃線連接淹冰，多用類不名用id
3.移動(dòng)端中什么是設(shè)備像素比库车？怎么應(yīng)用？
我們首先應(yīng)該知道樱拴，在css規(guī)范中
柠衍，長(zhǎng)度可以分為兩類，一類是絕對(duì)的晶乔，一類是相對(duì)的珍坊，而px就是一個(gè)相對(duì)的單位（CSS pixels），相對(duì)的是設(shè)備像素正罢。而這里我們所說的設(shè)備像素（Device pixels）就是一個(gè)物理概念垫蛆，比如iPhone5的分辨率是640 x 1136px。
那么腺怯，1cp的px和1dp的px相等嗎？
這里就引出的一個(gè)概念就是：設(shè)備像素比（device pixel ratio）川无，由于手機(jī)的每英寸像素不同呛占，導(dǎo)致了，CSS px和設(shè)備像素產(chǎn)生了比例懦趋，而這個(gè)比例就叫做設(shè)備像素比晾虑，簡(jiǎn)稱dpr。
那么他們到底有什么關(guān)系呢仅叫，如下圖所示：
意思就是帜篇，標(biāo)準(zhǔn)設(shè)備dpr為1，例如電腦诫咱，那么電腦分辨率的1px就能用css的1px表示笙隙，但是像iphone這樣的視網(wǎng)膜屏幕上，dpr為2坎缭，那么分辨率的1px竟痰，就需要css中的0.5px去表示。 簡(jiǎn)言之 dp = cp * dpr; 所以在設(shè)計(jì)的時(shí)候掏呼，我想要手機(jī)上呈現(xiàn)4px寬的log坏快，css就只用寫成2px。
CSSpx的好處在于什么憎夷？
由于csspx是相對(duì)的莽鸿，那么我編程寫的1px，在不同dpr的設(shè)備上就能呈現(xiàn)出不同分辨率px拾给，以適應(yīng)更廣泛的手機(jī)祥得。
4.說說對(duì)vertical-align的理解
vertical-align是指文字垂直方向上的對(duì)其方式兔沃，屬性值有top，text-top啃沪，bottom粘拾，text-bottom，baseline（默認(rèn)）创千，middle缰雇，長(zhǎng)度，百分比追驴。百分百和長(zhǎng)度都是相對(duì)于baseline械哟，百分百的值相對(duì)于line-height。然后bottom殿雪，text-bottom區(qū)別在于暇咆，bottom指到是父元素標(biāo)簽到底部，而text-bottom指的是與父標(biāo)簽的文字底部對(duì)齊丙曙。
.dot{
display: inline-block;
height: 4px;
width: 4px;
background-color: red;
vertical-align: bottom;
}
.b
{
background-color: gray;
color: white;
line-height: 8px;
}
<div class="b">
woooooooooooooooooooooooo <span class="dot"></span>
</div>
比如這段代碼爸业，如果值是bottom，那么div的高度為8px（==撐開div的是行高不是文字大小==）亏镰，而且點(diǎn)在div的底部扯旷；如果值是text-bottom的話，那么div的高度為15px索抓，因?yàn)橛⑽淖帜赣心J(rèn)line-height钧忽，小點(diǎn)要到文字的地步，就向下?lián)伍_了line-height逼肯，故撐開了div耸黑。
5.什么是BFC？
BFC全稱 Box Formatting Context
Box：是CSS布局的對(duì)象和基本單位篮幢，一個(gè)網(wǎng)頁由很多Box組成大刊。
Formatting context：它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則三椿，它決定其子元素將如何定位奈揍，以及和其他元素的關(guān)系和相互作用。
BFC：直譯為"塊級(jí)格式化上下文"赋续。它是一個(gè)獨(dú)立的渲染區(qū)域男翰，只有block-leve box參與，他規(guī)定了內(nèi)部的block-leve box如何布局纽乱，并且這個(gè)區(qū)域與外界毫不相干蛾绎。
BFC布局的規(guī)則：
- 內(nèi)部的box在垂直方向一個(gè)接一個(gè)的放
- 垂直方向上，屬于同一個(gè)BFC的的margin會(huì)發(fā)生重疊。
如果想要兩個(gè)box的margin不發(fā)生重疊租冠，那么把兩個(gè)box都設(shè)置成BFC鹏倘，那么他們由于與外界毫不相干，故margin不會(huì)重疊顽爹。
- 每個(gè)元素的margin box的左邊纤泵， 與包含塊border box的左邊相接觸。
- BFC區(qū)域不會(huì)與float box相重合镜粤，故可以做自定義兩欄布局捏题。
- 計(jì)算高度時(shí)，float元素也會(huì)計(jì)算肉渴，故可以由此來解決浮動(dòng)公荧。
- BFC是頁面上一個(gè)獨(dú)立的容器，子元素與外界無關(guān)同规。
滿足下列條件之一就可以觸發(fā)BFC：
- 根元素循狰，即HTML元素
- float不為none
- overflow不為visible
- display為inline-block、table-cell券勺、table-caption
- position的值為absolute或者fixed
6.說說如何清除浮動(dòng)
- 添加額外標(biāo)簽绪钥，并設(shè)置clear
<div style="clear:both;"></div>
或
<br clear="all" />
缺點(diǎn)在于難維護(hù)，并會(huì)添加很多無意義的空標(biāo)簽关炼。堅(jiān)決不使用昧识，只時(shí)候新手學(xué)習(xí)
- 激發(fā)BFC（上一文講了BFC會(huì)計(jì)算浮動(dòng)元素的高度，從而消除浮動(dòng)）
a.設(shè)置overflow
<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">
<h2>父元素設(shè)置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>
由于ie6還需要設(shè)置*zoom：1來激發(fā)haslayout盗扒，計(jì)算浮動(dòng)元素高度。
b.父元素float：不建議缀去，會(huì)造成布局混亂
c.父元素設(shè)置display:table：display:table 本身并不會(huì)創(chuàng)建BFC侣灶，但是它會(huì)產(chǎn)生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以創(chuàng)建新的BFC
- 清除浮動(dòng)最佳實(shí)踐：偽元素
.clearfix{
display: inline-block;// 激發(fā)BFC,若是block可以不要此條
*zoom：1; // ie6激發(fā)haslayout
}
.clearfix:after{
display: block; // 使生成元素以塊級(jí)元素顯示缕碎，占滿剩余空;
content: "."; // 寫什么都可以
height: 0; // 不產(chǎn)生額外高度破壞原有布局高度
line-height: 0; // 同上
clear: both; // 清除浮動(dòng)
visibility: hidden; // 使生成的多余內(nèi)容不顯示褥影，且防止生產(chǎn)的多余內(nèi)容阻止了原有內(nèi)容的點(diǎn)擊交互
}
7. 常見的可繼承屬性？
- 所有元素都可以繼承：visibility咏雌，cursor
- 內(nèi)聯(lián)元素可繼承：letter-spacing凡怎、word-spacing、white-space赊抖、line-height统倒、color、font氛雪、 font-family房匆、font-size、font-style、font-variant浴鸿、font-weight井氢、text- decoration、text-transform岳链、direction（文字相關(guān)屬性）花竞。
- 塊級(jí)元素可繼承：text-indent、text-align掸哑。
- 列表元素可繼承：list-type约急、list-type-style、list-style-position举户、list-style-image烤宙。
- 表格元素可繼承：border-collapse。
8. 說說white-space俭嘁、word-wrap躺枕、word-break？
- white-space表示空白符的處理方式：
- normal（默認(rèn)）：空白都會(huì)被忽略供填。
- pre：空白都會(huì)被保留拐云，類似于 <pre>標(biāo)簽。
-
nowrap：文本不會(huì)換行知道遇見
為止近她。 - pre-wrap：保留空白符序列叉瘩，但是正常地進(jìn)行換行（遇見
）。 - pre-line：合并空白符號(hào)粘捎，但是保留換行符薇缅。
- word-wrap單詞斷行：
- normal：當(dāng)下一個(gè)單詞太長(zhǎng)時(shí)，會(huì)自動(dòng)換行攒磨。Ｓ捐搿！Ｃ溏帧灸撰！但是，如果換行了拼坎，容器還是包裹不了這個(gè)單詞怎么辦鳍咱？這個(gè)單詞就會(huì)在新的一行沖出容器０莆谩黔衡！
- break-word：這個(gè)屬性值就代表了奏纪，如果單詞要沖出邊界了，那么允許在這個(gè)單詞內(nèi)斷行盛龄。比如我的單詞惦蚊，ammmmmmmmmm器虾，在ammmmm時(shí)就到達(dá)了邊界，那么剩下的mmmm就可以被換到下一行蹦锋。
- word-break直接單詞斷行：
- break-all：就像word-wrap那樣兆沙，它首先考慮的是把長(zhǎng)單詞換到下一行，如果換到了下一行莉掂，容器還是不能包裹葛圃，那么才在單詞內(nèi)斷行，而break-all憎妙，則是库正，一遇到了邊界，不管這個(gè)單詞長(zhǎng)短厘唾，直接就把單詞斷行褥符。
- keep-all：與上面對(duì)立，無論遇到什么情況抚垃，都不斷行喷楣。保持瀏覽器狀態(tài)。
- normal：默認(rèn)值鹤树。
// 強(qiáng)制不換行：
.text{
white-space: nowrap;
}
// 自動(dòng)換行
.text{
word-wrap: break-word;
word-break: normal;
}
// 強(qiáng)制英文單詞自動(dòng)換行
.text{
word-break:break-all;
}
9. display,position,float之間的定義關(guān)系铣焊？
- 如果display為none，則忽略position和float屬性罕伯。
- 否則曲伊，position值為fixed或者absolute，display默認(rèn)為block且float為none追他。
- 否則坟募，float的值不為none，則display默認(rèn)為block邑狸。
- 否則懈糯，應(yīng)用指定的其他block屬性
- 不論之前是什么類型的元素（display:none除外），只要設(shè)置了position:absolute或float推溃，都會(huì)讓元素以display:block的方式顯示，可以設(shè)置長(zhǎng)寬届腐，默認(rèn)寬度并不占滿父元素
10. display:inline的元素铁坎，padding-top/padding-bottom, margin-top/margin-bottom, width/height無效。
11. 偽類和偽元素是什么犁苏？
- 偽類：用于向某些選擇器加特殊的效果硬萍。（:active, :focus, :hover, :link, :visited, :first-child, :lang）
- 偽元素：用于將特殊的效果添加到選擇器。（::first-letter, ::first-line, ::before, ::after）
- 偽類的效果可以通過添加一個(gè)實(shí)際的類來達(dá)到围详，而偽元素的效果則需要通過添加一個(gè)實(shí)際的元素才能達(dá)到朴乖，這也是為什么他們一個(gè)稱為偽類祖屏，一個(gè)稱為偽元素的原因。
12. 選擇器匹配順序：從右到左
瀏覽器CSS匹配不是從左到右進(jìn)行查找买羞，而是從右到左進(jìn)行查找袁勺。比如#divBox p span.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有class='red'的span元素畜普，找到后期丰，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素吃挑，如果都存在則匹配上钝荡。瀏覽器從右到左進(jìn)行查找的好處是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。
13. css中的px, em, rem, %詳解
- px：像素舶衬，虛擬長(zhǎng)度埠通，計(jì)算機(jī)系統(tǒng)的數(shù)字化圖片長(zhǎng)度單位，瀏覽器默認(rèn)字體大小16px逛犹。
- em：相對(duì)長(zhǎng)度單位端辱，相對(duì)當(dāng)前對(duì)象內(nèi)文本的字體尺寸。默認(rèn)1em=16px圾浅。
- rem：相對(duì)html根元素大小掠手。除了IE8及更早版本外，所有瀏覽器均已支持rem狸捕。
- 百分比：相對(duì)長(zhǎng)度喷鸽，相對(duì)父元素字體大小。
- 百分比與em區(qū)別：在font-size上沒有什么具體區(qū)別灸拍，區(qū)別在于text-indent做祝，設(shè)置百分比是相對(duì)與父元素寬度，而em相對(duì)于當(dāng)前字體大小鸡岗。
14. border:none與border:0的區(qū)別?
- border:none瀏覽器不會(huì)渲染border
- border:0混槐，瀏覽器內(nèi)存依然保存了border，只是值為0轩性，頁面上的效果和border:none一樣声登，都沒有邊框
- 區(qū)別和visibity:hidden 和 display:none的區(qū)別相似。
15. 偽類和類選擇器揣苏，誰的優(yōu)先級(jí)大一些悯嗓？一樣大
16. 什么是CSSRules？
在網(wǎng)頁加載過程中卸察， 瀏覽器將每個(gè)css文件解析為樣式表對(duì)象CSSStyleSheet脯厨，每個(gè)對(duì)象包含css規(guī)則對(duì)象CSSRule，css規(guī)則對(duì)象CSSRule包含選擇器和聲明對(duì)象坑质，以及其他一些符合css語法的對(duì)象合武。
修改這個(gè)對(duì)象：
console.log(document.styleSheets.item(0).cssRules[0].style.backgroundColor = 'blue');
每一個(gè)選擇器對(duì)應(yīng)的樣式就是一個(gè)cssRules临梗。
17. 獲取css屬性的方法？
- 獲取內(nèi)聯(lián)樣式（可讀寫）：
element.style.color = red或者element.setAttribute('style','color: red'); - 通過CSSStyleDeclaration對(duì)象的cssText屬性和setProperty()稼跳，removeProperry()方法：
element.style.cssText,element.style.removeProperty('color'),element.style.setProperty('color','green','important')- cssText：可讀寫樣式聲明文本
- length：多少條聲明
- parentRule：包含聲明的的那條規(guī)則
- getPropertyPriority()：返回優(yōu)先級(jí)
- getPropertyValue()：返回特定屬性值
- item()：索引訪問
- 通過
document.styleSheets查看所有樣式表 - window對(duì)象的getComputedStyle方法盟庞，第一個(gè)參數(shù)是element，第二個(gè)是null,空字符串,或者偽類字符串岂贩，返回一個(gè)只讀的計(jì)算樣式（最終表現(xiàn)樣式）茫经。同ie的element.currentStyle。
