div+css之盒子模型

來源:互聯網
上載者:User

ie系列採用的是微軟自己的盒子模式,firefox採用的是標準的w3c盒子模型。


從可以看到 IE 盒子模型的範圍也包括 margin、border、padding、content,和標準 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 padding。

 


從可以看到標準 W3C 盒子模型的範圍包括 margin、border、padding、content,並且 content 部分不包含其他部分。

在實際的操作中可採用如下方法避免如上不同。

    Padding-left:40px;

    width:920px !important;//firefox

    width:960px;

 

2、 當好幾個DIV層通過float:left和margin-left布局時,ie6中有bug,ie6預設會把第一個層的margin-left做雙倍處理。

3、 當即可以用margin,也可以用padding時,盡量使用margin,當用dreamweaver中設計模式參看時,用margin能與實際頁面效果更加接近。

4、 當出現如下狀況時:

<div id="baihuiimage">

<img src="images/banner.jpg">

</div>

盡量改成:<div id="baihuiimage"><img src="images/banner.jpg"></div>,這樣寫效果更加正確。

5、 css sprites技術(背景圖片拼接技術)技巧:首先,用photoshop把背景圖片整合到一起,產生一張png圖片。然後在寫css時用background-position定位,用bg2css這個工具測出位移量。Css 如下:

background:url(../images/index.png) no-repeat -961px -78px;

6、 當使用list-style-image屬性時,css sprites會無法確定其位置,這時可使用li的background代替:如下:

background:url(../images/index.png) no-repeat -961px -78px;

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.