web前端第七天

伪元素、伪类选择器
伪类选择器：

伪元素选择器：
:first-letter 选择文本的首字母
:first-line 选择文本的首行
:after 在元素前面添加内容
:before 在元素后面添加内容
选择器总结
什么是选择器？
选择器：`描述后面的样式施加到哪些目标，或者说根据某个依据来选择应用的样式 。
根据选择依据的不同，就产生了不同的选择器

1. 元素选择器
   Div{ background-color:red}
   2．id选择器
   根据元素的ID属性来选择
   书写格式是: #idname{ xxxxx}
   #username{font-size:25px}
   3．类选择器
   根据元素的class属性来选择
   书写格式是： .classname{xxxxx}
   .passwd{font-size:20px}
   4．属性选择器
   根据属性的特征来选择应用样式的目标，从这个意义上
   讲，它包含了id选择器和类选择器
   [title]:选择设置了title属性的元素
   [title=”tt”]:选择title属性等于“tt”的元素
   [title^=”tt”]:选择title属性以“tt”开头的元素
   [title$=“tt”]:选择title属性以“tt”结尾的元素
   [title~=”tt”]:选择title属性包含完整单词“tt”的元素
   [title*=”tt”]:选择titlt属性包含“tt”的元素
   5.关系选择器
   根据元素间的家族关系来选择目标
   这些细节我们有可能记不住，没有关系
   忘记的时候看一下
   你能够认识它就行
   6.伪元素、伪类选择器
   伪元素：其效果等同于增加一个元素，所以称之为伪元素
   伪类：其效果等同于增加一个类，所有称之为伪类
   7.组合选择器
   多个选择器如果想应用同一个样式，可以用逗号隔开
   布局
   文档流
   所谓文档流就是按照元素的顺序从左到右，由上而下的方式排列

定位
默认的文档流很多时候不能满足我们的要求，那么我们就需要更多的、
更丰富的布局手段，这个时候就需要定位了
定位方式有static、fixed、relative、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;}