2020.8.28

剩下的选择器以及一些布局。

伪类选择器

伪元素选择器
：first-letter 选择文本的首字母

：first-line 选择文本的首行

：after 在元素前面添加内容

：before 在元素后面添加内容

选择器总结
什么是选择器？

选择器：描述后面的样式施加到哪些目标，或者根据某个依据来选择应用的样式。根据选择依据的不同，就产生了不同的选择器

1、元素选择器

Div{background-color:red}

2、id选择器

根据元素的id属性来选择

书写格式是：#idname{xxxxx}

#username(font-size:25px)

3、类选择器

根据元素的class属性来选择

书写格式是：.Classname{xxxxxx}

.passwd{font-size:26px}

4、属性选择器

根据属性的特征来选择应用样式的目标，从这个意义上讲，它包含了id选择器和类选择器

5.关系选择器

根据元素间的家族关系来选择目标
这些细节我们有可能记不住，没有关系
忘记的时候看一下
你能够认识它就行
6.伪元素、伪类选择器
伪元素：其效果等同于增加一个元素，所以称之为伪元素
伪类：其效果等同于增加一个类，所有称之为伪类
7.组合选择器
多个选择器如果想应用同一个样式，可以用逗号隔开

布局
文档流

所谓文档流就是从左向右，从上到下的布局

定位

默认的文档流很多时候不能满足我们的要求，那么我们就需要更丰富的布局手段，这个时候就需要定位

定位方式有 static、fixed、relaticve、absolute

Static静态定位（默认）

无定位，元素正常出现在（文档流）中
不受left、right、top、bottom的影响

Relative 相对定位

absolute 绝对定位

被绝对定位的块会被单独的从网页摘出来

Fixed 固定定位

z-index
为了处理样式重叠事件，我们需要用到z-index
数值越大，等级越高（999）

定位总结

(1) 标准文档流按照从左到右，由上到下的方式排列元素<如果想要改变默认的布局方式，就需要用到relative,(Absolute,fixed等定位方
(2) relative 是相对于原来的位置进行偏移
(3) absolute 是相对于它的父容器(上一级)进行偏移
但是它的父容器也必须不是默认定位(static)，否则的话会一直顶到网页的最顶部
(4) fixed是相对于整个页面进行偏移
（5）relative不会从标准文档流里脱离，但是absolute和Fixed是都会从文档流里脱离出来

浮动

通过设置float使得元素从原本的文档流里脱离出来
感觉像浮在原本的文档流上面，所以叫它浮动

案列：

代码实现：

我们做这个案例的时候，会遇到这种情况：

这是因为div5被浮动的div2，div3，div4覆盖了，但还是可以通过
调试工具查看到
那么怎样能让它正常显示呢
在div4后面加上一个clear
.clear{ clear:left;