css基础（十一）－－盒子模型

35.盒子模型

分为两种：w3c标准模型 ie的传统模型

相同之处：都是对元素计算尺寸模型

不同之处：计算方法不同

 

1.w3c标准盒模型

 

外盒尺寸计算（元素空间尺寸）

 

element空间高度＝内容高度＋内距＋边框＋外距

 

element空间宽度＝内容宽度＋内距＋边框＋外距

 

内盒尺寸计算（元素大小）

 

element高度＝内容高度＋内距＋边框（height为内容高度）

 

element宽度＝内容宽度＋内距＋边框（width为内容宽度

 

2.ie传统模型

外盒尺寸计算（元素空间尺寸）

 

element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）

 

element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）

 

内盒尺寸计算（元素大小）

 

element高度＝内容高度（height包含了元素内容宽度、边框、内距）

 

element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）

 

css3种新增加了box－sizing属性，能够事先定义盒模型的尺寸解析：

语法：box-sizing: content-box | border-box | inherit