盒模型(Box model)

CSS盒模型描述了一个为文档树中的元素生成的并根据可视化格式模型进行布局的矩形框

IE盒模型和W3C盒模型在计算总宽度中存在一些差异

• 在W3C模型中width和height是指content的宽度和高度

• 在IE盒模型中,width和height包含border和margin以及content的宽度和高度

在CSS3中引入了box-sizing属性,它可以允许改变默认的CSS盒模型对元素宽高的计算方式

共包含三个选项:

• content-box: 浏览器定义元素的屏幕宽度和高度的默认方法, 会将border宽度和padding厚度与width和height属性值相加,来确定该标签的屏幕高度和宽度

• padding-box: 当你在一个样式中设置了width和hight属性时,它应该包含padding作为该值的一部分

• border-box: 包含了border宽度和padding厚度,将它们作为width和height的一部分.

盒模型

margin详解

border详解

padding详解