python全栈开发day40-浮动的四大特性，浮动带来的问题和解决问题，文本属性、字体属性和颜色介绍

一.昨日内容总结

　　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属性。　