HTML css 中的选择器与定位布局的使用方法

3.8伪元素、伪类选择器

伪类选择器：

伪元素选择器：

:first-letter  选择文本的首字母

:first-line    选择文本的首行

:after       在元素前面添加内容

:before      在元素后面添加内容

3.9选择器总结

什么是选择器？

选择器：描述后面的样式施加到哪些目标，或者说根据某个依据

              来选择应用的样式

根据选择依据的不同，就产生了不同的选择器

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.组合选择器

多个选择器如果想应用同一个样式，可以用逗号隔开

4.布局

4.1文档流

所谓文档流就是按照元素的顺序从左到右，由上而下的方式排列

4.2定位

默认的文档流很多时候不能满足我们的要求，那么我们就需要更多的、

更丰富的布局手段，这个时候就需要定位了

定位方式有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是都会从文档流里脱离出来

4.3浮动

通过设置float使得元素从原本的文档流里脱离出来

感觉像浮在原本的文档流上面，所以叫它浮动

案例：

代码实现：

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

这是因为div5被浮动的div2，div3，div4覆盖了，但还是可以通过

调试工具查看到

那么怎样能让它正常显示呢

在div4后面加上一个clear

.clear{ clear:left;}