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