每天一句: 先給予,然后你才會有收獲。
一、過濾器
- 下劃線屬性過濾器(過濾IE6和其他標(biāo)準(zhǔn)瀏覽器的)
當(dāng)一個屬性前面添加一個下劃線后,由于符合標(biāo)準(zhǔn)的瀏覽器不能識別帶下劃線的屬性而忽略了這個聲明,但是在IE6以及更低版本瀏覽器中是可以繼續(xù)使用這種聲明;
語法:
選擇符{ _屬性: 屬性值; }
- !important關(guān)鍵字過濾器
它所表示附加的聲明具有最高優(yōu)先級的意思。但由于IE6以及更低版本不能識別它們,可以利用IE6的這個BUG作為過濾器來兼容IE6和其他標(biāo)準(zhǔn)瀏覽器;
語法:
選擇符{ 屬性: 屬性值!important; }
二、寬高自適應(yīng)
網(wǎng)頁布局中經(jīng)常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據(jù)窗口或子元素自動調(diào)整,這就是自適應(yīng);
元素自適應(yīng)在網(wǎng)頁布局中非常重要,它能夠使網(wǎng)頁顯示更靈活,可以適應(yīng)在不同設(shè)備、不同窗口和不同分辨率下顯示;
- 寬度自適應(yīng)
元素寬度設(shè)置為100%(塊元素寬度默認(rèn)為100%)
- 高度自適應(yīng)
元素{height:auto;} // 高度默認(rèn)就是auto
- 元素具備最小高度的自適應(yīng)
方法1:
min-height:value;
_height:value;
方法2:
因?yàn)镮E6不識別min-height,第二個height的時候讀到的是auto,第三個會覆蓋掉第二個的屬性): 建議使用
min-height:value;
height:auto!important;
height:value;
說明:
height屬性在IE6里就類似min-height作用
min-height(最小高度)
max-height(最大高度)
min-width(最小寬度)
max-width(最大寬度)
注:IE6及以下版本不識別該組屬性。
三、偽對象選擇符
- :after:與content屬性一起使用,定義在對象后的內(nèi)容
div:after{content:url(logo.jpg);}
div:after{content:"文本內(nèi)容";}
- :before:與content屬性一起使用,定義在對象前的內(nèi)容
div:before{content:"在其前放內(nèi)容";}
- :first-letter: 指定元素第一個字母的樣式
說明: 該偽元素只能用于塊級元素
四、高度塌陷
問題描述: 在一個大盒子.main中,分別裝著.left和.right,main元素的高度,是可以通過left和right元素來確定高度的,但是由于left和right都寫了浮動,從而導(dǎo)致main高度不存在問題;即是父元素不寫高度,子元素寫了浮動后,父元素會發(fā)生高度塌陷;
- 方法一: 給父元素添加聲明: overflow:hidden;(一般都會加上寬度,如果沒有添加寬度,在IE6寬度就會出現(xiàn)問題);
- 方法二: 在浮動元素下方,添加空的div,并且給該元素添加聲明: clear:both; height:0; overflow:hidden;
- 方法三: (萬能清除浮動,比起上面兩種方法好,不會引發(fā)其他問題,最好也是要加上寬度,不然IE6寬度會出現(xiàn)問題)
.clearfix:after{
content:"";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
五、其他
visibility:hidden/visible; // 隱藏/可見;
visibility:hidden;和display:none;的區(qū)別:
visibility:hidden;屬性會使對象不可見,但該對象在網(wǎng)頁所占的空間沒有改變,等于留出了一塊空白區(qū)域,而 display:none屬性會使這個對象徹底消失;