09、HTML&CSS-自適應(yīng)

每天一句: 先給予,然后你才會有收獲。

一、過濾器

  • 下劃線屬性過濾器(過濾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屬性會使這個對象徹底消失;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,095評論 1 92
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 2,103評論 0 2
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,423評論 0 11
  • 1.行內(nèi)元素和塊級元素?img算什么?行內(nèi)元素怎么轉(zhuǎn)化為塊級元素? 行內(nèi)元素:和有他元素都在一行上,高度、行高及外...
    極樂君閱讀 2,595評論 0 20
  • 前幾天和朋友去書店,發(fā)現(xiàn)了這本書。 我是兩年前在課堂上得知Ugly Belgian Houses的,當(dāng)時教授在PP...
    efb360938f79閱讀 527評論 0 1

友情鏈接更多精彩內(nèi)容