box-sizing解决自适应布局容器宽度问题
文 / @WordPress主题
在使用box-sizing属性前先要了解一下盒模型:
- 标准盒模型:内容宽度不包含内边距、边框、外边距
- IE盒模型:内容宽度包含内边距、边框,但不包含外边距。
box-sizing属性的值:
- content-box,默认值,遵从标准盒模型;
- border-box,使用IE盒模型;
- inherit,继承父元素的box-sizing属性值;
早期的IE盒模型为border-box,但W3C的专家们认为内容宽度不应该包含内边距和边框,所以在CSS2.1中盒模型的默认值为content-box。实践证明盒模型为border-box更容易布局,例如:
一个无序列表,使用浮动两列排列,每列宽度50%,在父元素宽度自适应的情况下,如果需要给右边的一列设置边框,那么问题就来了,设置边框后右边的一列被挤到了下面,因为父元素的宽度不够了,由于父元素的宽度不确定,我们也没办法为列表指定像素值宽度,只能使用百分比。
用一句话来说,在自适应布局的时候,标准盒模型会带来许多问题,因此,CSS3提供了box-sizing属性:
* { box-sizing: border-box; }
现在,整个世界都变得美好了。
为了更好的说明box-sizing的用处,以两栏自适应布局为例:
需求是这样的,边栏的宽度固定,内容栏的宽度自适应,考虑到SEO,HTML中内容栏必须放在前面,在过去,要实现这样的浮动布局必须给内容栏额外添加一个容器,HTML如下:
<div id="wrap"> <div id="content"> 内容区 </div> </div> <div id="sidebar"> 边栏 </div>
相应的CSS为:
#wrap { width: 100%; } #sidebar { width: 360px; float: right; margin-left: -360px; } #content { float: left; margin-right: 380px; }
之所以#content的右边边距为380而不是360,是因为我要给它们中间留一个20像素的间距。
如果你不介意额外添加的标签,那么一切都没有问题,但你也可以使用box-sizing而不需要额外添加标签:
#sidebar { width: 360px; float: right; margin-left: -360px; } #content { float: left; padding-right: 380px; }
唯一的区别是,#content的宽度是100%,如果需要给#content设置背景色的话就有点难看了,因为#content和#sidebar实际上有360像素的重叠区域。
全民最关心的问题:box-sizing的浏览器兼容性,事实上不用太担心这个问题,虽然IE6\7不支持,但目前看来IE系列浏览器被淘汰是迟早的事了。

相关文章
-
搭建一个WordPress网站需要多少成本 2023-11-06 00:09:51
-
Symlink介绍(附:如何使用Symlink进行WordPress开发) 2023-11-05 23:38:32
-
让WordPress实现数据库同步的插件:HyperDB 2023-10-24 23:40:49
-
allegro电商平台值得做吗(附:2023年Allegro注册流程指南) 2023-10-08 21:53:39
-
印度跨境电商平台有哪些(附:印度跨境电商做什么产品好) 2023-10-08 21:34:23
-
跨境电商必看的几大海外二手电商平台 2023-10-08 18:04:42
-
WordPress同城互联网产品解决方案:UBASE 2023-10-03 16:40:39
-
WordPress网站的安全插件:wordfence 2023-09-14 09:25:18
-
WordPress 6.3 支持在手动更新插件和主题失败后回滚旧版本 2023-08-28 16:58:45
-
WordPress 6.3版本(2023年8月)性能提升了哪些? 2023-08-28 16:56:02