本文摘自PHP中文网,作者不言,侵删。
box-sizing属性可用于设置更改区域大小,比如,如果你需要并排放置两个带边框的框,可通过将 box-sizing 设置为 border-box实现,下面我们就来看具体的内容。box-sizing属性是用于更改区域大小计算的设置,使用padding和border属性设定边距和边界线的粗细时,在区域的width和height中加入padding和border的部分,因此,根据padding和border的值,整个区域的大小就会改变。
这是因为区域的大小不包含padding,border的值。
根据box-sizing属性改变设定,可以在区域大小中设置padding和border。这使得可以确定盒子的大小而不受padding和border的影响。
我们接着来看box-sizing的使用方法
box-sizing属性写法如下
1 |
|
value的值你可以写入content-box和border-box。
content-box:宽度和高度分别应用到元素的内容框;在宽度和高度之外绘制元素的内边距和边框。
border-box:为元素设定的宽度和高度决定了元素的边框盒,也就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
此外,如果输入inherit,则继承父元素的值。
下面我们来看一个具体的例子
代码如下
HTML代码
1 2 3 4 5 6 7 8 9 10 11 12 |
|
设置宽度和高度完全相同的两个盒子(宽度400px,高度150px),第一个盒子设置的初始值content-box,第二个盒子设置的值是border-box。
CSS代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
运行结果
在浏览器上将显示如下效果
以上就是CSS中的box-sizing属性怎么使用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《box-sizing》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者