JavaScript HTML DOM Style boxSizing 属性

• 

  boxSizing 属性

  boxSizing属性允许您以某种方式定义某些元素以适合某个区域。例如，如果你想要两个并排的边框，可以通过将boxSizing设置为“border-box”来实现。这会强制浏览器呈现具有指定宽度和高度的框，并将边框和填充放在框内。

  更改boxSizing属性：

  document.getElementById("myDIV").style.boxSizing = "border-box";

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  属性
  boxSizing	支持	支持	支持	支持	支持

• 

  语法

  返回boxSizing属性：

  object.style.boxSizing

  设置boxSizing属性：

  object.style.boxSizing = "content-box|border-box|initial|inherit"
• 

  属性值

  值	描述
  content-box	默认值。 这是CSS2.1指定的宽度和高度的行为。 指定的宽度和高度（以及最小/最大属性）分别适用于元素的内容框的宽度和高度。 元素的填充和边框布局并在指定的宽度和高度之外绘制
  border-box	此元素上指定的宽度和高度（以及最小/最大属性）确定元素的边框。 也就是说，元素上指定的任何填充或边框都布局并在此指定的宽度和高度内绘制。 通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算内容宽度和高度
  initial	将此属性设置为其默认值。 阅读有关initial信息
  inherit	从其父元素继承此属性。 阅读有关inherit的信息

• 

  技术细节

  项目	描述
  默认值：	content-box
  返回值：	一个字符串，表示元素的box-sizing属性
  CSS版本	CSS3

• 

  相关页面

  CSS参考：box-sizing属性