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