Style boxSizing 属性
定义和用法
boxSizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如,如果您需要并排放置两个带边框的框,可通过将 boxSizing 设置为 "border-box" 来实现。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
浏览器支持
 
 
 
 

Internet Explorer、Opera、Chrome 和 Safari 支持 boxSizing 属性。
Firefox 支持另一个可替代该属性的属性,即 MozBoxSizing 属性。
语法
返回 boxSizing 属性:
	object.style.boxSizing 
设置 boxSizing 属性:
	object.style.boxSizing="content-box|border-box|initial|inherit"
属性值
| 值 | 描述 | 
|---|---|
| content-box | 默认值。这是由 CSS2.1 规定的宽度和高度的行为。设定的宽度和高度(及 min/max 属性)分别应用到元素的内容框的宽度和高度。在设定的宽度和高度之外绘制元素的内边距和边框。 | 
| border-box | 为元素设定的宽度和高度(及 min/max 属性)决定了元素的边框盒。也就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过把已设定的 'width' 和 'height' 属性分别减去边框和内边距才能得到内容的宽度和高度。 | 
| initial | 设置该属性为它的默认值。请参阅 initial。 | 
| inherit | 从父元素继承该属性。请参阅 inherit。 | 
技术细节
| 默认值: | content-box | 
|---|---|
| 返回值: | 字符串,表示元素的 box-sizing 属性。 | 
| CSS 版本 | CSS3 | 
相关文章
CSS 参考手册:box-sizing 属性

 JavaScript 教程
JavaScript 教程 JavaScript 对象
JavaScript 对象 jQuery 教程
jQuery 教程 JSON 教程
JSON 教程 AngularJS 教程
AngularJS 教程 Angular 2 教程
Angular 2 教程 Vue.js 教程
Vue.js 教程 React 教程
React 教程 jQuery UI 教程
jQuery UI 教程 jQuery EasyUI 教程
jQuery EasyUI 教程 AJAX 教程
AJAX 教程 Highcharts 教程
Highcharts 教程 Google Maps API 教程
Google Maps API 教程 ES6 教程
ES6 教程 TypeScript教程
TypeScript教程 ES6 标准入门
ES6 标准入门 Style 对象
 Style 对象