边框属性
上边框：border-top 下边框：border-bottom
左边框：border-left 右边框：border-right
综合样式就是在所属边框的后面加上-style/-width/-color
边框样式（border-style）属性值
none:没有边框； dashed:边框为虚线；
solid:边框为单实线； dotted:边框为点线；
double:边框为双实线；
边框样式（border-style）遵循值复制原则：
border-style:solid ; 四边均为实线
border-style：solid dotted; 上下实线，左右点线
border-style：solid dotted dashed; 上实线，左右点线，下虚线
border-style:solid dashed dotted double ;上实线，右虚线，下点线，左双实线边框样式（border-width）属性值
注意：在设置边框宽度时，必须同时设置边框样式，如果未设置样式或者样式为none,不论宽度为多少都无效。（常用取值单位为像素）
其中border-width的用法与border-style类似，透明色为transparent
综合设置边框样式
border-top/-bottom/-left /-right:所选边框的宽度 样式 颜色；
实例：border: 1px #F0C6C7 solid;内边距属性（padding）
知识点概述：内边距指的是元素内容与边框之间的距离，也常常称为内填充。能调整内容在盒子中的显示位置。（与border类似）
上内边距：padding-top 下内边距：padding-bottom
左内边距：padding-left 右内边距：padding-right
四边内边距：padding
注意：
1、内边距不允许使用负值。
2、如果设置内外属性值为百分比，不论上下或左右的内外边距，都是相对于父元素宽度width的百分比，随父元素width的变化而变化，和高度height无关。
外边距属性(margin)
知识点概述：指元素边框与相邻元素之间的距离，可以拉开盒子与盒子之间的距离，合理地布局网页。
上外边距：margin-top 下外边距：margin-bottom
左外边距：margin-left 右外边距：margin-right
四边外边距：margin
内外边距的区别：margin可以取负值，padding不能取负值
块元素水平居中的方法
知识点概述：当对块元素应用宽度属性width,并将左右的外边距都设置为auto,可使块级元素水平居中。
实例：margin:0 auto; /*利用margin实现块元素水平居中*/
margin:5px auto; /*利用margin实现块元素水平居中,并且上下拉开5像素边距*/内外边距清除
知识点概述：为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距。
*{
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}注意:如果没有明确定义标签的宽高时，内边距相比外边距的容错率更高。
盒子模型的总宽度与总高度总结
盒子总宽度=width+左右内边距之和+左右边框之和+左右外边距之和；
盒子总高度=height+上下内边距之和+上下边框之和+上下外边距之和；
设置背景颜色（background-color）
知识点概述：在css中，网页元素的背景颜色使用background-color属性来设置。
知识点补充：需要整个页面都设置背景颜色时可以对body设置背景颜色。
设置背景图像（ background-image）
知识点概述：在css中，可以将图像作为网页元素的背景，通过background-image属性实现。
例如：
body{
background-image:url(图片路径);
}注意：同时设置background-color和background-image时，图片会将颜色覆盖掉；
设置背景图像平铺（background-repeat）
知识点概述：默认情况下，背景图像会自动向水平和竖直两个方向平铺，如果不希望背景图像平铺，或只沿一个方向平铺，可以通过background-repeat属性来控制。
平铺属性值：
repeat:沿水平和竖直两个方向平铺（默认值）；
no-repeat:不平铺（图像位于元素的左上角，只显示一次）；
repeat-x:只沿水平方向平铺；
repeat-y;只沿竖直方向平铺；
设置背景图像的位置（background-position）的参数
1、单位数值：设置图像左上角在元素中的坐标，例如：background:20px 30px;（意思是距左侧边框20px,距上方边框30像素）
2、预定义的关键字：水平方向（left,center,right）,垂直方向（top,center,bottom），例如：background: center;
3、百分比：
0% 0%（图像左上角与元素的左上角对齐）；
50% 50%（图像50% 50%中心点与元素50% 50% 的中心点对齐）；
20% 30%（图像20% 30%的中心点与元素20% 30%的点对齐）；
100% 100%（图像右下角与元素的右下角对齐，而不是图像充满元素）；
例如：background: 0% 0%；
设置背景图像固定（background-attachment）
参数设置：
scroll:图像随页面元素一起滚动（默认值）。
fixed:图像固定到屏幕上，不随页面元素滚动。
实例：
background-attachment：scroll；
background-attachment：fixed;设置元素背景(background)
知识点概述：CSS中的背景属性也是一个符合属性，可以将背景相关样式都综合定义在一个复合属性background中。
格式：background:背景色 url("图像") 平铺 位置 固定；(顺序任意，中间用空格隔开，不需要的样式可以省略)。
实例：
background:url("图像") no-repeat 50px 80px fixed;元素类型
块元素：1、在界面中以区域块的形式出现；2、每个块元素通常都会独自占据一整行或多整行；3、可以对其设置宽度、高度、对齐等属性。（<div> <h1> ~ <h6> <p>）
行内元素：1、不占有独立的区域； 2、仅仅靠自身的字体大小和图像尺寸来支撑结构； 3、一般不可以设置宽度、高度、对齐等属性。(<strong> <em>)
区别：块元素无论宽度为多少都会独自占据一行；而行内元素一行可以占据多个。
注意：在行内元素中有几个特殊的标签如<img>和<input>,对它们可以设置宽高和对齐属性，有些资料会称它们为行内块元素。
< span>标签
1、< span>标记是一个行内标记；
2、< span> 与 < /span> 之间只能包含文本和各种行内标记；
3、< span> 标记常用于定义网页中某些特殊显示的文本，配合class属性使用；
4、当其他行内标记都不合适时，就可以使用< span>标记；
5、< span> 标签本身没有结构特征，只有在应用样式时，才会产生视觉上的变化；
6、< div> 标签可以内嵌< span>标签， 但是< span> 标签中不能嵌套< div>标签。
元素类型的转换（display）
属性值设置：
inline:此元素将显示为行内元素（行内元素默认的display属性值）；
block:此元素将显示为块元素（块元素默认的display属性值）；
inline-block：此元素将显示为行内块元素，可以将其设置宽高和对齐等属性，但是该元素不会独占一行；
none:此元素将被隐藏，不显示，也不占用页面空间。
颜色透明度(rgba & opacity)
知识点概述：通过引入RGBA模式和opacity属性，对背景与图片设置不透明度。
rgba(r,g,b,alpha); (其中r,g,b的取值范围为0~255之间任意整数，alpha取值范围是0~1任意数字)
例如：
p{background-color:rgba(255,0,0,5);}opacity属性用于定义标签的不透明度，参数opacityValue表示不透明度的值，它是介于0~1之间的浮点数，0表示完全透明，1表示完全不透明，0.5表示半透明。
例如：
opacity: opacityValue（这是一个0~1之间的浮点数）;总结：rgba只对背景颜色透明度有效，opacity对任意内容都有效
图片边框(border-image)
知识点概述：在网页设计中，我们还可以使用图片作为元素的边框，运用CSS3中的border-image属性就可以轻松实现这个效果。
图片边框属性值的设置参数：
border-image-source:指定图片的路径，url设置路径；
border-image-slice:指定边框图像顶部、右侧、底部、左侧内偏移量（分割线）。使用百分比数值；
border-image-width:指定边框宽度，使用像素；
border-image-outset:指定边框背景向盒子外部延伸的距离，设置边框图像与边框距离，取值为数字，表示倍率。
border-image-repeat:指定背景图片的平铺方式。stretch拉伸，repeat平铺，round自适应平铺（不完整的部分会被直接删除）。
border-image-source: url(图片位置);
border-image-slice:33%;
border-image-width:40px;
border-image-outset:1px;
border-image-repeat:repeat;
/*等同于下面一段*/
border-image:url(图片位置) 33%/40px/1px repeat;
/*需要注意的是涉及距离的值要用斜线隔开，其他值正常空格隔开即可*/阴影（box-shadow）
知识点概述：改变阴影的投射方向以及添加多重阴影效果；
书写格式参考：box-shadow:h-shadow v-shadow blur spread color outset（或者是inset）;
blur:模糊半径
spread: 阴影面积。
注意：
1、实际使用时blur spread outset（或者是inset）都可以不写；
2、多个模糊值之间用逗号隔开
实例：
box-shadow:5px 5px 10px 2px #999 inset, -5px -5px 10px 2px #333 inset;3、设置内边距阴影（inset）时， 一定要同时设置内边距（padding）,否则阴影不会显示。
线性渐变
知识点概述：线性渐变起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image:linear-aradient(参数值)；”样式可以实现线性渐变效果。
格式：
background-image:linear-gradient(渐变角度，颜色值1，颜色值2...,颜色值n);linaer-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变角度和颜色值。
渐变角度：指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或关键字（to top/right/button/left）。
颜色值：用于设置渐变颜色，""颜色1"表示起始颜色，"颜色n表示结束颜色"，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用逗号隔开。
径向渐变
知识点概述：是网页中一种常用的渐变，在径向渐变过程中，起始颜色会从一个中心开始，按照椭圆或圆形形状进行扩张渐变，运用CSS3中“background-image:radial-gradient(参数值)；”样式可以实现径向渐变效果。
格式：
background-image:radial-gradient(渐变形状 圆心位置，颜色值1，颜色值2...,颜色值n);radial-gradient用于定义渐变的方式为径向渐变，括号内的参数值用于设定渐变形状、圆心位置和颜色值。
渐变形状用来定义径向渐变的形状，其取值即可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键词。（关键词为：circle:圆形， ellipse:椭圆）
圆心位置用于确定元素渐变的中心位置，使用"at"加上关键词或参数值来定义径向渐变的中心位置。
“颜色值1"表示起始颜色， "颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用中隔开。
重复渐变
知识点概述：在CSS3中，通过"background-image:repeating-linear-gradient (参数值) ;" 样式可以实现重复线性渐变的效果。
格式：
background-image.repeating-linear-gradient(渐变角度颜色值1.颜色值2..颜色值n);圆角（border-radius）
知识点概述：：在网页设计中，经常会看到一些圆角的图形，如按钮、头像图片等，运用CSS3中的border-radius属性可以将矩形边框四角圆角化，实现圆角效果。
格式：
border-radius : 水平半径参数1 水平半径参数2 水平半径参数3
水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4;注意：
1、当应用值复制原则设置圆角边框时，如果“垂直半径参数”省略，则会默认等于“水平半径参数”的参数值。此时圆角的水平半径和垂直半径相等。
2、半径参数值可以用像素（10px）,也可以用百分比（10%），当各边百分比达到50%时，达到临界值，图片会变成圆形。
3、属性值的值复制原则：
●水平半径参数和垂直半径参数均可以设置1~4个参数值
●水平半径参数和垂直半径参数设置1个参数值时，表示四角的圆角半径均相同;
●水平半径参数和垂直半径参数设置2个参数值时，第1个参数值代表左上圆角半径和右下圆角半径，第2个参数值代表右上和左下圆角半径
●水平半径参数和垂直半径参数设置3个参数值时，第1个参数值代表左上圆角半径,第2个参数值代表右上和左下圆角半径;第3个参数值代表右下圆角半径。
(如果"垂直半径参数"省略，则会默认等于“水平半径参数的参数值)
●border-radius:50%;用于 设置圆形。
多背景图像
知识点概述：在CSS3中, 通过background-image. background-repeat. background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。
格式：
background-image:
url(images/caodi.png),
url(images/taiyang.png),
url(images/tiankong.png);注意：最先写出来图片会显示在最前面，所以书写时需要注意顺序，防止图片覆盖。
知识补充：
CSS3之前: 一个容器只能填充一 张背景图片，如果重复设置，最后设置的背景图片将覆盖之前的背景。
CSS3通过background-image，background-repeat， background-position 等属性的值来实现多重背景图像效果，各属性值之间用逗号隔开。
实例：
.off{
width: 604px;
height: 227px;
background-image:url("../../../Documents/muxishiye/04.jpg"),
url("../../../Documents/muxishiye/05.jpg"),
url("../../../Documents/muxishiye/06.jpg");
background-position: left,center,right;
border-radius:0px 0px 35px 35px;
background-repeat: no-repeat;
}