盒子模型

 

盒子模型的概念

盒子模型用来放网页中的各种元素，包括element（元素）、height、width、padding（内边距，填充）、border（边框）、margin（外边距）。 

宽度和高度

宽度属性（使用百分比时，是相对于父元素的百分比，在ie6里兼容性不好，max-width和min-width无效）

宽度   width：长度值（in cm px） | 百分比 | auto 

最大宽度   max-width：长度值（in cm px） | 百分比 | auto 

最小宽度   min-width：长度值（in cm px） | 百分比 | auto 

高度属性（设置块级元素和替换元素的内容高度，在ie6里兼容性不好，max-height和min-height无效）

高度   height：长度值（in cm px） | 百分比 | auto 

最大高度   max-height：长度值（in cm px） | 百分比 | auto 

最小高度   min-height：长度值（in cm px） | 百分比 | auto 

当一个元素同时设置 max-height和min-height，max-height值小于min-height值，最大高度自动转换成最小高度的值，所以显示min-height值。

可以设置高和宽属性的HTML元素

1、块级元素（p div h1~h6 ul li ol dl dt dd）

2、替换元素（浏览器根据其标签的元素与属性来判断显示的具体内容 img input textarea）

在替换元素标签内和style标签内同时设置高和宽属性的话，最终显示为CSS样式

border边框属性

边框宽度（border-width）

border-width：thin | medium | thick（厚的） | 长度值

边框颜色（border-color）

border-color：颜色 | transparent（透明）

边框样式（border-style）

border-style值有很多种，只定义宽度和颜色，不定义样式，不能显示边框。double双线边框，dotted点状边框，dashed虚线边框，solid实线边框。

4个不同方向来表示（上、下、左、右）

border-[left | right | top | bottom]-width

border-[left | right | top | bottom]-color

border-[left | right | top | bottom]-style

边框缩写：    border：【宽度】【样式】【颜色】

不同方向：    border-top：【宽度】【样式】【颜色】等

padding属性

设置元素的内容与边框之间的距离（内边距或填充）分四个方向

padding-top、padding-right、padding-bottom、padding-left：长度值 | 百分比  值不能为负

盒子在网页中占的空间，不单单与width和height属性有关，还与padding有关。

padding属性简写：

padding：值1；4个方向都为值1

padding：值1  值2；上下=值1，左右=值2

padding：值1  值2  值3；上=值1，左右=值2，下=值3

padding：值1  值2  值3  值4；上=值1，右=值2，下=值3，左=值4，顺时针

margin属性

1、设置元素与元素之间的距离（外边距），4个方向（上、右、下、左）

2、margin-top、margin-right、margin-bottom、margin-left：长度值 | 百分比 | auto 值可以为负

3、margin简写规则与padding相同

4、块级元素默认有margin值，可以在style标签最开始声明margin属性覆盖默认样式 body,h1,p{ margin:0;}

5、margin值为auto，实现水平方向居中显示效果，由浏览器计算外边距

6、垂直方向，两个相邻元素都设置外边距，外边距会发生合并，合并后外边距高度等于两个发生合并外边距的高度中最大值。

7、行内元素没有上下边距

盒子模型计算

盒子模型有两种，标准盒子模型和IE盒子模型：

标准盒子模型计算方法为：盒子宽度=外边距*2+边框*2+内边距*2+内容宽度

IE盒子模型计算方法为：盒子宽度=边框*2+内边距*2+内容宽度

如果没有doctype文档类型声明，各浏览器按照自己的方式解析，如果有，按照标准盒子模型解析。

注意区分 内容高(宽)度、元素高(宽)度、盒子高(宽)度

display属性

inline   元素将显示为内联元素，元素前后没有换行符

block   元素将显示为块级元素，元素前后会带有换行符

inline-block   行内块元素，元素呈现为inline，具有block响应特性

none   此元素不会被显示

样式继承关系

样式属性	继承	说明
width height	不继承	对于样式属性，通过设置值为inherit，指定从父元素继承相对属性值。 例： div{padding:10px;} div p{padding:inhert;}
padding	不继承
margin	不继承
border	不继承