1.border边框
一个边框的设置，需要设置边框的宽度、颜色、边框的样式
border-width 边框宽度（单位：px）
border-color 边框颜色（有三种形式）
- 关键词（英文颜色单词，例如：red）
border-color:red
- RGB（三原色，利用ps工具获取这些数值 CMYK）
border-color:rgb（255,0,0）
- RGBa （( alpha 不透明度 )，取值0~1之间，0 表示全透明）
border-color:rgb（255,0,0,0）
border-color:rgb（255,0,0,0.6）
- 十六进制颜色（0123456789abcdef）
border-color:#ff0000
border-style 边框样式（三种形式）
solid（直线） / dotted（点线） / dashed （虚线）/ double（双线）
border 多值书写
上右下左 顺时针
一个值（上右下左）
两个值（上下 和 左右）
三个值（上 和 左右 和 下）
四个值（上 和 右 和 下 和 左）
border 单边框
border-left：边框宽度 边框样式 边框颜色;
- border-left-width:左边框宽度;
- border-left-color:左边框颜色;
- border-left-style:左边框样式;
border-top / border-right / border-bottom / border-left
border 复合样式
顺序都可
border: width style color;
border-top: width style color;
边框的特性：
- 同一个元素，相交的两条边框，连接处是斜线
- 元素的宽高 = width + 边框 \ height + 边框
层叠样式表：
- 在样式表中，给同一个元素 添加 同一条样式，后面覆盖前面的
2.background 背景属性
background-color 背景颜色
一样的也是三种形式颜色值：关键词、rgb、十六进制颜色值
background-image 背景图片
background-image：url(背景图片地址);
路径问题：绝对路径 / 相对路径
- 无论从哪里出发，通过这个地址都能找到目标：绝对路径
- 你往前走一百米，然后左转再走两百米就到了：相对路径
哪种路径会比较好？
一般用相对路径
但是如果资源过多，需要有专门的资源服务器，这时候为了资源响应优化，推荐使用绝对地址。
如何基于当前的位置，找另一个文件
- 如果在上一层文件夹 ../
如果在上上层文件夹 ../../
如果在上上上层文件夹../../../
….以此类推
- 同级的文件夹里面
先进入文件夹，再找具体文件：文件夹名/文件名
- 如果是同级呢的文件
直接写上文件名字
background-repeat 背景重复
repeat（重复）默认值 / repeat-x （x轴重复）/ repeat-y（y轴重复） / no-repeat（不重复）
background-position 背景定位 控制背景的位置
值的类型：
值的个数：
一个：x center（y默认居中）;
两个：x y;
扩展：配合关键词可以更好的指定背景的位置
background-position: right 20px bottom 50px;
可以设置距离右边和底部的位置
扩展：图片精灵css sprite
background-position: 10px 20px;
可以用一张图片集成很多个图标
background-attachment背景滚动
背景是跟随滚动条滚动（scroll）/ 固定当前位置（fixed）
background复合样式
background:背景颜色 背景图 背景重复 背景定位 背景跟随滚动;
3.font 字体
font-weight 字体加粗
normal（默认值。标准的字符）/ lighter（更细的字符）/ bold（粗体字符）/ bolder（更粗的字符）
也可以用数字代替，取值100～900，定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
font-style 字体样式
normal （正常显示）/ italic（文本斜体）/ oblique （文本倾斜）
font-size 字体大小
font-size：数值px;
谷歌最小显示字体为12px，小于12px的，都按照12px处理
不设置的情况，一般默认为16px的大小
解决方案：截图，作为图片显示
font-family 字体
font-family：字体样式名字 ;
中文常用：微软雅黑、宋体、苹方 （中文必须写在引号内）
英文常用：Arial、Helvetica
首选字体放在前面，备选字体放在后面
英文写在中文的前面，因为英文的字体里面没有中文的，但是因为中文有aoe拼音，所以对于英文也有字体的设计。
line-height 行高
line-height:具体数值;
- 具体数值 px
- 倍数：该倍数是根据字体大小来进行计算的
font复合样式
- 字体大小和字体
font：font-size font-family;
- 这里注意一下，当字体大小和行高一起出现时，记得把他们写在一起，并且用斜杠连起来，字体大小/行高
font：font-size/line-height font-family;
- 除了字体大小和行高要写一起外，其他的书写顺序都可以
font：font-style font-weight font-variant font-size/line-height font-family;
4.text 文本设置
text-color 文本颜色
color:#f00;
三种方式:关键词、rgb、十六进制颜色
text-align 文本对齐方式
left（居左） / right（居右） / center（居中）
扩展：文字两端对齐
text-align:justify
text-align-last: justify
text-indent 首行缩进
text-indent:具体数值;
text-indent:16px;
text-indent:1em;
单位：em 或者 px
em -> 1em = 当前设置的这个元素上的文字大小
text-decoration 文本修饰
none（去除）/ underline（下划线）/ overline（上划线）/ line-through （删除线）
word-spacing：具体数值; 词间距
浏览器怎么知道什么是单词？你要自己用空格间隔开来，这时候才有效果
间隔 = 空格大小+词间距
在宋体的情况下，一个空格 = 字体大小的一半，但是不是所有字体都是
letter-spacing:具体数值; 字间距
空格同样也是字符，所以也会有字间距
数字和英文不会自动换行，只有中文可以自动换行这时候怎么办？
- word-break：break-all; 强制换行
- white-space:nowrap; 强制不换行
white-space: 是否换行
nowrap 不换行 / wrap 换行（默认）
文本溢出处理
white-space:nowrap;
overflow:hidden; /*溢出处理:隐藏*/
text-overflow:ellipsis; /*文本溢出处理:以省略形式显示*/
文本溢出处理(多行处理)：
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3; /* 出现的行数！*/
