6.（伪类和行高的补充）补充与浮动

１   伪类

２   行高：

定义：

应用：将行高设置等于容器的高度可以让文本垂直居中

原理：为什么行高等于容器的高度可以让文本垂直居中。

文本中的各条线。

２.1  补充：

1.0行高是可以继承的。

2.0行高的单位：

取值：

a.具体的像素值。

  b.使用em

em指的是当前标签设置的字体大小。

比如当前标签字体大小为16px，那么2em=32px，如果当前标签字体大小为20px，那么3em=60px;

c.使用%百分号：

与em一样，都是以当前标签的字体大小为基数，如果大小18px，那么line-height:200%;line-height: 36px;

d.可以什么单位都不带：

与em一样，也是当前标签的字体大小为基数。

注意：

1.0在设置行高的时候，如果单位是em或者%，那么将来行高会先计算出来结果以后再继承给子元素。

2.0在设置行高的时候，如果单位是没有，那么将来行高会先继承给子元素，然后再计算出行高。

２.2  浏览器的补充：

浏览器的默认字体大小是多小？

谷歌默认大小是16px.

２.3  行高与font的关系

font: font-style font-weight font-size/line-height font-family.

３   margin两种特殊的现象：

３.1  外边距的合并现象：

如果两个div上下排序，给上面一个div设置margin-bottom，给下面一个div设置margin-top，那么两个margin会发生合并现象，合并以后的值较大的那个。

３.2  margin塌陷现象：

如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移。

解决方案：

1.0给大盒子加一个边框

2.0给大盒子设置一个overflow属性。

3.0浮动也可以

二.  浮动。

１   浮动的初体验

问题：在页面上有两个盒子，一个盒子靠着屏幕左侧显示另一个盒子靠着屏幕的右侧显示？

作用：解决一行中显示多个盒子的问题（并且这些盒子的位置可控。）

浮动的代码：

float:left;

float:right;

 

２   浮动的特点

标准流：就是浏览默认摆放盒子的标准。

２.1  浮动的元素会脱离标准流：

如果一个元素按照正常的标准流来显示，会在html中所属的位置占位，后面的元素会紧跟着它。但是浮动脱了标准流，将来在看到浮动的元素之后，不能以正常的标准流来进行判断。（在标准流中不占位置了，它是在标准流之上）

２.2  浮动以后的元素会覆盖在标准流的元素之上。

２.3  浮动规则：浮动找浮动，不浮动找不浮动

浮动找浮动：只有写在同一个结构下面的浮动才会浮动找浮动。

 

２.4  浮动显示的位置与原本不浮动之前的位置是对应的：

２.5  浮动的重点：浮动的元素只会影响下面的元素，不会影响上面的元素：

２.6  浮动的元素会改变显示方式：

不管元素是行内元素还是块级元素将来在显示 的时候都会在同一行中显示。

浮动以后的元素可以设置宽高。

总结：浮动以后的元素的显示方式与行内块级元素一样。