web前端面試題

1. CSS 盒子模型，絕對定位和相對定位

2. 清除浮動，何時須要清除浮動，清除浮動都有哪些方法

浮動float最開始出現的意義是爲了讓文字環繞圖片而已，後來用於讓三個塊級元素並排展現，這時候就出現了浮動

不過，因爲float會致使浮動元素的父元素高度坍塌，因此，這時候就要去清除浮動

若是咱們給上面的三個綠顏色的方塊設置display:inline-block也能達到讓它們並排顯示的效果。而且父元素的高度也不會塌陷。只不過沒法控制是居左仍是居右，display:inline-block只能從左往右。

清除浮動的方法：

(1) 在浮動元素最後增長一個冗餘元素爲其設置 clear:both

(2) 給父元素增長 clearfix

<div class="box clearfix">

 <div class="div"></div>

</div>

.clearfix:after{
    content: '';
    display: table;
    clear: both;
}

(3) 給父元素增長：

overflow:hidden;zoom:1;

給父元素增長 overflow: hidden; 能夠清除浮動的原理：

增長後，父元素會造成一個塊級格式化上下文，即BFC，overflow: hidden本意是將父元素中溢出的內容裁切掉，而BFC中，在計算父元素真實高度時候，也把float元素的高度算入其中，因此在計算裁切的同時，順帶達成了清除浮動的目的

3. 如何保持浮層水平垂直居中

4. position 和 display 的取值和各自的意思和用法

5. 樣式的層級關係，選擇器優先級，樣式衝突，以及抽離樣式模塊怎麼寫，說出思路，有無實踐經驗

6. css3動畫效果屬性，canvas、svg的區別，CSS3中新增僞類舉例

7. px和em和rem的區別，CSS中link 和@import的區別是?