所有的HTML元素都可以看作是盒子,每个盒子包括:
外边距(margin)、边框(border)、内边距(padding)、内容(content)
W3C标准盒模型
设定的height与width就是content的高度与宽度,
盒子总宽度=margin + border + padding + content/width
盒子总高度=margin + border + padding + content/height
IE怪异盒模型
设定的height与width是包括了border、padding、content的,
盒子总宽度=margin + width = margin + border + padding + content
盒子总高度=margin + height = margin + border + padding + content
box-sizing
box-sizing有三个值:
- content-box
- border-box
- inherit
content-box:width和height分别应用到元素的content。在width和height之外绘制元素的padding和border。即W3C标准盒模型
border-box:为元素设定的width和height决定了元素的边框盒。为元素指定的任何padding和border都将在已设定的width和height内进行绘制。content=width/height - padding - border。即IE怪异盒模型
box-sizing应用场景:有时在width为100%时需要将content缩小,把box-sizing值设为border-box,增加padding的值。