|
整理網(wǎng)上流傳的若干份面試題目，突發(fā)奇想,，總結(jié)關(guān)于CSS面試題目的考察點(diǎn),，發(fā)現(xiàn)問題大多圍繞幾個(gè)屬性和幾種題目，水平有限,，僅供參考,。 糾正前端開發(fā)中容易出錯(cuò)知識(shí)點(diǎn) http://www.cnblogs.com/0603ljx/p/4354656.html 1， 多元素水平居中 實(shí)現(xiàn)一下效果：
平常人看見題目,，最初感覺實(shí)現(xiàn)圖片中的效果不難,，設(shè)置小黑框的寬高邊距，字體水平垂直居中即可,。其實(shí),，題目應(yīng)該實(shí)際上是考察多元素水平居中，即無論元素（小黑框）基數(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，來實(shí)現(xiàn)子元素作為一個(gè)整體在父元素中水平居中,。  main{ text-align:center;}div{ display:inline-block; *display:inline;/*hack IE*/ *zoom:1;/*hack 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)生換行。接下來要設(shè)置display: inline,，使其不產(chǎn)生換行,。將display:inline-block;*display:inline;寫在同一個(gè)樣式上，inline-block屬性是不會(huì)觸發(fā)元素的layout的,，因此我們還要額外加上 *zoom:1來觸發(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)生多余空白（本題沒有涉及）。解決方法：父元素定義font-size:0 去掉行內(nèi)塊元素水平方向空白,；子元素定義vertical-align 屬性去掉行內(nèi)塊元素垂直方向空白,。 http:///floralam/pen/XJwWZJ?editors=110 實(shí)現(xiàn)多元素水平垂直居中 使用flexbox 具體解析,，可查看《Flexbox制作CSS布局易如反掌》 2， 欄柵化布局 實(shí)現(xiàn)一下布局：
.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”用來決定伸縮項(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， 未知高度多行文本垂直居中 方法一,，使用display：inline-block+偽元素：http:///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 容器通過 after或者before 生成一個(gè)高度 100% 的「?jìng)涮ァ?，他的高度和容器的高度是一致的，相?duì)于「?jìng)涮ァ勾怪本又?，在視覺上表現(xiàn)出來也就是相對(duì)于容器垂直居中了 方法二（感謝超級(jí)課程表胡晉哥哥的提示），使用display：table-cell： 通過display轉(zhuǎn)化成為表格的形式,，再采用垂直居中的方法得到需要的結(jié)果,。 display:table 此元素會(huì)作為塊級(jí)表格來顯示（類似 <table>），表格前后帶有換行符,。 display:table-cell 此元素會(huì)作為一個(gè)表格單元格顯示（類似 <td> 和 <th>） 方法三（感謝超級(jí)課程表胡晉哥哥的提示）,，flexbox布局： flexbox屬性： 伸縮容器：一個(gè)設(shè)有“display:flex”或“display:inline-flex”的元素 另外，對(duì)于單行文本,，設(shè)置line-height=height代碼更加簡(jiǎn)潔: 父元素設(shè)置寬度高度,，然后設(shè)置屬性 text-align:center; /* 水平居中 */ 4， 多欄自適應(yīng)布局 對(duì)于移動(dòng)設(shè)備瀏覽器：http:///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ì)定位， .right{ margin-left: 150px; } 2）讓左邊的圖片左浮動(dòng)或者絕對(duì)定位,， .right{ overflow:hidden;/*讓右側(cè)文字和左側(cè)圖片自動(dòng)分欄*/ } 3）左側(cè)圖片設(shè)置為左浮動(dòng),， http:///floralam/pen/bNyaaX?editors=110 .right{ display: table-cell;/*讓右側(cè)文字和左側(cè)圖片自動(dòng)分欄*/ } 兩欄或多欄自適應(yīng)布局的通用類語句是（block水平標(biāo)簽，需配合浮動(dòng)）： .cell{ padding-right:10px; display: table-cell; *display: inline-block; *width: auto; } 5,， 強(qiáng)制不換行 div{ white-space:nowrap;}自動(dòng)換行 div{ word-wrap: break-word; //性允許長(zhǎng)單詞或 URL 地址換行到下一行 word-break: normal; //讓瀏覽器實(shí)現(xiàn)在任意位置的換行} word-wrap是控制換行的,。break-word是控制是否斷詞的。 強(qiáng)制英文單詞斷行 div{ word-break:break-all; } 6,， li超過一定長(zhǎng)度,，以省略號(hào)顯示 .nowrap li{ white-space:nowrap; width:100px; overflow:hidden; text-overflow: ellipsis;}7， 左側(cè)導(dǎo)航 http:///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:///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:///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:///floralam/pen/yydPOE 在元素內(nèi)部增加一個(gè)額外的容器,，并將padding放在這個(gè)新增的內(nèi)部容器中,，這是一種修復(fù)方法，而且得到眾多瀏覽器支持,。 10,， css描繪三角形 很多關(guān)于使用css3來描繪特定圖像，使用代碼而非圖片實(shí)現(xiàn)（多座小山包,，返回頂部）的題目,，都離不開描繪三角形。 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偽元素 通過CSS偽元素在容器的內(nèi)部元素最后添加了一個(gè)看不見的空格'020'或點(diǎn)'.',，并且賦予clear屬性來清除浮動(dòng),。需要注意的是為了IE6和IE7瀏覽器，要給clearfix這個(gè)class添加一條zoom:1;觸發(fā)haslayout,。 |
|
|
