整理網(wǎng)上流傳的若干份面試題目，突發(fā)奇想，總結(jié)關(guān)于CSS面試題目的考察點(diǎn)，發(fā)現(xiàn)問(wèn)題大多圍繞幾個(gè)屬性和幾種題目，水平有限，僅供參考。

寫這個(gè)博文內(nèi)心有種莫名奇妙的自我譴責(zé)感，實(shí)在不應(yīng)該把面試層疊樣式“應(yīng)試”復(fù)習(xí)。牛逼的你，也許會(huì)說(shuō)：萬(wàn)變不離其中，把css掌握了，哪里需要擔(dān)心會(huì)考什么。呵呵！

 1，  多元素水平居中

實(shí)現(xiàn)一下效果： 

平常人看見(jiàn)題目，最初感覺(jué)實(shí)現(xiàn)圖片中的效果不難，設(shè)置小黑框的寬高邊距，字體水平垂直居中即可。其實(shí)，題目應(yīng)該實(shí)際上是考察多元素水平居中，即無(wú)論元素（小黑框）基數(shù)為多少，它們都能作為一個(gè)整體，水平居中。

在網(wǎng)站布局中，很多時(shí)候，子元素中使用行內(nèi)元素如 span或塊元素li標(biāo)簽且標(biāo)簽個(gè)數(shù)不定，而我們又想讓這一塊不管個(gè)數(shù)有多少個(gè)(子元素的總體寬度不定)，始終都能居中顯示。這就需要設(shè)置子元素 display:inline-block。同時(shí)，根據(jù)display:inline-block的屬性，子元素本身具備inline的特性，因此父元素 需要設(shè)置text-align：center，來(lái)實(shí)現(xiàn)子元素作為一個(gè)整體在父元素中水平居中。

main{  text-align:center;} 
div{  display:inline-block;  *display:inline;/*hank IE*/  *zoom:1;/*hank IE*/}  

使用display:inline-block屬性，可以使行內(nèi)元素或塊元素能夠不加float屬性就可以定義自身的寬、高，同時(shí)又能使該元素在父元素居中顯示。

在內(nèi)聯(lián)元素上定義display:inline-block屬性，發(fā)現(xiàn)IE6、IE7中的顯示效果同其它瀏覽器一致，但事實(shí)是ie7及更低版本的ie瀏覽器不支持display:inline-block這個(gè)屬性。 

在IE下，display: inline-block只是觸發(fā)了元素的layout。比如將display: inline-block設(shè)置到div上，只能保證這個(gè)div擁有塊元素的特征（可以設(shè)置寬度，高度等），但還是會(huì)產(chǎn)生換行。接下來(lái)要設(shè)置 display: inline，使其不產(chǎn)生換行。將display:inline-block;*display:inline;寫在同一個(gè)樣式上，inline- block屬性是不會(huì)觸發(fā)元素的layout的，因此我們還要額外加上 *zoom:1來(lái)觸發(fā)layout。

除了以上所提到的有效方法之外，還有另外一種方法：

先使用 display:inline-block 屬性觸發(fā)塊元素，然后再定義 display:inline，讓塊元素呈遞為內(nèi)聯(lián)對(duì)象（兩個(gè)display 要先后放在兩個(gè) CSS 樣式聲明中才有效果，這是 IE 的一個(gè)經(jīng)典 bug ，如果先定義了 display:inline-block，然后再將 display 設(shè)回 inline 或 block，layout 不會(huì)消失）。

div {display:inline-block;...}div {*display:inline;}

但是要注意的是，display:inline-block元素間會(huì)產(chǎn)生多余空白（本題沒(méi)有涉及）。解決方法：父元素定義font-size:0 去掉行內(nèi)塊元素水平方向空白；子元素定義vertical-align 屬性去掉行內(nèi)塊元素垂直方向空白。

 http://codepen.io/floralam/pen/XJwWZJ?editors=110

2，  欄柵化布局

實(shí)現(xiàn)一下布局： 

http://codepen.io/floralam/pen/OPYyEE

.parent{ 
    display: flex; 
    flex-direction: column;//上面兩行等同于flex-flow：colomn 
    flex-wrap: wrap;// 顯示 wrap一行顯示不完的時(shí)候換行 
    height: 440px; 
    width: 660px; 
} 

一個(gè)Flexbox布局是由一個(gè)伸縮容器(flex containers)和在這個(gè)容器里的伸縮項(xiàng)目(flex items)組成。

伸縮方向與換行(flex-flow)

伸縮容器有一個(gè)CSS屬性“flex-flow”用來(lái)決定伸縮項(xiàng)目的布局方式。

如果伸縮容器設(shè)置了“flex-flow”值為“row”，伸縮項(xiàng)目排列由左向右排列。

如果“flex-flow”值設(shè)置為“column”，伸縮項(xiàng)目排列由上至下排列。

制作一個(gè)20%、60%、20%網(wǎng)格布局

.main-content { 
      width: 60%; 
} 
 
.main-nav,.main-sidebar { 
     -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */ 
      -moz-box-flex: 1;         /* OLD - Firefox 19- */ 
      width: 20%;               /* For old syntax, otherwise collapses. */ 
      -webkit-flex: 1;          /* Chrome */ 
      -ms-flex: 1;              /* IE 10 */ 
      flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
} 

3，  未知高度多行文本垂直居中

http://codepen.io/floralam/pen/WbBrwV?editors=110

