盒子模型

盒子模型

今年过年不收礼，收礼就收五仁月饼！！！

 

下面咱们就来讲一讲盒子模型。

 

最近快过端午节了，收到了两盒月饼，但是，一盒里面只有一块，我突然灵感就来了，这不是盒子模型吗！！！？？？

 

里面的月饼就是内容，月饼和盒子的上下左右地距离就是内边距，然后两盒月饼的距离就是外边距，不仅如此，盒子的厚度也是可以调节的！

 

盒子模型包括四个属性：边界、边框、填充、内容

边界-Margin： 盒子之间有一定的距离防撞

边框-Border：月饼盒

填充-Padding：月饼和月饼盒中间的空气

内容-Content：五仁月饼

Border：

1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。

Margin和Padding都可以分别设置上下左右的边距，top，bottom，left，right

举个例子