复习
CSS ： 负责样式层，层叠式样式表cascading style sheet。CSS2.1，最新版本CSS3。
CSS选择器： 选择哪些元素加样式。基本选择3种：标签p、id选择器#id、class选择器.；高级选择器4种：后代选择器div p 、交集选择器div.haha 、并集选择器div,p 、通配符*
id选择器：全页面id唯一；
class选择器：同一个标签可以带多个class：
class选择器不要求页面唯一
- 继承性：
哪些属性能继承：color、font-、text-、line-开头的。
不能继承的：background-color、盒模型的属性、浮动、定位
body{
font-size:12px;
}
层叠性：
遇见冲突，听谁的。有一个非常严密的图。!important提升权重，要知道!important能提升什么，不能提升什么？比如不能影响就近原则：离得近的就是近的，远的写!important没用；不能把继承来的提升权重：选中了的就是选中了的，继承来的!important也无法干掉选中了的。文本属性：
font-weight:bold;
font-weight:700;
font-style:italic;
text-decoration:underline;
font-size:12px;
line-height:24px;
font-family:”Consolas”,”Microsoft Yahei”,”SimSun”;
font:12px/24px ”Consolas”,”Microsoft Yahei”,”SimSun”;
- 盒模型
width:200px; /*盒子内容的宽度*/
height:200px; /*盒子内容的高度*/
padding:10px; /*内边距*/
border:1px solid red;
margin:40px;
我们在这里补充强调一下：padding区域有背景颜色；并且现在的知识水平，你不能给padding
区域单独设置颜色；
padding: 10px 20px 30px 40px;
上、右、下、左
padding:10px 20px 30px;
上、左右、下
边框的三要素：
border-width:1px;
border-style:solid;
border-color:red;
还能继续拆：
border-top-style:dashed;
三要素的写法可以上右下左：
border-width:1px 2px 3px 4px;
- 浮动：我们还没有科学的介绍，一些性质还不知道，没关系作业已经能做了。因为浮动是干嘛的我们已经知道了：制作并排的。
标准文档流中元素分为两种：
block-level ： 能够设置宽高、不能并排，比如div、h、p、li、dt、dd
inline-level： 不能设置宽高、能并排，比如span、a、b、u、i
浮动，就能让元素又能并排，又能设置宽高。
深入了解浮动的性质
1.浮动的元素脱离标准流，没有标准流的行块之分了
脱离标准流一共就3个方法：
浮动：
float:left;
绝对定位：
position:absolute;
固定定位：
position:fixed;
浮动的元素已经脱离了标准流，所以没有inline、block之分了。
span在标准流中一个经典的行内元素，但是浮动了，就可以不转块直接设置宽度、高度。
1
.no1{
float: left;
width: 300px;
height: 50px;
background-color: orange;
}
div在标准流中是一个经典的块级元素，不设置宽度在标准流中是自动撑满父亲的width。但是浮动了，就不自动撑满了，而是自动收缩了，收缩为内部文字的大小了：
2.依次贴边
左浮动：
父盒子的左边框内部 ← 老1 ← 老2 ← 老3 ← 老4
如果之前的兄弟已经不足以容纳自己，比如老4没有足够的空间并排了，那么将依次寻找老3、老2、老1、父亲的边框去贴：
2.2 依次贴边
左浮动：
父盒子的左边框内部 ← 老1 ← 老2 ← 老3 ← 老4
如果之前的兄弟已经不足以容纳自己，比如老4没有足够的空间并排了，那么将依次寻找老3、老2、老1、父亲的边框去贴：
但是不钻：
3.竖直方向上的margin塌陷现象消失
margin塌陷是标准流的性质，因为浮动脱标了，就没有这个事儿了。
4.让出了标准流
→ 浮动
→ 没有浮动
注意，这个性质没啥用，工作中制作“压盖”使用定位，而不是用这个浮动的小技巧。
橙色盒子浮动了，让出了标准流的位置，标准流的光标还在页面左上角，所以蓝色盒子就渲染在左上角，被橙色盒子压住了。
5.字围
清除浮动
1.父亲不能被浮动的儿子撑出高
下面的代码，no1、no2都浮动了，box就不能被儿子撑出高度：
因为父亲只能被标准流的元素撑高。
2.治这个病的一个偏方
有一个属性叫做
overflow:hidden;
能够解决事情。
现在先来学习overflow:hidden;的本意是什么
overflow是英语“溢出”的意思；hidden就是隐藏的意思。
这个属性的意思，就是让溢出边框的内容隐藏。
就如同橘子皮就是橘子皮，但是我们发现可以治感冒，就是世界上存在很多这样的事情，八竿子打不着的事儿，居然有联系。
overflow:hidden;是用来隐藏掉溢出边框的内容的，是用来变魔术的。但是我们发现，overflow:hidden;有神奇的别的用处，就是能够让父亲认识自己脱标的儿子，能够让父亲被自己脱标的儿子撑出高度。
→不能被撑出高了，解决办法： overflow:hidden;
→ 脱标了
→ 脱标了
3.有高度的盒子能够管住自己内部的浮动元素
有高度的盒子，能够管住自己的内部的浮动元素，不会影响别人内部的浮动元素，也不会受别人影响。
1
2
3
4
1
2
3
4.清除浮动方法1：clear:both;
我们发现，有高度的盒子可以管住自己的儿子，但是如果父盒子没有高度，那么序列就乱套了，第二个序列就去追随第一个序列了：
解决办法挺简单，就是给后面的盒子加上
clear:both;
clear就是清除意思，它的值可以是：
clear:left; 表示清除左浮动带来的影响
clear:right;表示清除右浮动带来的影响
clear:both；表示清除所有浮动带来的影响
这个东西不好用，原因是：
- box还是没有高
- margin失效
5.清除浮动方法2：隔墙
隔墙法是非常常用的，在网页中两个非常大的部分，我们总希望之间隔一堵墙，把两部分内部的浮动都关在里面，不要相互影响，小技巧就是margin依旧失效，可以用墙的高度来模拟间隔。
1
2
3
4
1
2
3
margin虽然失效，但是可以用小技巧来弥补，可以用墙的高来当做间隔。
但是盒子依然没有高。
6.清除浮动方法3：内墙法
cl就是clear:both;
1
2
3
4
1
2
3
现在margin好用了，并且盒子也有高了，所有的事情都解决了！但是还是有问题：
HTML标签有点放置的太多了。这些标签页没有语义，看起来不爽。
7.清除浮动方法4：overflow:hidden;
→ 这个盒子没高，就写上overflow:hidden;
1
2
3
4
→ 这个盒子没高，就写上overflow:hidden;
1
2
3
总结：记住，清除浮动的方法有很多，但是很多都是在面试中有意义。工作中：
- 我们总喜欢给内部有浮动的父盒子加上overflow:hidden;
- 我们总喜欢在两个大部分之间隔外墙