这是我参与8月更文挑战的第5天，活动详情查看： 8月更文挑战
五、背景
1.背景颜色
background-color:颜色值
2.背景图片
background-image:url(图片路径)
元素内部的其它元素或者文本，都会压在背景图片的上面显示
3.背景图片的平铺
背景图片比较小，元素本身比较大，背景图会在元素内部显示多个
background-repeat: repeat; 默认值 同时在x,y轴平铺
no-repeat 不平铺
repeat-x 单独在x轴平铺
repeat-y 单独在y轴平铺
4.背景图片的定位
background-position:x y
取值 以px为单位的数字
%
关键字 x(left/center/right) y(top/center/bottom)
可以只取一个值
background-position:x; y默认为center
5.背景图片的尺寸
background-size:width height;
取值 px为单位的数字
%
可以只取一个值，px/% 同时设置宽高
contain 图片等比缩放，让容器完全包含背景图，背景图要显示完整
cover 图片等比缩放，让容器完全被背景图覆盖，不许有空白区域
6.背景的简写方式
background:color img repeat position;
没有size，位置可以自由更换
最简方式 background:color/img;
六、渐变
渐变是指多种颜色，平缓变化的一个效果
色标:颜色+颜色出现的位置
一个渐变最少两个色标
渐变的分类
1.线性渐变，以知县的方式平缓填充渐变色
2.径向渐变。以圆的方式平缓填充渐变色
3.重复渐变，重复执行径向渐变或者线性渐变
1.线性渐变
以直线的方式平缓填充渐变色
background-img:linear-gradient(方向，色标1，色标2)；
方向 to top/to right/to bottom/to left 写终点
色标 1.颜色 %
2.颜色 px
3.颜色 不写位置，所有颜色平均分配
2.径向渐变
以圆的方式平缓填充渐变色
background-image:radial-gradient(半径 at 圆心x 圆心y，色标1，色标2 )
半径:以px为单位的数字
圆心:1，以px为单位的数字
2. %
3.x:left/center/right y:top/center/bottom
色标 1. 颜色 %，是半径的百分比
2. 颜色 px，不予半径关联了
3. 颜色 不写位置，所有颜色平均分配
3.重复渐变
重复执行径向间的或者线性渐变
1）重复线性
background-image:repeating-linear-gradient(方向，色标……)
2）重复径向
background-image:repeating-redial-gradient(半径 at 圆心 x 圆心 y， 色标……)
4.低版本兼容问题
需要每种内核都写一遍，那么不同浏览器在执行代码，
只会执行自己对应内核的代码，其它3行代码屏蔽
-moz- firefox
-webkit- chrome/safari
-o- opera
-ms- IE
如果使用兼容性的写法，编写线性渐变
方向必须写起点，不加to
background: -moz-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);
background: -webkit-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);
background: -o-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);
background: -ms-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);
七、文本格式化
1.字体属性
设置字号大小
font-size: px/em/rem/pt
设置字体系列
如果字体中有空格，建议使用双引号
font-family:字体1,字体2,字体3.....
字体加粗
font-weiht:关键字
| 关键字 | 关键字的值 |
|---|---|
| lighter | 300 |
| normal | 400 |
| bold | 600 |
| bolder | 700 |
字体样式
font-style:normal/italic
小型大写字母
font-variant:small-caps;
简写方式
font:Style variant weight size family;
最简方式
必须写的两个值
font:size family;
2.文本属性
字体颜色
color:
文本的水平对齐方式
text-align:left/center/right/ justify/*两端对齐*/
margin:0 auto/*让块级元素水平居中，设置给块级元素，让块级元素本身水平居中*/
text-align:center/*设置在块级元素上，让内部文本，行内元素，行内块元素水平居中
不会让内部的块级元素水平居中*/
设置元素内部文本，行内的垂直对齐方式
/*行高的特性：如果行高大于字号大小，文本会默认在行高范围的垂直居中显示*/
line-height:px/*为单位数字，一般会填写容器高度，让文本在容器中垂直居中
不带单位的数字，行高时字号倍数
不建议给多行文本设置行高，不然溢出的文本每一行行高也会根据设置判定*/
文本线条修饰
text-decoration:
underline;/*下划线*/
overline;/*上划线*/
line-through;/*删除线*/
none;/*去掉所有线条 a标签去除下划线*/
文本阴影
text-shadow:h-shadow/*水平偏移量*/ v-shadow/*垂直偏移量*/ blur/*模糊程度*/ color/*阴影颜色*/;
八、表格
1.常用属性
table 尺寸、文本、背景、边框、内外边距都有效
边框只是table的最外为的边距
td/th 尺寸、文本、背景、边框、内边距都有效
外边距无效
2.table特有属性
1）垂直对齐
设置内部内容的垂直对齐方式
vertical-align:top/middle/bottom
/*只有table中，使用vertical-align设置内容的垂直对齐方式
其他元素失效，其他元素使用line-height*/
2）边框合并
border-collapse:separate;/*默认值，边框分离状态*/
collapse/*边框合并*/
3）边框间距
边框必须是分离状态 border-collapse:separate;
border-spacing:v1;/*水平和垂直间距同时设置*/
v1 v2;/*分别设置水平和垂直*/
4）设置表格的显示规则
table-layout:auto;/*默认值，表格自动布局
列的尺寸有内容和设置尺寸，哪个大听哪个*/
fiexd /*表格固定布局，设置的尺寸是多少，表格就是多少
内容比较大，内容溢出*/
| 表格自动布局 | 表格固定布局 |
|---|---|
| 单元格大小，会自动更具内容和设置的尺寸进行调整 | 单元格大小定死 |
| 表格内容比较多时，加载速度慢，效率低 | 不管内容多少，加载速度快 |
| 自动布局比较灵活 | 固定布局不灵活 |
| 适用于不确定每列大小，并且不复杂的表格上 | 适用于确定每列大小的表格 |
