Web前端 清除浮动 伪元素 精灵图 滑动门 定位的作用

清除浮动的方法

        1.给浮动元素的父级盒子设置一个固定的高度

          优缺点：不够灵活，适用于高度固定的布局中

        2.为浮动元素的父级盒子设置浮动

          优缺点：会产生新的浮动问题

        3.为浮动元素的父盒子添加overflow属性；overflow的属性值可以为hidden,scroll,auto

          优缺点：可能会隐藏内容或触发不需要的滚动条；代码简洁

        4.在浮动元素之后，与浮动元素呈并列关系的位置，加一个不浮动块元素（空的div标签（div本身不浮动，没有尺寸）），在空的div标签上加上属性：clear：both;

          优缺点：代码冗余，通俗易懂，书写方便

            clear: left; 清除左侧浮动带来的影响

            clear: right;清除右侧浮动带来的影响

            clear: both;清除两侧浮动带来的影响

        5.推荐方式：用伪元素清除浮动，给浮动元素的父级盒加类名.clearfix，并在.clearfix中添加样式：

       

           .clearfix::after{

                 content:'';

                 display:block;

                 clear:both;

            }

            优缺点：不会再结构上产生冗余代码，可以重复使用，结构语义化正确

```

---

1）什么是伪元素

用css语言创造出来的标签

伪元素创造的标签是行级标签

2）如何创建伪元素

- element::before{ content:"伪元素的文本内容"; 属性名: 属性值; }

  element元素内部，内容之前，添加“伪元素的文本内容”

- element::after{ content:"伪元素的文本内容"; 属性名: 属性值; }

  element元素内部，内容之后，添加“伪元素

---

精灵图

### 概述

css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就

是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，

“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置

### 精灵图的原理

- 将页面中的背景图合并成一张图片

- 利用背景属性，使不同元素显示图片的不同部分

### 实现步骤：

1.测量图片大小

2.通过引入背景图片，用背景定位实现

## 2、css sprites的优缺点

* 优点：

1.减少网页的http请求，提高页面的性能

2.减少在图片上的命名困扰

3.更换网页风格方便

* 缺点：

1.必须要限定容器的大小

2.背景图位置需要计算

## 3、适用场景

适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。

---

         

# 三、滑动门

### 概述：

 css精灵图可以实现特殊形状的背景自由拉伸滑动，能适应不同字数的内容

滑动门核心技术就是利用背景属性（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

```html

滑动门实现：

        a  span

            a用来撑开左边的小括号

            span用来撑开右边的小括号

            给a设置padding-left: 让文字距离左边有点距离，美观

            给span设置padding-right 让文字距离右边有点距离，美观

            实际文字写在span里面，span的宽度由文字和内边距撑开

            a的宽度是由span撑开了

---

定位的作用

定位模式通过position属性来设置，以下为常用四种定位模式静态定位，相对定位，绝对定位，固定定位

## 1、position:relative相对对定位

相对定位

        相对于元素本身的位置进行一个位置调整，占位依然在原来的位置，也就是说，元素设置相对定位后，其原来的位置还占位

#### 特性

```html

    特性：

    1.不影响元素本身的特性

    2.不会使元素脱离正常文档流，也就是还占位

    3.如果没有定位偏移属性，对元素本身没有任何影响；如果有定位偏移属性，则相对于元素原来的位置发生偏移

    4.提高层级

    应用场景 ：

    1.微调自己的位置

    2. 作为绝对定位的参照物

```

---

### 2、position:absolute绝对定位

没有定位父级时相对于html进行定位，有定位父级时相对于最近的定位父级进行定位

#### 特性

```html

特性：

        1.元素脱离正常文档流，不占位(也脱离文本流，全脱)

        2.有定位父级相对于定位父级发生定位偏移

        3.如果没有定位父级相对于浏览器窗口发生定位偏移（如果其父亲没有相对定位，会一直往上找，直到相对于html）

        4.能使不能设置宽高的行级元素设置宽高

        5.提升层级

        6.如果没有定位偏移属性，对元素本身有影响；如果有定位偏移属性，则相对于父元素发生偏移

```

####  应用场景：

通常配合绝对定位使用（子绝父相）结合实际案例，如焦点图中的分页，翻页，视频网站中的 vip标签等

---

### 1、position:fixed 固定

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

#### 特性

```html

    特性：

    1.元素脱离正常文档流，不占位(也脱离文本流，全脱)

    2.始终相对于浏览器窗口四个角为原点进行固定定位的

    3.不会随页面的内容滚动而滚动

    4.能使不能设置宽高的行级元素设置宽高

    5.提升层级

    6.如果没有定位偏移属性，对元素本身有影响；

```

#### 应用场景：

相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏

**注意：子元素设置绝对定位，父元素可以设置相对定位、绝对定位、固定定位， 这三种情况，参照元素都是父元素**