1、背景属性
1）background-color属性：背景颜色，默认值为transparent透明
关键词|十六进制色值|rgb(r,g,b)|rgba(r,g,b,a)
背景颜色应用于内容区、padding、border区域
2）background-image属性：背景图片
语法：background-image: url(图片的路径);
background-image: none; 表示无背景图，默认值
3）background-repeat属性：背景图是否重复
background-repeat: repeat; 默认值，背景图在水平方向和垂直方向重复
background-repeat: repeat-x; 背景图在水平方向重复
background-repeat: repeat-y; 背景图在垂直方向重复
background-repeat: no-repeat; 背景图不重复
4）background-position属性：背景图的位置
语法：background-position: xpos ypos;
属性值：
关键词：left|center|right top|center|bottom
保证不超过两个关键词，一个是水平方向，一个是垂直方向；如果只出现一个关键词，另一个关键词默认center
长度值：图像的左上角0px 0px，负值向盒外，正值向盒内
百分比：图像在左上角0% 0%，右下角100% 100%
如果只有一个百分比数值，这个值作为水平方向的值，垂直方向将假设为50%
5）background属性：
background: background-color background-image background-repeat background-position;
注意：如果某一个属性不需要可以省略
2、css的三大特征：
1）层叠性
1）样式冲突，遵循就近原则
2）样式不冲突，不会层叠，但会叠加
2）继承性——子元素会继承父元素的样式
可以继承的属性：
字体系列属性——font-family字体系列属性、font-size字号属性、font-weight文字加粗属性、font-style文字的风格属性、line-height行高属性
文本系列属性——text-indent文本缩进属性、text-align文本水平对齐方式属性、color文本颜色属性
列表中list-开头的属性
3）优先级
选择器的权值越大，优先级越高；权值相同时，谁在后面显示谁
基本选择器权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100）
复合选择器权值计算方式：组成复合选择器的所有单一选择器的权值累加
.box div{ } 权值：10+1=11
#box .box p{ } 权值：100+10+1=111
行间样式的优先级高于id选择器的优先级；
继承样式的权值为0，子元素中设置的样式，会覆盖继承到的样式；
在样式中定义!important，优先级高于行间样式;
3、标签分类
标签分类——行级标记、块级标记、行块标记
1）行级元素 inline-level
常用的行级元素：span、b、i、em、strong、a、del、sub、sup等
默认宽度随元素的内容变化而变化；
默认高度由内容撑开；
不会独立成行，相邻的行内元素会排列在同一行中，直到一行拍不下，才会换行；
换行和空格会被解析；
具有部分盒模型特征。
使用：一般用来容纳文本和其他内联元素，通常被包含在块元素中使用。
2）块级元素 block-level
常用的块级元素：h1、h2、h3、h4、h5、h6、p、div、ul、li、ol、dl、dt、dd等
默认宽度撑满父元素的宽度；
默认高度由内容撑开；
垂直布局；
具有盒模型特征。
使用：块级元素中可以添加块级元素、行级元素、行块元素
3）行块元素 inline-block
常用的行块元素：img、input等
具有块级标记的特征：可以设置宽、高、内填充、外间距
具有行级标记的特征：默认横向显示，直到一行排不下才会换行；换行和空格会被解析
4、框类型转换——display属性
display: none; 元素不会被显示——隐藏元素，不占位
display: block; 元素的显示，将元素显示为块级元素，具有块级元素的特征
display: inline; 将元素显示为行级元素，具有行级元素的特征
display: inline-block; 将元素显示为行块元素，具有行块元素的特征
5、浮动
1）什么是浮动？
文档流：可以显示的对象在排列时所占的位置
浮动：使元素脱离正常文档流，按照指定方向发生移动，直到碰到它的父元素边界或另外一个浮动元素的边框为止
注意：元素的水平方向浮动，元素只能左右移动而不能上下移动
2）浮动属性：
float: left; 元素向左浮动
float: right; 元素向右浮动
float: none; 默认值，元素不浮动
3）浮动的特性：
浮动会使元素脱离正常文档流；
浮动元素可以提升层级；
浮动可以使行级元素支持宽高；
浮动可以使块级元素由内容撑开；
元素添加浮动之后，不占位，父级盒高度为0
4）浮动带来的影响
元素浮动以后，脱离正常文档流，导致父元素高度塌陷，会影响与父元素同级的后续元素的正常布局
5）清浮动的几种方法：
（1）为浮动元素的父级盒加固定的高度——不够灵活
（2）为浮动元素的父级盒加浮动——会产生新的浮动问题
（3）为浮动元素的父级盒设置overflow属性，属性值可以是hidden|scroll|auto——可能会导致内容显示不完全；代码简洁
（4）在浮动元素之后，跟浮动元素呈并列关系的位置，加一个空div，在空div上添加一个属性clear: both;——代码冗余；通俗易懂、书写方便
（5）推荐方式：给浮动元素的父级盒加类名.clearfix
.clearfix{ *zoom:1; }
.clearfix::after{
content: "";
display: block;
clear:both;
visibility: hidden;
height: 0;
}
不会在结构上产生冗余代码，可以重复使用，符合闭合浮动思想，结构语义化正确
6、overflow属性——溢出隐藏，包含水平方向和垂直方向
overflow-x属性：只包含水平方向
overflow-y属性：只包含垂直方向
overflow: visible; /*溢出显示，默认值*/
overflow: hidden;/*溢出隐藏*/
overflow: scroll; /*溢出显示滚动条*/
overflow: auto;/*自动*/
overflow: inherit; /*继承*/
7、clear属性——清浮动
clear: left; 清除左侧浮动
clear: right; 清除右侧浮动
clear: both; 清除两侧浮动