CSS3中的box-sizing

RaoMeng 发布于2019-08-30 15:53 / 3590人阅读

摘要：的作用了解完这两种盒模型后，在介绍一下，他一共有种值，，。就是继承父元素的值，这里不做介绍。比如我们想做一个内边距，边框为，最终包括边框宽度为的，之前的做法是先算出内容宽。

懂得如何运用box-sizing之前，必须需要了解一下常规盒模型和怪异盒模型（IE盒模型）。
我们都知道盒模型从里到外主要包括：content，padding，border，margin。如下图：

两种盒模型的宽度width
标准盒模型的width = content
怪异盒模型的width = content + padding*2 + border*2
也就是说，一个div，他的内容宽content为100px，padding为10px，border为1px，margin为10px，那么在标准盒模型的解析下，他的width = 100px，也就是content的宽度
而在怪异盒模型的解析下，他的width = 100px + 1px*2 + 10px*2 = 122px。

box-sizing的作用

了解完这两种盒模型后，在介绍一下box-sizing，他一共有3种值：content-box，border-box，inherit。inherit就是继承父元素的box-sizing值，这里不做介绍。
centent-box就是已标准盒模型的方式解析当前盒子，即此时盒子的width = content的宽度
border-box就是已怪异盒模型的方式解析盒子，此时width = content + padding*2 + border*2
聊到这里已经很明了了，box-sizing的作用就是规定当前盒子已哪种方式解析当前盒子。

使用场景

当然，box-sizing在某些场景下，是非常好用的。比如我们想做一个内边距10px，边框为2px，最终包括边框宽度为100px的div，之前的做法是先算出内容宽width = 100px - 10px*2 - 2px*2 = 76px。这种方式没问题，但是多少有点繁琐，将width的计算给以开发人员来完成显然是不合适的。
此时我们可以把它交给交给计算机来完成，这就需要用到box-sizing来完成。这里通过把div的box-sizing设置为border-box，我们就可以简单的将width设置为100px，其余的padding和border按照给定好的值一一填入，就可以完成这一切工作，省去了人为的计算内容宽content的过程，减少计算量的同时减少了错误率，何乐不为？

GPU云服务器云服务器 css3 css3气泡 css3动画 JS+CSS3

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

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

浅谈CSS3 box-sizing 属性有趣的盒模型

摘要：盒模型的组成大家肯定都懂，由里向外盒模型是有两种标准的，一个是标准模型，一个是模型。指定元素的宽度和高度最小最大属性适用于的宽度和高度。盒模型的组成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有两种标准的，一个是标准模型，一个是IE模型。从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高，而在IE模型中盒模型...

K_B_Z 2019-04-23 11:41 评论0 收藏0
border-sizing属性详解和应用

摘要：用于更改用于计算元素宽度和高度的默认的盒子模型。它有和三种取值。和属性包括内容，内边距和边框，但不包括外边距。所以，的解释很符合常理。使用建议使用建议根据项目中的使用经验和的建议，推荐将属性设置为。个人网站原文链接属性详解和应用 box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inheri...

Batkid 2019-04-23 13:30 评论0 收藏0
calc 与 box-sizing 的替代

摘要：背景之前发现这个布局新属性之后就非常喜欢，爱不释手。语法取值说明元素的宽度高度等于元素边框宽度加上元素内边距加上元素内容宽度高度即。元素的宽度高度等于元素内容的宽度高度。背景之前发现calc这个布局新属性之后就非常喜欢，爱不释手。在公司的实习的时候，开发微信端的页面，使用了几次calc，后来发现在Android的上的不支持～蛋疼。于是到处找替代方案，终于在stackoverflow...

ivydom 2019-08-28 18:26 评论0 收藏0
css面试题

摘要：目前，除了及更早版本外，所有浏览器均已支持。视口单位中的视口，桌面端指的是浏览器的可视区域移动端指的就是中的。根据规范，视口单位主要包括以下个等于视口宽度的。等于视口高度的。生成相对定位的元素，相对于其正常位置进行定位。 css面试题 css垂直居中的方法有哪些？已知高度的块级子元素，采用绝对定位和负边距.container { position: relative;}.verti...

longmon 2019-08-23 18:30 评论0 收藏0
关于CSS3 flex布局，这样简单做就好了。

摘要：布局在移动端会用得比较广泛，例如导航栏，菜单栏等，以支付宝，淘宝为例。看了网上很多关于布局，有些写得太乱了，也太复杂了。那么用布局，就是这样布局上面给每个用划分，一共分份，占，那就是占，那就是这个容易理解吧。 flex布局在移动端会用得比较广泛，例如导航栏，菜单栏等，以支付宝，淘宝APP为例。 showImg(https://segmentfault.com/img/bVbk1vO?w...

RyanHoo 2019-08-30 15:54 评论0 收藏0