盒子模型详解

菜鸟教程解释：所有HTML元素可以看作盒子

1.普通盒子模型：

margin（外边距）：清除边框外的区域，外边距是透明的，不包含在background属性中。

border（边框）： 围绕在内边距和内容外的边框。

padding（内边距）：清除内容周围的区域，内边距是透明的，包含在background属性中。

content（内容）：盒子的内容，显示文本和图像或者其他的H5标签。

对这个盒子模型设置width和height属性，即给content设置宽高属性。

这个盒子的宽度 = width+padding+border+margin；

这个盒子的高度 = height+padding+border+margin；

2.特殊盒子模型：有box-sizing属性的盒子模型

box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框（border）。

例如，假如需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

默认情况下，元素的宽度(width) 和高度(height)计算方式如下：

width(宽度) + padding(内边距) + border(边框) = 元素实际宽度

height(高度) + padding(内边距) + border(边框) = 元素实际高度

 Eg：

（1）原图：

（2）给aaa加上40px的margin：

 

 橙色部分就是margin：

（3）给aaa加上30px的padding：

 

 

绿色部分是padding，是有背景颜色的：