css属性样式整合
font-size 字体大小
常用色值：#000 黑色；#fff 白色；#ccc、#333、#2f2f2f、#666、#ddd 灰色；
rgb表示法：color:rgb(255,255,255);
rgba表示法：color:rgba(255,255,255,0.5)第四位值表示透明度，0完全透明，1不透明
网页默认的字体大小是16像素16px
浏览器支持的最小字体大小是12px，也就是设置小于12px，默认都会以12px大小来显示
font-weight 字体的粗细
font-weight:400;正常大小
font-weight:700;加粗
font-style字体样式
font-style: normal; 取消倾斜
font-style: italic; 倾斜
font-family字体类型
浏览器默认字体类型为“微软雅黑"
font-family: "Microsoft Yahei"; 微软雅黑
font-family: "SimSun"; 宋体
@font-face自定义字体
css文本属性
text-decoration属性
text-decoration：none; 去掉下划线
text-decoration: underline; 加上下划线
text-decoration: line-through; 删除线
text-decoration: wavy underline red 1px; 波浪线
text-indent:2em 首行缩进
line-height行高
line-height:主要用于垂直居中
复合用法
font：font-style font-weight font-size line-height font-family
text-align 行内内容水平位置
相对于父元素的相对位置，行内元素生效，块级元素不生效
word-spacing 只针对英文单词有效果汉字没效果
字体间距，word-spacing:50px;
letter-sapcing:50px; 中文间距
标准盒模型和怪异盒模型的转换
box-sizing: border-box; 怪异盒
box-sizing: content-box; 标准盒
display属性+背景属性+其他属性
一、display属性的作用
display 属性可以设置元素的内部和外部显示类型
元素外部显示类型
block 块级
块级元素的特点：
(1) 块级元素独占一行
(2) 块级元素能设置宽和高
(3) 块级元素在没有设置宽度的情况下，默认为父元素的宽
(4) p标签不能包裹p
inline-black 行内块
行内块元素的特点：
(1)<img> 、<video> 、<audio> 、表单元素 以上元素本质叫：可替换元素
(2) 行内块元素在一行显示，占不下的时候，换行显示 (3) 相邻的行内块级元素之间会有空白间隙
(4) 行内块级元素在没有设置宽和高的情况下，默认为本身的长度
(5) 可设置宽和高
去掉行内块级元素之间的空白间隙
解决办法
- 给父元素添加font-size:0; 给子元素添加正常的文字大小font-size:16px;
- 给元素加上float；
- 图片之间的空隙，一张图图片的话，用display:block; 多张的话，用浮动float;
inline 行内
行内元素的特点：
(1) 行内元素在一行显示，站不下的时候，换行显示
(2) 宽和高对行内元素不起作用
(3) 行内元素中不能放块级元素，只能放行内元素或文本内容
(4) a标签中不能再放a标签，a标签中能放块级元素
元素的转换
display: block; 转换为块级元素
display: inline; 转为行内元素
display:inline-black; 转为行内块级元素
display:none; 和 visibility: hidden;
dispaly:none; 元素隐藏后，不占用页面位置，就当没出现过；
visibility:hidden; 元素隐藏后，占用页面位置，会保存位置空间；
二、背景属性background
1、背景图片 background-image
background-image: url()；
解决background-image平铺现象
- background-repeat: repeat; (x,y轴均平铺)；
- background-repeat: repeat-x; (x轴平铺)；
- background-repeat: repeat-y; (y轴平铺)；
- no-repeat; (不平铺)；
背景图片的位置background-position: 左边距离 上边距离;
扩展（background-size:宽 高; 控制图片的大小）；
左边距离就是与盒子左边的距离，上边距离同左；
百分比%，background-position: 20% 40%;
计算：左边距离：（盒子的宽+左右的padding-背景图的宽）*百分比 ；
上边距离：（盒子的高+上下的padding-背景图的高）*百分比 ；
位置也可以用负值；
关键字：background-position: center;left;right;top;bottom;
简写：background: red url() no-repeat center;
简写，做覆盖属性用；
2、精灵图
- 用负值，background-position: 图的位置；
- 在文本前面用个,然后把span改成，行内块级元素，display:inline-block; span就是图的位置；
3、背景固定位置：background-attachment
- background-attachment: scroll; 默认值 一个动一个不动；
- background-attachment: fixed; 都不动；
- background-attachment: local; 都动；
4、background-size背景图大小
- background-size: contain; 让整个图片显示出来自适应大小；
- background-size: cover; 让图片占满整个盒子；
5、线性渐变
默认的是从上往下渐变
指定方向
background-image: linear-gradient(to right/上下左右/左上右下都可以, red , blue, yellow, rgba(255, 1.5, 1.5, 0.5),black);
度数控制方向
顺时针，background-image: linear-gradient(45deg, red,green,blue);
百分比渐变
background-image: linear-gradient(red 0%, blue 30%,yellow 70%);
转换中心点：（red 10%,30%,blue 50%）;
径向渐变 background-image: radial-gradient();
形状(圆形)：background-image: radial-gradient(circle, red,blue);
渐变中心位置：background-image: radial-gradient(circle at 50px 50px, red,blue);
渐变的边缘形状与容器距离渐变中心最近的一边相切
三、其他属性
1.鼠标效果
2.外轮廓：outline:10px solid red;
3.overflow:hidden;
