盒子模型也叫框模型：

盒子的大小由 内容区和内边距和边框来决定的。

盒子的大小=内容区+内边距+边框的宽度

内容区，内边距，边框，外边距。

border：设置边框的宽度，是实心线。

dotted：是点状虚线。

dashed：是虚线。

double：是双线。

border-color:设置边框的颜色。

border-width:设置边框的宽度。

none:表示没有边框。

内边距：padding

padding-top; padding-left; padding-right; padding-bttom.

外边距：margin

margin-top; margin-left; margin-right; margin-bttom.

auto：是放到最大的边距。

设置外边距要注意  会重叠。

子元素和父元素重叠，子元素的外边距会传递给父元素。

给子元素一个外边距，父元素也会执行这个外边距。

解决方案：设一个边框和设置一个内边距和overflow(溢出)：hidden会解决这些问题。

兄弟之间的外边距重叠，会取他俩外边距的最大值。

浏览器的默认样式：

清除浏览器的默认样式

*{

margin：0；

padding：0；

}

内联元素的盒模型：

内联元素不能设置宽和高，设置了也不好使。

左右水平方向的可以设置宽和高，都好使。

垂直方向可以设置宽和高，但是不好使，会覆盖别的盒子。垂直的会影响布局。

内联元素不能设置宽高，设了也不好使，只能设置左右水平方向和边框。