面試題聯(lián)盟之CSS篇

1、CSS3的新特性

實(shí)現(xiàn)圓角（border-radius）

陰影（box-shadow）

文字加特效（text-shadow）

線性漸變（gradient）

旋轉(zhuǎn)（transform）

媒體查詢，多欄布局

2、CSS中 link 和@import 的區(qū)別

link屬于HTML標(biāo)簽，而@import是CSS提供的;

頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載; import只在IE5以上才能識(shí)別，而link是HTML標(biāo)簽，無(wú)兼容問(wèn)題;

link方式的樣式的權(quán)重 高于@import的權(quán)重.

3、介紹一下CSS的盒模型

理論上分為四個(gè)盒子，content box、padding box、border box、margin box，但是實(shí)際上padding-box 只有 Firefox 曾經(jīng)支持過(guò)，現(xiàn)在也不支持了，margin box更慘從未支持過(guò)

計(jì)算方式：

content box：盒模型的寬高 = content的寬高border box：盒模型的寬高 = content的寬高 + padding + border

css切換方式

可以通過(guò)box-sizing 設(shè)置，content-box為標(biāo)準(zhǔn)模型、border-box為IE模型

4、CSS 選擇符有哪些？

選擇符

1.id選擇器（ # myid）

2.類選擇器（.myclassname）

3.標(biāo)簽選擇器（div, h1, p）

4.相鄰選擇器（h1 + p）

5.子選擇器（ul > li）

6.后代選擇器（li a）

7.通配符選擇器（ * ）

8.屬性選擇器（a[rel = "external"]）

9.偽類選擇器（a: hover, li:nth-child）

*5、哪些屬性可以繼承？

繼承

1. 可繼承的樣式：font-size font-family color, text-indent;

2. 不可繼承的樣式：border padding margin width height;

6、CSS3新增偽類有那些？

p:first-of-type 選擇屬于其父元素的首個(gè)

元素。

p:last-of-type  選擇屬于其父元素的最后

元素。

p:only-of-type  選擇屬于其父元素唯一的

元素。

p:only-child    選擇屬于其父元素的唯一子元素的每個(gè)

元素。

p:nth-child(2)  選擇屬于其父元素的第二個(gè)子元素的每個(gè)

元素。

:enabled  :disabled 控制表單控件的禁用狀態(tài)。

:checked        單選框或復(fù)選框被選中。

7、優(yōu)先級(jí)算法如何計(jì)算？

優(yōu)先級(jí)算法規(guī)則:優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);

!important >  id > class > tag

important 比 內(nèi)聯(lián)優(yōu)先級(jí)高,但內(nèi)聯(lián)比 id 要高

8、為什么要清除浮動(dòng)？如何清除？

引起的問(wèn)題：

（1）父元素的高度無(wú)法被撐開(kāi)，影響與父元素同級(jí)的元素

（2）與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后

（3）若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)

解決方法：

①利用clear清除浮動(dòng)

.son {        clear: left | right | both | auto    }

②在父元素后面額外添加標(biāo)簽

<div class="parent">  ...  <div style="clear:both;"></div></div>

③父元素上使用after偽類

#parent:after {    content: '';    clear: both;    height: 0;    display: block;}

④利用overflow清除浮動(dòng)

#parent {    overflow: auto;    display: inline-block;}

9、實(shí)現(xiàn)垂直居中的幾種方法

<div class="parent">    <div class="son"></div></div>

① margin: auto

.parent {    width: 400px;    height: 400px;    position: relative;    .son {        position: absoulte;        left: 0;        right: 0;        top: 0;        bottom: 0;        margin: auto;    }}

② margin-left、margin-top負(fù)值法(需知道子元素width、height)

