前端開發(fā)面試題總結之——CSS3

2019-11-08 02:28:31

字體：大中小

來源：轉載

供稿：網(wǎng)友

http://www.jianshu.com/p/f60b619aa52b

題目&答案

如何理解CSS的盒子模型？每個HTML元素都是長方形盒子。（1）盒子模型有兩種：IE盒子模型、標準W3C盒子模型；IE的content部分包含了border和pading。（2）標準W3C盒模型包含：內容(content)、填充(padding)、邊界(margin)、邊框(border)。link和@import的區(qū)別？（1）link屬于XHTML標簽，而@import是CSS提供的。（2）頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載。（3）import只在IE 5以上才能識別，而link是XHTML標簽，無兼容問題。（4）link方式的樣式權重高于@import的權重。（5）使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？CSS 3新增偽類有哪些？id選擇器（# myid）類選擇器（.myclassname）標簽選擇器（div、h1、p）相鄰選擇器（h1 + p）子選擇器（ul < li）后代選擇器（li a）通配符選擇器（ * ）屬性選擇器（a[rel = "external"]）偽類選擇器（a: hover, li: nth - child）可繼承： font-size font-family color, UL LI DL DD DT;不可繼承：border padding margin width height ;優(yōu)先級就近原則，樣式定義最近者為準，載入樣式以最后載入的定位為準。優(yōu)先級為： !important > id > class > tag important 比內聯(lián)優(yōu)先級高CSS3新增偽類舉例：p:first-of-type 選擇屬于其父元素的首個<p>元素的每個<p>元素。p:last-of-type 選擇屬于其父元素的最后<p>元素的每個<p>元素。p:only-of-type 選擇屬于其父元素唯一的<p>元素的每個<p>元素。p:only-child 選擇屬于其父元素的唯一子元素的每個<p>元素。p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個<p>元素。:enabled、:disabled 控制表單控件的禁用狀態(tài)。:checked 單選框或復選框被選中。如何居中div，如何居中一個浮動元素？給div設置一個寬度，然后添加margin:0 auto屬性 div{ width:200px; margin:0 auto; }如何居中一個浮動元素確定容器的寬高，如寬500、高 300的層，設置層的外邊距 .div { Width:500px ; height:300px;//高度可以不設 Margin: -150px 0 0 -250px; position:relative;相對定位 background-color:pink;//方便看效果 left:50%; top:50%; }經(jīng)常遇到的瀏覽器的兼容性有哪些？原因、解決方法是什么？（1）png24為的圖片在IE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8。（2）瀏覽器默認的margin和padding不同，解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。（3）IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在IE 6顯示margin比設置的大。（4）浮動ie產(chǎn)生的雙邊距問題：塊級元素就加display：inline；行內元素轉塊級元素display：inline后面再加display：table。 .bb{ background-color:#f1ee18; /*所有識別*/ .background-color:#00deff/9; /*IE6、7、8識別*/ +background-color:#a200ff; /*IE6、7識別*/ _background-color:#1e0bd1; /*IE6識別*/ }常用Hack的技巧：（1）IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性；（2）Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性。（3）IE下，even對象有x,y屬性，但是沒有pageX,pageY屬性；（4）Firefox下，event對象有pageX,pageY屬性，但是沒有x,y屬性。解決方法是條件注釋，缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。（5）Chrome 中文界面下默認會將小于12px的文本強制按照12px顯示，可通過加入 CSS屬性-webkit-text-size-adjust: none;來解決。（6）超鏈接訪問過后hover樣式就不出現(xiàn)了被點擊訪問過的超鏈接樣式不再具有hover和active了，解決方法是改變CSS屬性的排列順序：L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}列出display的值，說明它們的作用。position的值里，relative和absolute定位原點是？display的值：block 像塊類型元素一樣顯示。none 缺省值。像行內元素類型一樣顯示。inline-block 像行內元素一樣顯示，但其內容像塊類型元素一樣顯示。list-item 像塊類型元素一樣顯示，并添加樣式列表標記。relative和absolute定位原點：absolute：生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。relative：生成相對定位的元素，相對于其正常位置進行定位。為什么要初始化CSS樣式？因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。最簡單的初始化方法就是：* {padding: 0; margin: 0;} （筆者不建議這樣）淘寶的樣式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, PRe, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; }ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }CSS是怎樣定義權重規(guī)則的？以下是權重的規(guī)則：標簽的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：/*權重為1*/div{}/*權重為10*/.class1{}/*權重為100*/#id1{}/*權重為100+1=101*/#id1 div{}/*權重為10+1=11*/.class1 div{}/*權重為10+10+1=21*/.class1 .class2 div{} 如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現(xiàn)。如何理解表現(xiàn)與內容相分離？div{heigh：1px; width:10px; background:#000; overflow:hidden} IE 6下這個問題是默認行高造成的，overflow:hidden | zoom:0.08 | line- height:1px這樣也可以解決。如何解決IE 6的3px問題？_zoom:1; margin-left: value; _margin-left: value-3px;Firefox下文本無法撐開容器的高度，如何解決？清除浮動 .clear{ clear:both; height:0px; overflow:hidden;}怎么樣才能讓層顯示在Flash之上呢?解決的辦法是給Flash設置透明屬性<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />cursor:hand在FF下不顯示小手，如何解決？cursor; pointer;在IE中內容會自適應高度，而FF不會自適應高度，怎么辦？在要自適應高度的層中加一個層，樣式為.clear{clear:both;font-size:0px;height:1px}，這樣解決有一個小小的問題，高度會多一個像素。還有一種解決方法，給當前層加上一個偽類。#test:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}用純 CSS 創(chuàng)建一個三角形的原理是什么？把上、左、右三條邊隱藏掉（顏色設為 transparent）#demo {width:0;height: 0;border-width: 20px;border-style: solid;border-color: transparent transparent red transparent;}如何設計一個滿屏“品”字布局？簡單的方式：上面的div寬100%，下面的兩個div分別寬50%，用float或inline使其不換行。怎么讓Chrome支持小于12px 的文字？body{-webkit-text-size-adjust:none}前端頁面有哪三層構成，分別是什么？作用是什么？最準確的網(wǎng)頁設計思路是把網(wǎng)頁分成三個層次，即：結構層、表示層、行為層。網(wǎng)頁的結構層（structural layer）由HTML或XHTML之類的標記語言負責創(chuàng)建。標簽，也就是那些出現(xiàn)在尖括號里的單詞，對網(wǎng)頁內容的語義含義做出了描述，但這些標簽不包含任何關于如何顯示有關內容的信息。例如，P 標簽表達了這樣一種語義：“這是一個文本段。”網(wǎng)頁的表示層（presentation layer）由CSS負責創(chuàng)建。 CSS對“如何顯示有關內容”的問題做出了回答。網(wǎng)頁的行為層（behavior layer）負責回答“內容應該如何對事件做出反應”這一問題。這是Javascript語言和DOM主宰的領域。::before 和 :after中雙冒號和單冒號有什么區(qū)別？解釋一下這2個偽元素的作用。單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。偽元素由雙冒號和偽元素名稱組成。雙冒號是在css3規(guī)范中引入的，用于區(qū)分偽類和偽元素。但是偽類兼容現(xiàn)存樣式，瀏覽器需要同時支持舊的偽類，比如:first-line、:first-letter、:before、:after等。對于CSS2之前已有的偽元素，比如:before，單冒號和雙冒號的寫法::before作用是一樣的。提醒，如果你的網(wǎng)站只需要兼容webkit、firefox、Opera等瀏覽器，建議對于偽元素采用雙冒號的寫法，如果不得不兼容IE瀏覽器，還是用CSS2的單冒號寫法比較安全。現(xiàn)在HTML5中css3可以寫出一個旋轉的立方體，請寫出要用到的CSS屬性。-webkit-transform-style: preserve-3d;-webkit-transform: rotateY(30deg) rotateX(10deg);-webkit-animation: rot 4s linear infinite;介紹一下 Sass 和 Less 是什么？它們有何區(qū)別？Sass (Syntactically Awesome Stylesheets)是一種動態(tài)樣式語言，語法跟css一樣(但多了些功能)，比css好寫，而且更容易閱讀。Sass語法類似與Haml，屬于縮排語法（makeup），用意就是為了快速寫Html和Css。Less一種動態(tài)樣式語言. 將CSS賦予了動態(tài)語言的特性，如變量，繼承，運算，函數(shù). LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (借助 Node.js)。區(qū)別：(1))Sass是基于Ruby的，是在服務端處理的，而Less是需要引入less.js來處理Less代碼輸出Css到瀏覽器，也可以在開發(fā)環(huán)節(jié)使用Less，然后編譯成Css文件，直接放到項目中，也有Less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編譯地址。(2)變量符不一樣，less是@，而Scss是$，而且變量的作用域也不一樣，后面會講到。(3)輸出設置，Less沒有輸出設置，Sass提供4中輸出選項：nested, compact, compressed 和 expanded。(4)Sass支持條件語句，可以使用if{}else{},for{}循環(huán)等等。而Less不支持。

