摘要:一盒模型一个页面由许多元素组成,而每一个元素都可以表示为一个矩形的盒子,盒模型正是描述这些矩形盒子的存在。外边距区域用空白区域扩展边框区域,以分开相邻的元素。的开源框架就全局设置了,由此可见盒模型的是比较受欢迎的。
一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在。
MDN的描述:
When laying out a document, the browsers rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.
Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.
CSS盒模型有四条边:外边距边、边框边、内填充边、内容边(Content edge、Padding edge、Border edge和Margin edge),四条边由内到外把它划分为四个区域:内容区域、内边距区域、边框区域、外边距区域(Content area、Padding area、Border area和Margin area)。
通过CSS属性(width、height、padding、border和margin)来控制它们的尺寸。
1 /* 关键字 值 */ 2 box-sizing: content-box;/*默认值*/ 3 box-sizing: border-box; 4 5 /* 全局 值 */ 6 box-sizing: inherit; 7 box-sizing: initial; 8 box-sizing: unset;
box-sizing的作用就是告诉浏览器,使用的盒模型是W3C盒模型,还是IE盒模型。
a.当 box-sizing 的值为 content-box(默认值) 时,其尺寸计算公式为:
width = content-width;
height = content-height;
b.当 box-sizing 的值为 border-box 时,其尺寸计算公式为:
width = content-width + padding-left + padding-right + border-left-width + border-right-width;
height = content-height + padding-top + padding-bottom + border-top-height + border-bottom-height;
无论取何值,盒子尺寸是一样的,改变的是盒子的容量(盒子内部的width和height的计算方式)。
补充:IE6、7为W3C盒模型。
在项目里,究竟该使用哪种盒模型?我也不知道啊
在MDN上有这样一句话:
Some experts recommend that web developers should consider routinely applying box-sizing: border-box to all elements.
一些专家甚至建议所有的Web开发者们将所有的元素的 box-sizing 都设为 border-box。
Twitter的开源框架Bootstrap3就全局设置了box-sizing: border-box,由此可见IE盒模型的是比较受欢迎的。
补充:
W3C在CSS3中,加入了 calc() 函数。
CSS函数
calc()
可以用在任何一个需要、
,
、
、
、或
的地方。有了
calc(),
你就可以通过计算来决定一个CSS属性的值了。
/* property: calc(expression) */ width: calc(100% - 80px);
使用 calc() 函数,我们可以在 content-box 里实现 border-box,相对的,在 border-box 里实现 content-box 也是可以的。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/2225.html
摘要:标准盒模型标准所有元素可以看作盒子,在中,这一术语是用来设计和布局时使用。在标准盒模型中盒子占位高度与之一样。不幸的是,和在怪异模式中使用自己的非标准模型。 标准盒模型(w3c标准) 所有HTML元素可以看作盒子,在CSS中,box model这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 showImg(h...
CSS盒模型以及与之相关的知识点 盒模型分为哪几种 - 标准盒模型 - IE盒模型 两者区别在于 width 和 height 计算方式上的不同: 标准盒模型 width = content width; IE核模型 width = content width + padding + border CSS 如何来设置这两种模型 box-sizing: border-box box-siz...
CSS盒模型以及与之相关的知识点 盒模型分为哪几种 - 标准盒模型 - IE盒模型 两者区别在于 width 和 height 计算方式上的不同: 标准盒模型 width = content width; IE核模型 width = content width + padding + border CSS 如何来设置这两种模型 box-sizing: border-box box-siz...
CSS盒模型以及与之相关的知识点 盒模型分为哪几种 - 标准盒模型 - IE盒模型 两者区别在于 width 和 height 计算方式上的不同: 标准盒模型 width = content width; IE核模型 width = content width + padding + border CSS 如何来设置这两种模型 box-sizing: border-box box-siz...
阅读 713·2023-04-25 19:43
阅读 3910·2021-11-30 14:52
阅读 3784·2021-11-30 14:52
阅读 3852·2021-11-29 11:00
阅读 3783·2021-11-29 11:00
阅读 3869·2021-11-29 11:00
阅读 3557·2021-11-29 11:00
阅读 6105·2021-11-29 11:00