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：

如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体

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