CSS盒子模型

CSS盒子模型

外边距(Margin) 边框(Border) 内边距(Padding) 内容(Content)

标准盒模型
width应用于content的width 盒子的总宽度=width+padding+margin+border
IE盒模型(怪异盒模型)
width=content宽度+内边距padding+边框border 盒子总宽度=width+margin
指定盒子模型种类
box-sizing属性允许以特定的方式定义匹配某个区域的特定元素

box-sizing:content-box;(W3C 标准盒模型)宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边框和边框
box-sizing:border-box;(怪异盒模型)为元素设定的宽度和高度决定了元素的边框盒，就是说为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框盒内边距才能得到内容content的宽度和高度
box-sizing:inherit;从父元素继承box-sizing属性的值