.container{ 
   position: fixed; 
    left: 0; 
    top:0; 
    height: 100%; 
    width: 100%; 
    text-align: center; 
} 
 
.mask:after{ 
    content: " "; display: inline-block; vertical-align: middle; height: 100% } .dialog{ display: inline-block; border: 3px solid lightblue; 
} 

box 容器通過(guò) after或者before 生成一個(gè)高度 100% 的「?jìng)涮ァ?，他的高度和容器的高度是一致的，相?duì)于「?jìng)涮ァ勾怪本又?，在視覺(jué)上表現(xiàn)出來(lái)也就是相對(duì)于容器垂直居中了

4，  多欄自適應(yīng)布局

對(duì)于移動(dòng)設(shè)備瀏覽器：http://codepen.io/floralam/pen/NPVwgz?editors=110

.container{ 
  display:-webkit-box; 
} 
 
.left{ 
  -webkit-box-flex:1; 
} 
 
.right{ 
  -webkit-box-flex:1; 
} 

 實(shí)現(xiàn)左右兩側(cè)元素，右側(cè)元素的文字不會(huì)溢出到左側(cè)位置。

1）讓左邊的圖片左浮動(dòng)或者絕對(duì)定位，

http://codepen.io/floralam/pen/wBbPPj

.right{ 
 
    margin-left: 150px; 
 
} 

2）讓左邊的圖片左浮動(dòng)或者絕對(duì)定位，

http://codepen.io/floralam/pen/gbJogQ

.right{

  overflow:hidden;/*讓右側(cè)文字和左側(cè)圖片自動(dòng)分欄*/

}

3）左側(cè)圖片設(shè)置為左浮動(dòng)，

http://codepen.io/floralam/pen/bNyaaX?editors=110

.right{

  display: table-cell;/*讓右側(cè)文字和左側(cè)圖片自動(dòng)分欄*/

}

兩欄或多欄自適應(yīng)布局的通用類語(yǔ)句是（block水平標(biāo)簽，需配合浮動(dòng)）：

http://codepen.io/floralam/pen/vEwpjV

.cell{ 
 
  padding-right:10px; 
 
  display: table-cell; 
 
  *display: inline-block; 
 
  *width: auto; 
 
} 

5，  強(qiáng)制不換行

自動(dòng)換行

word-wrap是控制換行的。break-word是控制是否斷詞的。

強(qiáng)制英文單詞斷行

div{

　　word-break:break-all;

}

6，  li超過(guò)一定長(zhǎng)度，以省略號(hào)顯示

http://codepen.io/floralam/pen/zxQjrK

.nowrap li{ 
   white-space:nowrap; 
   width:100px; 
   overflow:hidden; 
   text-overflow: ellipsis; 
} 

 7，  左側(cè)導(dǎo)航

http://codepen.io/floralam/pen/ogrbXW?editors=110

.nav{ 
　　position:relative; 
　　float:left;width:190px; 
　　margin-right:-190px; 
　　background:lightblue; 
} 
.container{ 
　　float:right; 
　　width:100%; 
　　background:pink; 
} 
.content{ 
　　margin-left:200px; 
} 

8，  css3文字分欄

http://codepen.io/floralam/pen/ZYdOmN?editors=110

9，  修復(fù)側(cè)邊欄

在外容器的添加導(dǎo)航和主內(nèi)容，當(dāng)導(dǎo)航和主內(nèi)容的寬度加上內(nèi)外邊距的數(shù)值大于外容器的寬度減去內(nèi)邊距的值，會(huì)導(dǎo)致導(dǎo)航和主內(nèi)容（其中一個(gè)，html代碼排后面的元素）被擠下。

http://codepen.io/floralam/pen/XJLRYq?editors=110

 解決方案：

1)      Section元素上使用box-sizing:border-box;模擬IE6中，使得內(nèi)元素的寬度為width的值，而非width加上padding和margin的值。

2)      width:-moz-calc(75% -1rem * 2);width:-webkit-calc(75% - 1rem * 2); width: calc(75% - 1rem * 2); width屬性中減去padding值

3)      http://codepen.io/floralam/pen/yydPOE

在元素內(nèi)部增加一個(gè)額外的容器，并將padding放在這個(gè)新增的內(nèi)部容器中，這是一種修復(fù)方法，而且得到眾多瀏覽器支持。

10， css描繪三角形

http://codepen.io/floralam/pen/azgGmZ

 很多關(guān)于使用css3來(lái)描繪特定圖像，使用代碼而非圖片實(shí)現(xiàn)（多座小山包，返回頂部）的題目，都離不開(kāi)描繪三角形。

11， 清除浮動(dòng)的技巧

在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素，在這種情況下，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象。這個(gè)現(xiàn)象叫浮動(dòng)溢出，為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫CSS清除浮動(dòng)。

1)      添加***一個(gè)元素<div style ="clear:both"></div>

2)      父元素設(shè)置overflow: hidden;

3)      使用CSS的:after偽元素

通過(guò)CSS偽元素在容器的內(nèi)部元素***添加了一個(gè)看不見(jiàn)的空格"020"或點(diǎn)"."，并且賦予clear屬性來(lái)清除浮動(dòng)。需要注意的是為了IE6和IE7瀏覽器，要給clearfix這個(gè)class添加一條zoom:1;觸發(fā)haslayout。

http://codepen.io/floralam/pen/xboPXK?editors=110