HTML5-CSS面試題

【1】介紹一下CSS的盒子模型？

（1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

【2】CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.後代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.僞類選擇器（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        單選框或複選框被選中。

【3】如何居中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%;    }

【4】列出display的值，說明他們的做用。position的值， relative和absolute定位原點是？

1.
      block 象塊類型元素同樣顯示。
      none 缺省值。象行內元素類型同樣顯示。      
      inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。      
      list-item 象塊類型元素同樣顯示，並添加樣式列表標記。     
2.
      *absolute
            生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。

      *fixed （老IE不支持）
            生成絕對定位的元素，相對於瀏覽器窗口進行定位。

      *relative
            生成相對定位的元素，相對於其正常位置進行定位。

【5】CSS3有哪些新特性？

 CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），
     對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
     transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
     增長了更多的CSS選擇器  多背景 rgba

【6】爲何要初始化CSS樣式。

• 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

1. 固然，初始化樣式會對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; }

2. { 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; }

【7】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{    }

    若是權重相同，則最後定義的樣式會起做用，可是應該避免這種狀況出現

【8】若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

全選複製放進筆記    多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

【9】display:inline-block 何時會顯示間隙？(攜程)

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing