第六章总结

盒子模型

什么是盒子模型

边框

边框样式：
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
在使用border-style属性综合设置4边样式按照上，右，下，左的顺时针顺序可以使用top，right，bottom，left。

边框宽度
border-width 属性为边框指定宽度。 为边框指定宽度有两种方法：可以指定长度值
border: 简写属性，用于把针对四个边的属性设置在一个声明。
border-color: 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
name：颜色名称
RGB：如red（255，0，0)
Hex：十六进制
border-style: 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width: 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
边框复合属性：
border：宽度 样式 颜色

外边距
CSS 定义了一些规则，允许为外边距指定少于 4 个值。 规则如下： 如果缺少左外边距的值，则使用右外边距的值。 如果缺少下外边距的值，则使用上外边距的值。 如果缺少右外边距的值，则使用上外边距的值。
外边距(margin)相关属性
1.内边距通过指定和边框的上下左右时间的间隔来设置内边距。其属性分别为:
(1)、margin-top:设置上内边距
(2)、margin-bottom:设置下内边距
(3)、margin-left:设置左内边距
(4)、margin-right:设置右内边距
(5)、margin：复合属性，可以指定上述四个方向上的属性值
2.使用margin复合属性设置上述四个参数值的时候需要遵循以下规则:
(1)、margin:5px; //如果只设置了一个值，表示上下左右四个方向的边距都是5px
(2)、margin:5px 10px; //如果设置了两个值，表示上下为5px,左右为10px
(3)、margin:5px 10px 15px; //如果设置了三个值，表示上5px,左右10px,下15px
(4)、margin:5px 10px 15px 20px; //如果设置了四个值，表示上5px,右10px,下15px,左20px
注意:外边距的值允许有负值

内边距：
内边距(padding)相关属性

1.内边距通过指定和边框的上下左右时间的间隔来设置内边距。其属性分别为:
(1)、padding-top:设置上内边距
(2)、padding-bottom:设置下内边距
(3)、padding-left:设置左内边距
(4)、padding-right:设置右内边距
(5)、padding：复合属性，可以指定上述四个方向上的属性值
2.使用padding复合属性设置上述四个参数值的时候需要遵循以下规则:
(1)、padding:5px; //如果只设置了一个值，表示上下左右四个方向的边距都是5px
(2)、padding:5px 10px; //如果设置了两个值，表示上下为5px,左右为10px
(3)、padding:5px 10px 15px; //如果设置了三个值，表示上5px,左右10px,下15px
(4)、padding:5px 10px 15px 20px; //如果设置了四个值，表示上5px,右10px,下15px,左20px
注意:填充的值不能够出现负值

盒子模型的尺寸
box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
content-box 默认值，宽度和高度用来设置内容区的大小
border-box 宽度和高度用来设置整个盒子可见框的大小
width 和 height 指的是内容区 和 内边距 和 边框的总大小

box-sizing属性

语法：box-sizing：content-box|border-box|inherit

圆角边框

border-radius属性
语法：border-radius：length{1，4}
给元素的边框设置圆角，默认不设置圆角为矩形，可以给元素设置圆角将元素变为正圆、椭圆或圆角矩形
（1）border-radius：50%，给元素设置50%的圆角大小。
（2）border-radius：40% 30%，给元素的左上角、右下角设置40%的圆角大小，给元素的右上角、左下角设置30%的圆角大小。
（3）border-radius：10% 20% 30% 40%，给元素的左上角设置10%的圆角大小，给元素的右下角设置20%的圆角大小，给元素的右上角设置30%的圆角大小、给元素的左下角设置40%的圆角大小。
（4）border-radius：10px，统一给元素的4个角设置10px的圆角大小。
（5）border-radius：10px 20px，给元素的左上角、右下角设置10px的圆角大小，给元素的右上角、左下角设置20px的圆角大小。
（6）border-radius：10px 20px 30px 40px，给元素的左上角设置10px的圆角大小，给元素的右下角设置20px的圆角大小，给元素的右上角设置30px的圆角大小、给元素的左下角设置40px的圆角大小。

使用border-radius制作特殊图形
圆形
宽高相同
border-radius为宽高的一半，或者直接设置50%
div {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
}
半圆
宽高有一者是另一这的2倍，具体看需要哪个方向的半圆
设置相应边的border-radius，值为宽高中小的那个
.top {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
}
扇形（四分之一）
宽高相同
只设置单角的border-raduis为宽高相同的大小
.right {
width: 100px;
height: 100px;
border-radius: 0 100px 0 0;
}
椭圆
宽高有一者是另一这的2倍，具体看需要横还是竖的椭圆
分别设置水平和数值方向的border-radius（用 / 来分割，四个角的值都是一样的，所以只填一个总体值），水平方向大小与宽度相同，竖直方向大小与高度相同
.hov {
width: 100px;
height: 50px;
border-radius: 100px / 50px;
}
元素的宽高必须相同
设置圆的半径为元素宽度的一半或50%

盒子阴影

box-shadow：h-shadow v-shadow blur spread color inset