一.昨日内容总结
1.盒模型及其属性
2.文本级标签、行内块、块级标签
3.继承性、层叠性、权重
4.浮动四大特性
# 浮动元素脱离标准文档流
# 贴靠
# 字围效果
# 自动收缩或紧缩
二.今日内容回顾
1.浮动元素的问题和解决问题
1）问题：
浮动元素确实能实现我们页面元素并排的效果，同时他也带来了页面布局极大的错乱。
如不会自动填充父盒子的宽度，导致父盒子不能占位，后边元素就会和浮动元素重叠。
2）清除浮动
（1）、给父盒子设置高度
（2）、在浮动元素附近加clear：both标签属性
（3）、伪元素清除法：推荐，在父元素上面加
.clearfix:after{
content：'.'；
display：block；
visibility：hidden；
height：0;
clear:both; }
( 4 )、overflow：hidden
none、hidden、scroll、auto、inherit
父盒子变为BFC，会自动将将子盒子中的浮动元素等包裹。
注意：对于超出父盒子的部分会隐藏（父盒子宽度一定的情况下）
（5）、margin塌陷问题：
margin：0 auto；0是垂直方向为0，auto是水平方法。
1）margin：0 auto；是盒子水平居中，必须有width。文本水平居中用text-align：center
2）margin：0 auto；标准流下用，浮动、绝对定位、固定定位不能用（但是他的儿子可以用）。
margin属性表示兄弟盒子之间的关系，padding属性表示是父子盒子至之间的关系、
案例：此时的解决方案只有一种。就是使用父亲的padding。让子盒子挤下来。
给父亲加border，再利用儿子的margin-top也行，但是没有这么干的。
2. 文本属性、字体属性、颜色介绍
1） 文本属性
（1）文本的对齐方式：none | center | left | right | justify
（2）文本的颜色：color
（3）文本的装饰：text-decoration： none | underline | overline | line-through | inherit
（4）文本首行缩进：text-indent：1em。。。
（5）行高 line-height
2） 字体属性
（1）字体大小：
font-size，inherit
（2）字体粗细
font-weight：none|bold|border|larger|100~900（400=normal，700=bold）
（3）字体家族：
font-family：
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体
3） 行高 line-height
针对单行文本垂直居中
公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。
针对多行文本垂直居中
行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px
第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
4） font-faimly
。。。。
font：能将font-size，line-height，font-famliy三合一。
font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5） 颜色
三种表示法：单词，RGB，十六进制
rgb（0,0,0） rgba（0,0,0,0.5）红、绿、蓝
十六进制：#ff0000 ->#f00;#112233->#123
三、预习和扩展
1.background
1) background-color
2) background-img
3) background-repeat
2. 绝对定位、浮动、标准流
标准流可以挤占绝对定位、浮动空间，但是反之不行。
浮动元素之间相互贴靠不挤占
绝对定位之间相互挤占
绝对定位可以挤占浮动元素，反之亦然。
3.postion:absoulte的几点结论
结论1：未指定left/top/right/bottom的absolute元素，其在所处层级中的定位点就是正常文档流中该元素的定位点。
结论2：通过对left/right/bottom/top，由于没有position：static以外的父元素，此时absolute元素可以去任意它想去的地方。
1）单独设置left时，绝对定位位置距离body左边界为left设置值，但top依然在正常文档流中该元素的定位点。
2）单独设置right时，绝对定位位置距离body右边界为rigth设置值，但top依然在正常文档流中该元素的定位点。
3）单独设置top时，绝对定位位置距离body上边界为top设置值，但left依然在正常文档流中该元素的定位点。
4）单独设置bottom时，绝对定位位置距离body下边界为bottom设置值，但left依然在正常文档流中该元素的定位点。
结论3：父相子绝，以父类的位置为定位点，主要是其忽略父亲padding的左上角
有缺点，父类无缘无故多了个relative属性。