盒模型本质就是一个盒子,封装了周围的html元素,包括边距,边框和实际内容;允许我们在其他元素和周围元素边框之间放置元素
盒模型有标准盒模型和怪异盒模型(IE盒模型)在编辑html时最顶上会有DOCTYPE标签,即使用标准盒模型,如果没有该标签则由浏览器自己决定
在css3中增加了属性box-sizing;其属性值:
content-box:默认值,盒子的宽度高度等于content
border-box:盒子的宽度高度等于content+padding+border
padding-box:盒子的宽度高度等于content+padding
inheri:从父元素中继承box-sizing属性
标准盒模型
其内容区域宽度width和高度height就是content的width和height
盒子总宽度计算公式:width(content)+padding+border+margin
怪异盒模型
其内容区宽度width和高度height是content的width和height加上padding和border
盒子总宽度计算公式:width(content+padding+border)+margin