Web开发笔记:盒子模型width的定义

CSS的一个重要概念是盒子模型(Box Model),它是由外边框(Margin),边框(Border),内填充区(Padding)和内容区(Content)四部分构成。

近期笔者在学习CSS过程中遇到这么一个问题,同样以 width:600px 去定义一个div和table,得到的两个元素宽度却并不相同(下图)。

        .divBox{
            width:600px;
            padding: 10px;
            margin:20px;
            border: 5px solid red;
        }
        .tableBox{
            width:600px;
            padding: 10px;
            margin:20px;
            border: 5px solid red;
        }

起初笔者以为是由于浏览器对默认padding定义差异而导致的问题,但使用Chrome、IE、Firefox、Opera逐个测试查看,所得到的页面均相同。

通过使用Chrome的Inspect审查模式,笔者终于发现了问题的所在,div和table对width的定义并不相同。

div元素下,width只定义盒子模型的content的长度。如图,蓝色部分为content,它的宽度即为我所给div所定义的width:600px。

而在table元素下,width所定义的是盒子模型中border+padding+content的长度。如图,黄色border 5*2px + 绿色padding 10*2 + 蓝色content 570px,即等于我给table所定义的width:600px。

这样问题就解决了,将div中的width修改成570px,我就获得了两个等长的div和table元素。

关于width的定义问题,教材和w3school上似乎都没有给出明确的说明,这对CSS初学者来说,确实造成了不小的困扰。希望这篇文章能给遇到和我一样问题的初学者一定帮助。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫,分享到朋友圈

Web开发笔记:盒子模型width的定义
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close