1. 清除浮動有哪些方法, 各有什麼優缺點
1.2 使用 css 的 overflow 屬性給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動。在添加overflow屬性後，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。
優點：簡單，代碼少，瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸會被隱藏overflow:hidden
1.3 使用CSS的:after偽元素 結合 :after 偽元素（注意這不是偽類，而是偽元素，代表一個元素之後最近的元素） ，可以完美兼容當前主流的各大瀏覽器。給浮動元素的容器添加一個 clearfix 的class，然後給這個class添加一個:after偽元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。並且賦予clear屬性來清除浮動 優點：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用） 缺點：代碼多，要兩句代碼結合使用，才能讓主流瀏覽器都支持1.4 給父級元素設置高度
2.什麼是 BFC機制
BFC(Block Formatting Context)，塊級格式化上下文，是一個獨立的渲染區域，讓處於 BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。
在IE下， Layout，可通過zoom:1 觸發
BFC布局與普通文檔流布局區別:
BFC布局規則:
1.浮動的元素會被父級計算高度(父級元素觸發了BFC)
2.非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC)
3.margin不會傳遞給父級(父級觸發BFC)
4.屬於同一個BFC的兩個相鄰元素上下margin會重疊
普通文檔流布局:
1. 浮動的元素是不會被父級計算高度
2.非浮動元素會覆蓋浮動元素的位置
3.margin會傳遞給父級元素
4.兩個相鄰元素上下的margin會重疊
開發中的應用
3.link 與 @import 的區別從屬關係區別
@import是 CSS 提供的語法規則，只有導入樣式表的作用；link是HTML提供的標籤，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等
加載順序區別
加載頁面時，link標籤引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢後被加載。
兼容性區別
@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標籤作為 HTML 元素，不存在兼容性問題。
DOM可控性區別
可以通過 JS 操作 DOM ，插入link標籤來改變樣式；由於DOM方法是基於文檔的，無法使用@import的方式插入樣式。
4. CSS3中新增的選擇器以及屬性屬性選擇器描述E[att^="val"]屬性att的值以"val"開頭的元素E[att$="val"]屬性att的值以"val"結尾的元素E[att*="val"]屬性att的值包含"val"字符串的元素選擇器描述E:root匹配文檔的根元素，對於HTML文檔，就是HTML元素E:nth-child(n)匹配其父元素的第n個子元素，第一個編號為1E:nth-last-child(n)匹配其父元素的倒數第n個子元素，第一個編號為1E:nth-of-type(n)與:nth-child()作用類似，但是僅匹配使用同種標籤的元素E:nth-last-of-type(n)與:nth-last-child() 作用類似，但是僅匹配使用同種標籤的元素E:last-child匹配父元素的最後一個子元素，等同於:nth-last-child(1)E:first-of-type匹配父元素下使用同種標籤的第一個子元素，等同於:nth-of-type(1)E:last-of-type匹配父元素下使用同種標籤的最後一個子元素，等同於:nth-last-of-type(1)E:only-child匹配父元素下僅有的一個子元素，等同於:first-child:last-child或 :nth-child(1):nth-last-child(1)E:only-of-type匹配父元素下使用同種標籤的唯一一個子元素，等同於:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)E:empty匹配一個不包含任何子元素的元素，注意，文本節點也被看作子元素屬性描述transition設置過渡效果transform變換效果(移動、縮放、轉動、拉長或拉伸)animation動畫效果box-shadow陰影效果text-shadow文本陰影border-colors為邊框設置多種顏色boder-image圖片邊框text-overflow文本截斷word-wrap自動換行border-radius圓角邊框opacity不透明度box-sizing控制盒模型的組成模式outline外邊框background-size不指定背景圖片的尺寸background-origin指定背景圖片從哪裡開始顯示background-clip指定背景圖片從什麼位置開始裁切rgba基於r,g,b三個顏色通道來設置顏色值, 通過a來設置透明度 5. CSS3實現0.5px的細線<style> .line { position: relative; } .line:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: #000000; -webkit-transform: scaleY(.5); transform: scaleY(.5);}</style><div></div> 6.開發中為什麼要初始化css樣式
因為瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
7.CSS優化、提高性能的方法有哪些8. 居中布局
行內元素: text-align:center
塊級元素: margin:0 auto
絕對定位和移動: absolute + transform
絕對定位和負邊距: absolute + margin
flex布局: flex + justify-content:center
水平居中
行內元素: text-align:center
塊級元素: margin:0 auto
絕對定位和移動: absolute + transform
絕對定位和負邊距: absolute + margin
flex布局: flex + justify-content:center
水平垂直居中
1.已知元素寬高：絕對定位+margin:auto:
div{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; margin: auto; }2.已知元素寬高: 絕對定位+負margin
div{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; margin: auto; }3.absolute+transform
div{ width: 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父級的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ }4.flex + justify-content + align-items
.box{ height:600px; display:flex; justify-content:center; //子元素水平居中 align-items:center; //子元素垂直居中} .box>div{ background: green; width: 200px; height: 200px; } 總結：
以上都屬於面試常考題，也是在實際開發中會經常遇到的問題，希望大家平時注重細節，多總結多思考，這樣才能在前端學習路上越走越遠！