.parent {    width: 400px;    height: 400px;    position: relative;    .son {        position: absolute;        width: 100px;        height: 160px;        left: 50%;        top: 50%;        //margin-top: translateY(-50%);        //margin-left: translateX(-50%);        margin-top: -80px;        margin-left: -50px;    }}

③ flex布局

.parent{    display: flex;    align-items: center;    justify-content: center;}

④ table-cell(未脫離文檔流)

.parent {    display: table-cell;    vertical-align: middle;    text-align: center;}

10、css預(yù)處理器（sass/less/stylus/postcss）

這些都是類css語(yǔ)言，通過(guò)webpack編譯可以轉(zhuǎn)成瀏覽器可讀的css，并且賦予css更強(qiáng)大的功能。常用的功能：

文件分割：將大文件切割成小文件，方便維護(hù)

選擇器嵌套：更容易看清層級(jí)關(guān)系

變量：更容易使視覺(jué)風(fēng)格統(tǒng)一，便于整體風(fēng)格的替換

循環(huán)語(yǔ)句

11、知道哪些css動(dòng)畫(huà)

transition -- 過(guò)渡動(dòng)畫(huà)transition: property duration timing-function delay;
animation -- 可以定義每一幀的動(dòng)畫(huà)animation: keyframe-name duration timing-function delay iteration-count direction;
transform -- 靜態(tài)的translate、scale、rotate、skew、opacity等屬性函數(shù)

12、rem布局的原理

概念：

em：相對(duì)于父元素的單位

rem：css的一個(gè)相對(duì)單位，是相對(duì)于html根元素的大小的單位，實(shí)質(zhì)上是等比縮放。

vw,vh: 屏幕寬度/ 100， 屏幕高度/100

原理：

一般都是基于寬度的，將屏幕寬度平分成100份，轉(zhuǎn)換成百分比布局。但是谷歌瀏覽器支持最小字體是12px，所以可以將屏幕分成10份來(lái)計(jì)算。

將html元素的字體大小 = 屏幕寬度 / 100

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';

根據(jù)設(shè)計(jì)圖的尺寸編輯預(yù)處理function

$ue-width: 640; /* ue圖的寬度 */
@function px2rem($px) {  @return #{$px/$ue-width*100}rem;}
p {  width: px2rem(100);}

13、display有哪些值？說(shuō)明他們的作用?

 inline（默認(rèn)）--內(nèi)聯(lián) none   隱藏 block--塊顯示 table--表格顯示 list-item--項(xiàng)目列表 inline-block

14、position的值？

 static（默認(rèn)）：按照正常文檔流進(jìn)行排列； relative（相對(duì)定位）：不脫離文檔流，參考自身靜態(tài)位置通過(guò) top, bottom, left, right 定位； absolute(絕對(duì)定位)：參考距其最近一個(gè)不為static的父級(jí)元素通過(guò)top, bottom, left, right 定位； fixed(固定定位)：所固定的參照對(duì)像是可視窗口。****

15、用純CSS創(chuàng)建一個(gè)三角形的原理是什么？

width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #ff0000;

16、常見(jiàn)的兼容性問(wèn)題

不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不一樣。

{margin:0;padding:0;}

IE6雙邊距bug：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大。

display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。

漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標(biāo)記，將IE瀏覽器從所有情況中分離出來(lái)。接著，再次使用“+”將IE8和IE7、IE6分離開(kāi)來(lái)，這樣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í)別*/}

設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7中高度超出自己設(shè)置高度。

給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。

IE下，可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。

解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性。

Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,可通過(guò)加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了，被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不再具有hover和active了。

解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

17、display:none與visibility：hidden的區(qū)別？

display：none 不顯示對(duì)應(yīng)的元素，在文檔布局中不再分配空間（回流+重繪）visibility：hidden 隱藏對(duì)應(yīng)元素，在文檔布局中仍保留原來(lái)的空間（重繪）

18、position跟display、overflow、float這些特性相互疊加后會(huì)怎么樣？

display屬性規(guī)定元素應(yīng)該生成的框的類型；position屬性規(guī)定元素的定位類型；float屬性是一種布局方式，定義元素在哪個(gè)方向浮動(dòng)。

類似于優(yōu)先級(jí)機(jī)制：position：absolute/fixed優(yōu)先級(jí)最高，有他們?cè)跁r(shí)，float不起作用，display值需要調(diào)整。float 或者absolute定位的元素，只能是塊元素或表格。

19、BFC規(guī)范(面試遇上機(jī)會(huì)很低)

BFC規(guī)定了內(nèi)部的Block Box如何布局。

定位方案：

內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)放置。

Box垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。

每個(gè)元素的margin box 的左邊，與包含塊border box的左邊相接觸。

BFC的區(qū)域不會(huì)與float box重疊。

BFC是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算。

