CSS盒子模型

栏目: CSS · 发布时间: 5年前

内容简介:IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。

盒子模型

IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。

  • 盒子模型组成为:margin、border、padding、content。
  • CSS盒子模型分为:标准W3C盒子模型,IE盒子模型。两者最大不同在于对于css的width和height的大小设置。下面所说的width和height是css中的宽高。

IE盒子模型

CSS盒子模型

CSS盒子模型

IE盒子模型的width = contentWidth + padding-left + padding-right + border-left + border-right

IE盒子模型的height = contentHeight + padding-top + padding-bottom + border-top + border-bottom

意味着IE盒子的width和height的大小是上述属性相加的最大总和。若content的大小、padding大小、border的大小总和大于css设置的宽高。例如增加padding宽度大小使得盒子宽度大于设置的宽度会将content的大小被压缩,最终content大小会变为0。box的总宽度会大于设置的width大小。

#ie_box {
        margin: 30px;
        width: 200px;
        height: 200px;
        background-color: bisque;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        border: 5px solid brown;
    }

标准W3盒子模型

CSS盒子模型

CSS盒子模型

W3盒子模型的width = contentWidth

W3盒子模型的height = contentHeight

W3盒子模型大小计算就简单多,css设置的width和height就是content内容大小。padding、border的大小并不会影响content的大小。

#w3_box {
        margin: 30px;
        width: 200px;
        height: 200px;
        background-color: bisque;
        padding: 10px;
        border: 5px solid brown;
    }

小结

对于ie和w3两种盒子模型,相比较而言w3盒子模型会比ie盒子模型更好用些,也不容易混淆css中的width和height,同时也方便计算盒子的实际宽高大小,也不会出现ie盒子模型由于属性设置超出预设宽高而挤压content显示。


以上所述就是小编给大家介绍的《CSS盒子模型》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Probability and Computing

Probability and Computing

Michael Mitzenmacher、Eli Upfal / Cambridge University Press / 2005-01-31 / USD 66.00

Assuming only an elementary background in discrete mathematics, this textbook is an excellent introduction to the probabilistic techniques and paradigms used in the development of probabilistic algori......一起来看看 《Probability and Computing》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具