我们下午继续学习CSS的入门基础，搬上你的小板凳赶快进入吧！
一、背景（background）
Background-color：背景颜色
background-image （背景图片）
background-repeat（设置背景平铺）
repeat （默认值）
no-repeat （不平铺）
repeat-x （横向平铺）
repeat-y （纵向平铺）
background-position （设置背景位置）
设置具体值： left| right| top| bottom| cneter，设置具体值的时候不区分先后顺序，设置具体数字的时候，第一个值代表水平方向，第二个值代表垂直方向
background-attachment （设置背景是否固定）
background-attachment （设置背景是否固定）
二、行高line-height
行高：行高指的是文本基线与基线的距离。
行高的作用：当文字行高与父容器的高度一样的时候，文字垂直居中对齐。
行高单位问题：
行高单位 赋值 文字大小 行高值
PX 30px 20px 30px
em 3em 20px 60px
% 150% 20px 30px
不带单位 2 20px 60px
总结：当给父元素设置行高的时候，除了以PX为单位以外，其他的值都与文字大小有关，是与文字大小的乘积。
行高是可以继承的：
行高单位 设置行高 父文字 子文字 行高
px 40px 20px 30px 40px
em 2em 20px 30px 40px
% 120% 20px 30px 24px
不带单位 2 20px 30px 60px
总结：当父元素设置的行高值除了不带单位的情况下，都是先与父元素文字大小相乘，然后再被子元素继承。
浏览器默认文字大小为16px，行高=文字大小+上边距+下边距
三、盒子模型
Border
border- 边框的粗细
border-style: 边框的风格
dotted 点线
dashed 虚线
solid 实线
Border-color: 边框的颜色
边框的连写：
连写的时候后边的值不分前后顺序。
例如：border：1px solid red 等价于
border:red solid 5px
表格单元格合并：border-collapse:collapse; 表格单元格边框合并。
内边距(padding)
Padding-left 左内边距
Padding-right 右内边距
Padding-top 上内边距
Padding-bottom 底内边距
内边距简写：
Padding:10px; 四个方向内边距都为10px
Padding: 10px 20px; 上下内边距为10px 左右内边距为20px
Padding: 10px 20px 30px; 上内边距为10px 左右内边距为20px 下内边距为30px
padding:10px 20px 30px 40px; 依次方向为上右下左
盒子宽度问题：
影响盒子宽度因素：
※盒子边框影响盒子宽度
※定义的内边距的宽度
盒子的宽度=定义的宽度+边框+内边距
注意：以后进行页面盒子布局的实现，如果给盒子设置了内边距和边框，对应的要将定义宽度或者高度减去定义的内边距和边框的值。
盒子大小影响特殊地方：继承的盒子再父盒子宽度范围内，padding值不会影响该盒子大小。
四、外边距（margin）
解决外边塌陷的问题（当2个盒子发生嵌套关系时，给子元素定义外边距的时候，值会赋给外边的大盒子。）：给大盒子定义边框、给外边大盒子设置:overflow:hidden、Bfc 给外边父集元素设置overflow:hidden，会触动bfc.
五、文档流的特点
块元素独占一行、团队成员行内元素在一行上显示、自上而下
六、浮动(float)
用法:float:left|right
特点：浮动起来、不占位置（脱标）、如果多个盒子都使用了浮动，会在一行上显示、给行内元素使用浮动，可将行内元素转换成行内块、尽量用display转换行内块。
作用：文本绕图、制作导航栏、网页布局
七、清除浮动
额外标签法：在浮动元素后边加一个标签，清除浮动。
Overflow:hidden：在外边的父盒子上使用：overflow:hidden;如果有内容在盒子外，会被裁掉。
伪元素清除浮动
.clearfix:after{ Content:”.”; Display:block; Height:0; Visibility:hidden; Clear；both; } .clearfix{ Zoom:1; }
八、Overflow
Overflow:hidden 会将出了盒子的内容裁掉
Overflow：auto 当内容出了盒子之外，会自动生成滚动条，如果没有内容之外，则不生成滚动条。
Overflow:scroll; 不管内容有没有出盒子，都会生成滚动条。
Overflow: visible; 内容出了盒子会显示，不生成滚动条。
九、定位
静态定位(Position:static;) 静态定位就是标准流。
绝对定位（position:absolute;）
特点：
※ 给元素设置绝对定位，从浏览器左上角出发设置位置。
※ 给元素设置了绝对定位，元素会不占位置（脱标）
※ 当盒子发生嵌套关系时，如果父集元素没有设置定位，子盒子设置了绝对定位并赋值，子盒子的位置从浏览器左上角出发。
※ 当盒子发生嵌套关系时，如果父集元素设置了绝对定位，子盒子设置了绝对定位并赋值，子盒子的位置从父集元素左上角出发。
※ 绝对定位会将行内元素，转换为行内块。
相对定位(position:relative;)
特点：
※ 给元素设置了相对定位，位置是从自身位置出发。
※ 给元素设置了相对定位，还占据原来的位置（不脱标）。
※ 子绝父相（工作中使用最多），子元素绝对定位，父元素相对定位。
※ 给元素设置相对定位，不能将行内元素转换为行内块元素。
固定定位（position:fixed;）
特点:
※ 固定定位不占据原来的位置，会脱标。
※ 给元素设置固定定位之后，元素位置从浏览器左上角出发。
※ 可以将行内元素转换为行内块元素。
十、盒子居中显示
margin:0 auto; 只能让标准流的盒子居中显示。
定位的盒子居中显示
写法：先向左走父集元素的一半，再向右走（margin-left用负值）自己的一半。
十一、标签包含规范
※ div可以包含所有的标签。
※ p标签不能包含div、标题标签、列表标签。
※ h1可以包含其他标签。
※ 不推荐在行内元素中放其他元素。
十二、规避脱标流
使用margin-left（right）:auto;可以将盒子冲到父盒子的右边(左边)。
十三、内容移除文字（logo优化）
用text-indent:-2000px;用padding撑开盒子，使用overflow将文字隐藏。
十四、图片与文字垂直对齐
Inline-block vertical-align默认为Vertical-align:baseline;
十五、Css可见性
overflow:hidden; 将元素盒子之外的部分隐藏。
display:none; 将元素直接隐藏
Display:block; 将元素显示 (配合JS使用）
visibility:hidden; 将元素隐藏
Display:none;隐藏之后不占位置。
Visibility:hidden; 隐藏之后还占位置。
十六、CSS精灵图
Css精灵是一种处理背景图像的方式，可以加快网页的加载速度，降低服务器发送请求的次数
浏览器坐标：
从浏览器左上角出发，向右为正，向下为正。
Css精灵图配合background-position背景位置结合使用。