CSS 盒子模型

当对一个文档进行布局(layout)的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model)，将所有元素表示为一个个矩形的盒子(box)

一个盒子由四个部分组成:content、padding、border、**margin

**

content：即实际内容

padding：即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的 background 属性影响

border：即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成

margin：即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域

CSS 中盒子模型分为两种

• W3C 标准盒子模型 （默认情况）
• IE 怪异盒子模型

W3C 标准盒子模型：

• 盒子总宽度=width+ padding + border + margin
• 盒子总高度=height+ padding +border + margin

width,height 只包含内容的宽高

IE 怪异盒子模型：

• 盒子总宽度=width+ margin
• 盒子总高度 = height + margin

width/height包含了 padding 和 border 值

box-sizing

box-sizing: content-box|border-box|inherit

该属性能够控制如何计算一个盒子的宽高

• content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
• border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
• inherit 指定 box-sizing 属性的值，应该从父元素继承