盒子模型

-，盒子模型的相关内容：
1，边框属性：边框样式属性，边框宽度属性，边框颜色属性，单侧边框属性，边框的综合属性
①边框样式：border-style属性用于设置边框样式：
none：没有边框，即忽略所有边框的宽度（默认值）
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
②边框宽度：border-width：用预设值边框的高度，单位像素px，
③设置边框颜色：border-color：边框颜色默认为元素本身的颜色
2,内边距属性：（元素内容与边框之间的距离）
①padding属性用于设置内边距，padding也是复合属性，在定义边距时采用针顺顺序采用复制的原则，1个值为4边，2个值为上下/左右，3个值为上/左右/下。padding相关属性的取值可为auto自动（默认值），不同单位的数值，相对于父元素（或浏览器）宽度的百分比，padding属性值最常用的单位是像素值px，并且不允许使用负值。
3，外边距属性：（标签边框与相邻标签之间的距离）
margin属性用预设置外边距，他是一个复合属性，外边距可以设置负值，使相邻标签发生重叠；
为了更方便的控制网页中标签，制作网页时添加如下代码，即可清除标签默认的内外边距
*｛
padding：0；/清除内边距/
margin：0；/**清除外边距/
｝
4，背景属性：①，设置背景颜色，background-color属性来设置，其默认值为transparent，即背景透明，这时子元素会显示其父元素的背景
②设置背景图像：background-image用于设置背景图像
5，设置背景图像平铺：用background-repeat属性来控制，
repeat：沿水平和竖直两个方向平铺（默认值）
no-repeat：不平铺（图像位于元素的左上角，只显示一次）
repeat-x：只沿水平方向平铺
repeat-y：只沿竖直方向平铺
、、、、、、、当背景图像和背景颜色同时存在时，背景图像优先显示
6，设置背景图像的位置：background-no-repeat：不平铺（图像位于元素的左上角，只显示一次）
background-position（用于放置在其他位置），属性的值通常为两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标；
①使用不同单位（最常用的是像素px）的数值，直接设置图像左上角在元素中的坐标，例如background-position：20px 20px;
②使用预定义的关键字：指定背景图像在元素中的对齐方式，水平方向值：left，center，right 竖直方向值：top，center，bottom；两个关键字的顺序任意，若只有一个值则另一个值则另一个默认为center；
③使用百分比，按照背景图像在元素中的对其方式。
7，设置背景图像固定：用background-attachment属性来设置；scroll图像随页面一起滚动（默认值）fixed：图像固定在屏幕上，不随页面滚动
8，综合设置元素的背景：background：背景色 url（“图像”）平铺 定位 固定
9，盒子的宽与高，width和height的属性值可以为不同单位的数值或相对于父元素的百分比，实际工作中最常用的是像素值（元素的width和height属性仅指元素内容的宽与高，其周围的内边距，边框和外边距都是单独计算的
10，rgba(r,g,b,alpha)alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字
opacity作用范围要比rgba模式大得多，介于0~1之间的浮点数值
11，圆角：border-radius属性可以将矩形四角化，实现圆角效果。
border-radius：水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4；
水平和垂直均有4个参数值
水平半径参数和垂直半径参数设置1个参数值时，表示四角的圆角半径相同
水平半径参数和垂直半径参数设置2个参数值时，第一个参数值代表左上圆角半径和右下角半径，第二个参数值代表右上和左下圆角半径
水平半径参数和垂直半径参数设置3个参数值时，第一个参数值代表左上圆角半径和右下角半径，第二个参数值代表右上和左下圆角半径，第三个参数值代表右下角半径
水平半径参数和垂直半径参数设置4个参数值时，第一个参数值代表左上圆角半径，第二个参数值代表右上圆角半径，第三个参数值代表右下圆角半径，第四个参数值代表左下圆角半径
12，图片边框：border-image
border-image-source：指定图片路径
border-image-slice：指定边框图像顶部右侧 底部 左侧向内偏移量（可以简单理解为图片的裁切位置）
border-image-width：指定边框宽度
border-image-outset：指定边框背景指向盒子外部延伸的距离
border-image-repeat：指定背景图片的平铺方式
13，阴影（box-shadow）
box-shadow：h-shadow v-shadow blur spread color outset
h-shadow：表示水平阴影的位置，可以为负值（必选属性）
v-shadow：表示垂直阴影的位置，可以为负值（必选属性）
blur：阴影模糊半径（可选属性）
outset/inset：默认为外阴影/内阴影（可选属性）
渐变：1，线性渐变：起始颜色会沿着一条直线按顺序过渡到结束颜色。background-image：linear-gradient（渐变角度，颜色值1，颜色值2，颜色值n）
渐变角度：指水平线和渐变线之间的夹角，可以是以deg为单位的角度值或“to”，“left”，“right”，“top”，“bottom”
2，径向渐变：在径向渐变的过程中，起始颜色会从一个中心点开始，按照椭圆或者⚪进行扩张渐变，background-image：radial-gradient（渐变形状 圆形位置，颜色值1，颜色值n）；
①渐变形状：用来定义径向渐变的形状，其取值可以是定义水平和垂直半径的像素值或百分比；
关键词：circle：圆形的径向渐变 ellipse：指定椭圆形的径向渐变；
②圆心位置：用于确定元素渐变的中心位置，使用at加上关键词或数值来定义径向渐变的中心位置，background-position属性值：如果省略则默认为center
3，重复渐变：①重复线性渐变：background-image：repeating-linear-gradient（渐变角度，颜色值1，颜色值2，颜色值n）
重复径向渐变：background-image：repeating-radial-gradient（渐变形状 圆心位置，颜色值1，颜色值n）；
多背景图像：background-image：url(),url();
14，元素类型的转换
元素的类型：块元素：常见的块元素：<h1>~<h6> <p> <div> <ul> <ol>
行内元素：常见的行内元素：<strong> <b> <em> <i> <del> <s> <ins> <u> <a> <span>
display:inline:此元素将显示为行内元素（行内元素默认的display属性值）
block：此元素将显示为块元素（块元素默认的display属性值）
inline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是元素不会独占一行；
none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在
15，相邻块元素垂直边距的合并：当上下相邻的两个块元素时，如果上面的标签有下边距margin-bottom，下面的标签有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者，这种现象被称为相邻块元素垂直外边距的合并；
嵌套块元素垂直外边距的合并：对于两个嵌套关系的块元素，如果父标签没有上内边距及边框，则父标签的上外边距会与子标记的上外边距发生合并，合并后的外边距为两个中的较大者，即使父标签的上外边距为0，也会发生合并；