1. css隱藏元素的方法：
- opacity:元素的不透明級別，取值.0~1.0藻糖。在取值為.0即完全透明淹冰，從視覺上隱藏了，但是依然占據(jù)自己的位置并對網(wǎng)頁布局起作用巨柒，也會響應(yīng)用戶交互樱拴。
- Visibility:使元素不可見柠衍，取值有
- collapse[k??l?ps]:當(dāng)在表格元素中使用時，此值可刪除一行或一列晶乔，但是它不會影響表格的布局珍坊。被行或列占據(jù)的空間會留給其他內(nèi)容使用.
- hidden:元素是不可見的,和opacity唯一的區(qū)別是不會響應(yīng)用戶交互的！
- display:設(shè)置為“none”正罢，可以說是徹底的消失阵漏，用戶交互操作不生效，客戶端也不能讀取到翻具！
- position: 通過設(shè)置 absolute來實現(xiàn)履怯，代碼如下：
.hide{
position: absolute;
left: -9999px;
top: -9999px;
}
總結(jié)：如果有一個元素想要交互和不影響布局兼得，因為opacity可以響應(yīng)交互裆泳，但會占據(jù)位置叹洲，影響布局；visibility既不響應(yīng)交互工禾，也影響布局运提；display雖不占據(jù)位置了，影響布局闻葵，但是不能響應(yīng)交互民泵。所以可以選擇上面的position實現(xiàn)，代碼可作為參考笙隙！
2. CSS清除浮動的幾種方法和優(yōu)缺點洪灯？
為何？
首先我們要知道為什么要清除浮動竟痰，也就是說什么情況下要清除浮動所帶來的布局影響：
1) 父元素沒有定義高度签钩，那么子元素浮動了，父元素就會發(fā)生高度坍塌坏快。
2) 塊狀元素铅檩，會鉆進浮動元素的下面，被浮動元素所覆蓋
3) 行內(nèi)元素莽鸿，例如文字昧旨， 則會環(huán)繞在浮動元素的周圍，為浮動元素留出空間
方法
- 使用帶有clear屬性的空元素：在浮動元素下方添加空元素
{clear: both; height: 0; overflow: hidden;}
- 給浮動元素的父元素設(shè)置高度
缺點：在浮動元素高度不確定的時候不適用
- 以浮制赶榈谩（父級同時浮動）
缺點：需要給每個浮動元素父級添加浮動兔沃，浮動多了容易出現(xiàn)問題
- 父級設(shè)置成inline-block
缺點：父級的margin左右auto失效，無法使用margin: 0 auto;居中了
- 給父級添加overflow:hidden 清浮動方法,出發(fā)父級元素BFC
問題：需要配合 寬度 或者 zoom 兼容IE6 IE7级及；
{zoom: 1;}
- 萬能清除法 after偽類 清浮動（現(xiàn)在主流方法乒疏，推薦使用）
.選擇符：after{
content： ”“；
height：0饮焦；
clear: both ;
display: block;
overflow: hidden;
visibility:hidden;
}
同時為了兼容 IE6怕吴，7 同樣需要配合zoom使用例如：
.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clear{zoom:1;}
需要注意的
after偽類： 元素內(nèi)部末尾添加內(nèi)容窍侧；
:after{content"添加的內(nèi)容";} IE6，7下不兼容
zoom 縮放
a转绷、觸發(fā) IE下 haslayout伟件，使元素根據(jù)自身內(nèi)容計算寬高。
b议经、FF 不支持斧账；
總結(jié)：上面幾種方法中，對父元素進行設(shè)置都是解決父元素高度坍塌的問題煞肾，比如 父元素設(shè)置float; overflow：hidden; display: inline-clock都是為了觸發(fā)父元素的BFC其骄，因為BFC有條規(guī)則是: 當(dāng)計算一個為BFC元素的高度時，如果該元素包含有 浮動的子元素也 參與計算的扯旷。所以就有了這樣的方法了！
3. display你所不知道的知識
- 取值
inline-block: 默認寬度為內(nèi)容寬度索抓，可以設(shè)置寬高钧忽，同行顯示（這點是最重要的，也是block為何設(shè)置為inline-block所需要的特性１瓶稀）
table: 參與塊格式化上下文耸黑，大體同 block。
table-cell:讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)篮幢，類似于td標(biāo)簽大刊。
作用：
- 讓大小不固定元素垂直居中,注意:是設(shè)置包裹父元素的屬性，如下：
{display: table-cell; text-align: center; vertical-margin: middle;}- 創(chuàng)建等高布局三椿，子元素設(shè)置display: table-cell;包裹元素diaplay: table-row,如下
HTML代碼：<div class="list_row"> <div class="list_cell"></div> <div class="list_cell"></div> <div class="list_cell"></div> </div>
CSS代碼：
.list_row{display:table-row;} .list_cell{display:table-cell; width:30%; padding:1.6%; background-color:#f5f5f5;} /*中間一個元素背景淡藍缺菌，有別于兩邊的淡灰色*/ .list_center{background-color:#f0f3f9;}
