立诚勿怠,格物致知
It's all about connecting the dots

W3C标准盒模型及IE盒模型

盒模型有两类:W3C标准盒模型和IE盒模型。

W3C标准盒模型

一个元素的W3c标准盒模型由margin、border、padding、content四个区块构成。在box-sizing: content-box;时,元素的宽度、高度指的是content的宽度、高度。在box-sizing: border-box;时,元素的宽度、高度是content、padding、border三者的合计值,与IE盒模型一致。

IE盒模型

如果html文件头部没有有效地声明文件类型的话,IE6、7、8下的盒模型解析情况会跟W3C标准盒模型不一致,我们称之为IE盒模型。由于现在我们写html页面时都会在头部加上html5文档类型声明(<!DOCTYPE html>),所以并不用担心这个问题,知道有这么回事就可以了。

一个元素的IE盒模型也是由margin、border、padding、content四个区块构成的。在IE盒模型里,元素的宽度、高度是content、padding、border三者的合计值。

Margin特别说明

margin-top和margin-bottom对display: inline;的元素无效(margin-left、margin-right是有效的)。

display: inline-block|block;的垂直相邻元素间距离的计算规格:

  • margin-top和margin-bottom均为正数,取最大值;
  • margin-top和margin-bottom均为负数,取最小值(-2px、-10px,取-10px);
  • margin-top和margin-bottom一正一负,取其和(-2px、10px,取8px;2px、-10px,取-8px);
  • 以上三条可简记为“同正负取绝对值大的,一正一负取其和”;
赞(1) 打赏
文章名称:《W3C标准盒模型及IE盒模型》
文章链接:https://www.orzzone.com/box-model-standard-ie.html
商业联系:yakima.public@gmail.com

本站大部分文章为原创或编译而来,对于本站版权文章,未经许可不得用于商业目的,非商业性转载请以链接形式标注原文出处。
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册