CSS3 box-sizing

最新推荐文章于 2023-08-04 11:32:40 发布

转载最新推荐文章于 2023-08-04 11:32:40 发布 · 330 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/vs1435/p/5480812.html

标签

#javascript #ViewUI

收录于

本文详细介绍了CSS3中box-sizing属性的使用方法及其不同取值的影响。包括content-box、border-box和inherit三种取值方式，并解释了它们如何影响元素的尺寸计算。

参考： http://www.w3school.com.cn/cssref/pr_box-sizing.asp

定义和用法

默认值： content-box
继承性： no
版本： CSS3
JavaScript 语法： object.style.boxSizing="border-box"

语法

box-sizing: content-box|border-box|inherit;
content-box （border和padding不计算入width之内）
这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box （border和padding计算入width之内）
为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit
规定应从父元素继承 box-sizing 属性的值