滿足下列條件之一就可觸發(fā)BFC

根元素，即html

float的值不為none（默認(rèn)）

overflow的值不為visible（默認(rèn)）

display的值為inline-block、table-cell、table-caption

position的值為absolute或fixed

20、CSS優(yōu)化、提高性能的方法有哪些？

避免過(guò)度約束

避免后代選擇符

避免鏈?zhǔn)竭x擇符

使用緊湊的語(yǔ)法

避免不必要的命名空間

避免不必要的重復(fù)

最好使用表示語(yǔ)義的名字。一個(gè)好的類名應(yīng)該是描述他是什么而不是像什么

避免！important，可以選擇其他選擇器

盡可能的精簡(jiǎn)規(guī)則，你可以合并不同類里的重復(fù)規(guī)則

21、全屏滾動(dòng)的原理是什么？用到了CSS的哪些屬性？

原理：有點(diǎn)類似于輪播，整體的元素一直排列下去，假設(shè)有5個(gè)需要展示的全屏頁(yè)面，那么高度是500%，只是展示100%，剩下的可以通過(guò)transform進(jìn)行y軸定位，也可以通過(guò)margin-top實(shí)現(xiàn) overflow：hidden； transition：all 1000ms ease；

22、::before 和 :after中雙冒號(hào)和單冒號(hào)有什么區(qū)別？解釋一下這2個(gè)偽元素的作用

單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素。::before就是以一個(gè)子元素的存在，定義在元素主體內(nèi)容之前的一個(gè)偽元素。并不存在于dom之中，只存在在頁(yè)面之中。:before 和 :after 這兩個(gè)偽元素，是在CSS2.1里新出現(xiàn)的。起初，偽元素的前綴使用的是單冒號(hào)語(yǔ)法，但隨著Web的進(jìn)化，在CSS3的規(guī)范里，偽元素的語(yǔ)法被修改成使用雙冒號(hào)，成為::before ::after

23、讓頁(yè)面里的字體變清晰，變細(xì)用CSS怎么做？

-webkit-font-smoothing在window系統(tǒng)下沒(méi)有起作用，但是在IOS設(shè)備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

24、position:fixed;在android下無(wú)效怎么處理？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

25、display:inline-block 什么時(shí)候會(huì)顯示間隙？

有空格時(shí)候會(huì)有間隙 解決：移除空格 margin正值的時(shí)候 解決：margin使用負(fù)值 使用font-size時(shí)候 解決：font-size:0、letter-spacing、word-spacing

26、style標(biāo)簽寫(xiě)在body后與body前有什么區(qū)別？

頁(yè)面加載自上而下 當(dāng)然是先加載樣式。

寫(xiě)在body標(biāo)簽后由于瀏覽器以逐行方式對(duì)HTML文檔進(jìn)行解析，當(dāng)解析到寫(xiě)在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會(huì)導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會(huì)出現(xiàn)FOUC現(xiàn)象（即樣式失效導(dǎo)致的頁(yè)面閃爍問(wèn)題）

27、CSS屬性overflow屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理?

參數(shù)是scroll時(shí)候，必會(huì)出現(xiàn)滾動(dòng)條。

參數(shù)是auto時(shí)候，子元素內(nèi)容大于父元素時(shí)出現(xiàn)滾動(dòng)條。

參數(shù)是visible時(shí)候，溢出的內(nèi)容出現(xiàn)在父元素之外。

參數(shù)是hidden時(shí)候，溢出隱藏。

28、闡述一下CSS Sprites

將一個(gè)頁(yè)面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background- repeat，background-position 的組合進(jìn)行背景定位。利用CSS Sprites能很好地減少網(wǎng)頁(yè)的http請(qǐng)求，從而大大的提高頁(yè)面的性能；CSS Sprites能減少圖片的字節(jié)。

29、rgba和opacity的透明有何不同？

opacity會(huì)繼承父元素的opacity 屬性，而RGBA設(shè)置的元素的后代元素不會(huì)繼承不透明屬性。簡(jiǎn)單來(lái)說(shuō)就是opacity作用于元素和元素所有內(nèi)容的透明

rgba相對(duì)于opacity還是技高一籌的，當(dāng)然只要是涉及顏色的，都可以用rgba來(lái)設(shè)置。

- END -