内容简介:当你对一个文档进行布局(laying out)时候, 浏览器引擎会根据CSS-Box模型将所有元素描述为一个盒子, CSS会决定这些盒子的大小, 位置, 属性(颜色, 边框...)。盒模型分为两类: IE盒模型和标准盒模型。 两者的区别在于:可见demo1与demo2的外边距为20px。而不是30px。
当你对一个文档进行布局(laying out)时候, 浏览器引擎会根据CSS-Box模型将所有元素描述为一个盒子, CSS会决定这些盒子的大小, 位置, 属性(颜色, 边框...)。
盒模型分类
盒模型分为两类: IE盒模型和标准盒模型。 两者的区别在于:
IE盒模型的width/height = content + border + padding 标准盒模型的width/height = content 复制代码
IE盒模型
标准盒模型
普通文档流块元素的CSS外边距合并问题
<style> * { margin: 0; padding: 0; } .demo1 { width: 40px; height: 40px; background: pink; padding: 10px; margin: 10px 0; border: 2px solid pink; } .demo2 { width: 40px; height: 40px; padding: 10px; background: blue; margin: 20px 0; border: 2px solid blue; } </style> <div class="demo1"></div> <div class="demo2"></div> 复制代码
可见demo1与demo2的外边距为20px。而不是30px。
需要注意的是:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
改变盒子模型
CSS3支持改变盒子模型。
box-sizing
box-sizing用来改变计算盒子高度/宽度的默认盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
/* 关键字 值 */ box-sizing: content-box; box-sizing: border-box; /* 全局 值 */ box-sizing: inherit; box-sizing: initial; box-sizing: unset; 复制代码
content-box(默认值): 标准盒模型
宽度 = 内容的宽度 高度 = 内容的高度 不会包含border, padding。 复制代码
demo演示:
.demo1 { box-sizing: content-box; width: 40px; height: 40px; background: pink; padding: 10px; margin: 10px 0; border: 2px solid pink; } <div class="demo1"></div> 复制代码
盒子内容宽度就是40px;
border-box: 怪异模式
width = border + padding + 内容的width, height = border + padding + 内容的height。 复制代码
demo演示:
.demo { box-sizing: border-box; width: 40px; height: 40px; background: pink; padding: 10px; margin: 10px 0; border: 2px solid pink; } <div class="demo"></div> 复制代码
盒子的内容宽度为16px;
padding-box: 已经弃用
inherit: 规定应从父元素继承 box-sizing 属性的值
为什么要使用border-box
content-box缺点
当你想让两个子容器float:left,宽度各50%,然后给一点padding,最后让子容器并排充满父容器,一切想的挺美好,然而你发现结果并不是这么美好,因为子容器的盒子宽度已经超出了父容器的一半,导致了折行,于是,width就不能50%了,只能是50%再减去padding的像素值 复制代码
<style> * { margin: 0; padding: 0; } .demo div { float: left; width: 50%; height: 100px; padding: 0 10px; } .demo1 { background: pink; } .demo2 { background: blue; } </style> <div class="demo"> <div class="demo1"></div> <div class="demo2"></div> </div> 复制代码
border-box的优势:
border-box的诞生,主要就是解决content-box的最大缺点。border-box意味着子容器的padding和border的厚度都算在50%之内,这样,你可以随意的修改padding和border的厚度值,根本不用担心父容器被撑爆。 复制代码
简单修改下上述代码。
.demo div { box-sizing: border-box; float: left; width: 50%; height: 100px; padding: 0 10px; } 复制代码
因此border-box使用场景如下:
子元素有padding和border,或者至少有其一,并且需要给子元素设定100%宽度(或者50%宽度等等),这时候显然需要border-box。设为border-box之后,padding和border的厚度可以随意调,并不会溢出父元素。如果是content-box,那么,宽度必然会溢出,而且,为了不溢出,你设定子元素的宽度就只能是一个定值,或者是一个计算值(比如calc(100% - 20px)。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 美菜无线前端架构模型2018
- 前端快速创建数据模型方法实现
- 055.Python前端Django模型ORM
- 前端每周清单:大前端技术生命周期模型;WWDC 发布 Safari 11;面向生产环境的前端性能优化
- 057.Python前端Django模型ORM多表查询
- 前端数据模型Model,适用于多人团队协作的开发模式
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。