一、上次内容回顾
1.CSS的三种引入方式：
行内式
内接式
外接式
链接式
导入式
2.基础选择器和高级选择器
1）标签选择器 p{}
2） id选择器 #nva{}
3） 类选择器 .nva{}
4） 通配符选择器 *{}
5） 后代选择器 div .nav{}
6） 子代选择器 div>.nav{}
7） 并集选择器 div，ul，ol{}
8) 交集选择器：第一个是标签选择器，第二个是类选择器
3.补充选择器
9 ) 属性选择器 label[for='user1']{}
10） 伪类选择器
爱恨准则 LVoe HAte
a:link{};a:visited{};a:hover{};a:active{}
11) 伪元素选择器
p:first-letter{};p:before{};p:after{}
二、今日内容总结
1.继承性和层叠性
继承：给父级设置的一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
记住：有一些属性是可以继承下来：color、font-*、text-*、line-*。主要是文本级的标签元素。
但是像一些盒子元素的属性，定位元素（浮动，绝对定位，固定定位）不能继承。
2.权重问题
（1）先看标签有没有被选中，如果都选中了，数权重（顺序：id 类 标签）
如果没有被选中表示继承来的属性，继承来的属性权重为0，跟选中的标签没有可比性
（2）如果都是继承来的属性，谁描述的近（距离内层目的标签最近的标签）就显示谁的属性。
如果描述的一样近，这个时候继续数数。
（3） i！important 不管是继承来的还是非继承来的，只要牵扯到数权重的问题，那么！important属性始终设置该属性权重为无限大。
3.盒模型及其属性
width：内容的宽度
height：内容的高度
padding：内容到边框的距离。加padding就要减盒子内容的宽或高。用于调整父子盒子之间的位置。
border：边框
margin：外边距：边框到另一个最近盒子边的距离。调整兄弟之间的位置。
计算盒模型：盒子的占据浏览器的宽度=width+padding+border
4.margin的塌陷问题
标准流的盒子，小的边距会掉到大的边距中
5.display none | inline | inline-block | block
行内标签：span、a、b、i、u、em。inline，基本全是文本级标签除了p
（1）在一行内显示
（2）不能设置宽、高
（3）它的宽高是内容的宽高
行内块：img、input。inline-block
（1）在一行内显示
（2）可以设置宽、高
块级标签：div、h系列、li、dt、dd、ul、ol、form、table。block
6.浮动
float：left | right
（1）浮动的元素脱标
如果浮动的元素排在首位，设置为浮动元素后，其他同级标准流元素会挤占设置为浮动元素之前的元素的位置。
（2）浮动的元素相互贴靠
ps：浮动的盒子，不会出现塌陷问题，可以使用margin调整父子盒子和兄弟盒子之间的位置
（3） 浮动的元素有‘子围’效果
（4） 收缩效果。
三、预习和拓展
1.标准流中一行内元素高低不等，底部对齐。而浮动元素的在其所在容器内靠左上对齐。
2.浮动元素不占用浏览器位置，整体布局主要是上下布局，主要通过标准文档流。
3.使用hover和display属性实现鼠标移动至父元素，子元素出现或消失
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .father1{ width: 100PX; height: 100PX; background-color: red; } .father2{ width: 200PX; height: 200PX; background-color: green; display: none; } .father1:hover .father2{ display: block; } </style> </head> <body> <div class="father1"> <div class="father2"> </div> </div> </body> </html>
display：none；隐藏作用，不占用位置。
visibility：hidden；隐藏作用，占用位置。要想不占用位置，用height=0，作用相当于设置display：none。
4.对浮动元素的字围效果的理解：
1） 浮动的脱标，只是脱离文档空间（块空间），对行框空间（文字内容撑开的空间）还是有影响，实际上是浮动元素和非浮动元素共享父级的行框空间。
2） 绝对定位的脱标，是彻彻底底的脱标，两个空间都脱离了。
5.清除浮动，实际上是清除浮动产生的影响，使得他重新占据空间。清除，浮动元素的父容器“塌陷”。
哪些情况会发生包裹？
比如行内框元素span包含文字
比如没有设置宽度和高度的一个浮动div块
比如没有设置宽度和高度的一个设置了display:inline的div
比如设置了display:inline-block的a标签
比如设置了overflow:hidden的元素
比如设置了position:absolute绝对定位的元素
它们的尺寸就由包容的元素决定
也就是说具有包裹性的有6种，行内框，浮动，display:inline-block的行内框，display:inline的块框，overflow:hidden，position:absolute