前端Day10

CSS盒模型

1.盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

2.内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。

3.外边距是该元素与相邻元素之间的距离。

4.如果给元素定义边框属性，边框将出现在内边距和外边距之间。

5.盒子=内容+内边距+边框+外边距。

书写格式

分写：

border-top-style:样式;

border-top-width:宽度;

border-top-color:颜色;

合写：

单一个方向边框：border-top:宽度 样式 颜色;

样式综合设置：border-style:上边 [右边 下边 左边];

宽度综合设置：border-width:上边 [右边 下边 左边];

颜色综合设置：border-color:上边 [右边 下边 左边];

边框综合设置：border:四边宽度 四边样式 四边颜色;

边框样式属性值

none：无，此值是默认值；

solid：单实线；

dashed：虚线；

dotted：点线；

double：双实线。