box-sizing 的作用

Pines_Cheng 发布于2019-04-23 11:54 / 386人阅读

摘要：和被包含在定义的和之内。这是当文档处于模式时使用的盒模型。注意，填充和边框将在盒子内例如导致在浏览器中呈现的宽度为的盒子。文章乃参考转载其他博客所得，仅供自己学习作笔记使用

box-sizing：content-box | border-box

content-box：

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )

此属性表现为标准模式下的盒模型。

border-box：

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

此属性表现为怪异模式下的盒模型。

box-sizing 属性可以被用来调整这些表现:

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

border-box width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。

这里的维度计算为： width = border + padding + 内容的 width， height = border + padding + 内容的 height。

文章乃参考、转载其他博客所得，仅供自己学习作笔记使用！！！

GPU云服务器云服务器云端的作用域名的作用云计算的作用 php的作用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1336.html

读《css世界》笔记（1）

摘要：流体布局下的宽度分离原则宽度分离原则就是将独立占用一层标签而利用流动性在内部自适应呈现。为了不影响之前的布局我们需要重新计算的宽度。但是不支持属性还是需要手动计算值。使用不建议使用通配符设置盒模型。 css流体布局下的宽度分离原则宽度分离原则就是将width独立占用一层标签,而border、margin、padding利用流动性在内部自适应呈现。为什么要宽度分离分离是为了便于维护...

浠ラ箍 2019-08-30 15:56 评论0 收藏0
CSS 盒模型与box-sizing

摘要：一盒模型一个页面由许多元素组成，而每一个元素都可以表示为一个矩形的盒子，盒模型正是描述这些矩形盒子的存在。外边距区域用空白区域扩展边框区域，以分开相邻的元素。的开源框架就全局设置了，由此可见盒模型的是比较受欢迎的。一、盒模型一个web页面由许多html元素组成，而每一个html元素都可以表示为一个矩形的盒子，CSS盒模型正是描述这些矩形盒子的存在。 MDN的描述： When laying...

番茄西红柿 2019-04-23 13:42 评论0 收藏0
CSS3中的box-sizing

摘要：的作用了解完这两种盒模型后，在介绍一下，他一共有种值，，。就是继承父元素的值，这里不做介绍。比如我们想做一个内边距，边框为，最终包括边框宽度为的，之前的做法是先算出内容宽。懂得如何运用box-sizing之前，必须需要了解一下常规盒模型和怪异盒模型（IE盒模型）。我们都知道盒模型从里到外主要包括：content，padding，border，margin。如下图：showImg(...

RaoMeng 2019-08-30 15:53 评论0 收藏0