相關知識點

佈局、 浮動、 盒子模型、 彈性和模型、 選擇器優先順序、 居中定位、 相容性、 hack寫法......

題目&答案

• 如何理解CSS的盒子模型？

每個HTML元素都是長方形盒子。
（1）盒子模型有兩種：IE盒子模型、標準W3C盒子模型；IE的content部分包含了border和pading。
（2）標準W3C盒模型包含：內容(content)、填充(padding)、邊界(margin)、邊框(border)。

• link和@import的區別？

（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 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？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 ;
優先順序就近原則，樣式定義最近者為準，載入樣式以最後載入的定位為準。
優先順序為：
       !important >  id > class > tag  
       important 比 內聯優先順序高
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 控制表單控制元件的禁用狀態。
: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%;
    } 
 

• 經常遇到的瀏覽器的相容性有哪些？原因、解決方法是什麼？

（1）png24為的圖片在IE6瀏覽器上出現背景，解決方案是做成PNG8。
（2）瀏覽器預設的margin和padding不同，解決方案是加一個全域性的*{margin:0;padding:0;}來統一。
（3）IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在IE 6顯示margin比設定的大。
（4）浮動ie產生的雙邊距問題：塊級元素就加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下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性；
（2）Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法：統一通過getAttribute()獲取自定義屬性。
（3）IE下，even物件有x,y屬性，但是沒有pageX,pageY屬性；
（4）Firefox下，event物件有pageX,pageY屬性，但是沒有x,y屬性。解決方法是條件註釋，缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
（5）Chrome 中文介面下預設會將小於12px的文字強制按照12px顯示，可通過加入 CSS屬性-webkit-text-size-adjust: none;來解決。
（6）超連結訪問過後hover樣式就不出現了 被點選訪問過的超連結樣式不再具有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初始化往往會出現瀏覽器之間的頁面顯示差異。當然，初始化樣式會對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是怎樣定義權重規則的？

以下是權重的規則：標籤的權重為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{
} 
如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現。

• 如何理解表現與內容相分離？

表現與結構相分離簡單的說就是HTML中只有標籤元素 表現完全是由CSS檔案控制的。

• 如何定義高度為1px的容器？

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 建立一個三角形的原理是什麼？

把上、左、右三條邊隱藏掉（顏色設為 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} 

• 前端頁面有哪三層構成，分別是什麼？作用是什麼？

最準確的網頁設計思路是把網頁分成三個層次，即：結構層、表示層、行為層。
網頁的結構層（structural layer）由HTML或XHTML之類的標記語言負責建立。標籤，也就是那些出現在尖括號裡的單詞，對網頁內容的語義含義做出了描述，但這些標籤不包含任何關於如何顯示有關內容的資訊。例如，P 標籤表達了這樣一種語義：“這是一個文字段。”
網頁的表示層（presentation layer）由CSS負責建立。 CSS對“如何顯示有關內容”的問題做出了回答。
網頁的行為層（behavior layer）負責回答“內容應該如何對事件做出反應”這一問題。這是JavaScript語言和DOM主宰的領域。

• ::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。

單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。
偽元素由雙冒號和偽元素名稱組成。雙冒號是在css3規範中引入的，用於區分偽類和偽元素。但是偽類相容現存樣式，瀏覽器需要同時支援舊的偽類，比如:first-line、:first-letter、:before、:after等。
對於CSS2之前已有的偽元素，比如:before，單冒號和雙冒號的寫法::before作用是一樣的。
提醒，如果你的網站只需要相容webkit、firefox、opera等瀏覽器，建議對於偽元素採用雙冒號的寫法，如果不得不相容IE瀏覽器，還是用CSS2的單冒號寫法比較安全。

• 現在HTML5中css3可以寫出一個旋轉的立方體，請寫出要用到的CSS屬性。

-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(30deg) rotateX(10deg);
-webkit-animation:  rot 4s linear infinite;

• 介紹一下 Sass 和 Less 是什麼？它們有何區別？

Sass (Syntactically Awesome Stylesheets)是一種動態樣式語言，語法跟css一樣(但多了些功能)，比css好寫，而且更容易閱讀。Sass語法類似與Haml，屬於縮排語法（makeup），用意就是為了快速寫Html和Css。
Less一種動態樣式語言. 將CSS賦予了動態語言的特性，如變數，繼承，運算， 函式. LESS 既可以在客戶端上執行 (支援IE 6+, Webkit, Firefox)，也可一在服務端執行 (藉助 Node.js)。
區別：
(1))Sass是基於Ruby的，是在服務端處理的，而Less是需要引入less.js來處理Less程式碼輸出Css到瀏覽器，也可以在開發環節使用Less，然後編譯成Css檔案，直接放到專案中，也有Less.app、SimpleLess、CodeKit.app這樣的工具，也有線上編譯地址。
(2)變數符不一樣，less是@，而Scss是$，而且變數的作用域也不一樣，後面會講到。
(3)輸出設定，Less沒有輸出設定，Sass提供4中輸出選項：nested, compact, compressed 和 expanded。
(4)Sass支援條件語句，可以使用if{}else{},for{}迴圈等等。而Less不支援。

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

• 文字本身的大小不相容。

同樣是font-size:14px的宋體文字，在不同瀏覽器下佔的空間是不一樣的，ie下實際佔高16px，下留白3px，ff 下實際佔高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案：給文字設定 line-height 。確保所有文字都有預設的 line-height 值。

• IE6吞吃現象。

上下兩個div，上面的div設定背景，卻發現下面沒有設定背景的div 也有了背景，這就是吞吃現象。對應上面的背景吞吃現象，還有滾動下邊框缺失的現象。解決方案：使用zoom:1。這個zoom好象是專門為解決ie6 bug而生的。

• IE6註釋bug

註釋也能產生bug~~~“多出來的一隻豬。”這是前人總結這個bug使用的文案，ie6的這個bug 下，大家會在頁面看到豬字出現兩遍，重複的內容量因註釋的多少而變。
解決方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法寫註釋。

• img 下的留白，如下程式碼：

<div>
<img src=“1.jpg” />
</div>
把div的border開啟，你發現圖片底部不是緊貼著容器底部的，是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層應該單獨使用。也許你為了節省程式碼把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不支援。

轉自：https://www.jianshu.com/p/f60b619aa52b