常見ie6的瀏覽器兼容bug（3-5個）？

文字本身的大小不兼容。同樣是font-size:14px的宋體文字，在不同瀏覽器下占的空間是不一樣的，ie下實際占高16px，下留白3px，ff 下實際占高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案：給文字設定 line-height 。確保所有文字都有默認的 line-height 值。IE6吞吃現(xiàn)象。注釋也能產(chǎn)生bug~~~“多出來的一只豬。”這是前人總結這個bug使用的文案，ie6的這個bug 下，大家會在頁面看到豬字出現(xiàn)兩遍，重復的內容量因注釋的多少而變。解決方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法寫注釋。img 下的留白，如下代碼：<div><img src=“1.jpg” /></div>把div的border打開，你發(fā)現(xiàn)圖片底部不是緊貼著容器底部的，是img后面的空白字符造成，要消除必須這樣寫<div><img src=”1.jpg” /></div>后面兩個標簽要緊挨著。ie7下這個bug 依然存在。解決方案：給img設定 display:block。失去line-height<div style=”line-height:20px”><img />文字</div>，很遺憾，在ie6下單行文字 line-height 效果消失了。原因是<img />這個inline-block元素和inline元素寫在一起了。解決方案：讓img 和文字都 float起來。clear層應該單獨使用。也許你為了節(jié)省代碼把clear屬性直接放到下面的一個內容層，這樣有問題，不僅僅是ff和op下失去margin效果，ie下某些margin值也會失效。<div style=”background:red;float:left;”>dd</div><div style=”clear:both;margin-top:18px;background:green”>ff</div>ie 下overflow:hidden對其下的絕對層position:absolute或者相對層 position:relative無效。解決方案：給overflow:hidden加position:relative或者position: absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。

上一篇：解決Eclipse中文亂碼

下一篇：substring的用法