浮动+定位+伪类+伪元素

浮动+定位+伪类+伪元素

本文主要的内容是关于浮动、定位、伪类、伪元素的有关知识。

---

---

前言

如果想要网页的布局更加合理，或者是为网页中一些特殊的位置增添样式，且为了便于维护，就需要了解浮动、定位、伪类、伪元素等，本文就简单介绍其相关知识。

---

一、浮动

1.浮动的简介

浮动是指脱离文档流的存在，通过浮动可以使一个元素向其父元素的左侧或右侧移动，通过float属性来设置浮动。

可选值	含义
none	默认值，元素不浮动
right	向右浮动
left	向左浮动

元素设置浮动后，会从文档流中脱离，所以后边的元素会自动向上移动

2.浮动的特点

1. 浮动元素会脱离文档流，不再在文档中占据位置。
2. 设置浮动后会向父元素的左侧或右侧移动。
3. 浮动元素不会从父元素中移出。
4. 浮动元素上面的元素为浮动，则浮动元素不会上移。
5. 浮动元素不会超过上面的元素。
6. 浮动元素不会盖住文字，位子会自动环绕浮动元素。
7. 元素设置浮动以后，元素的一些特点也会发生变化。
   （1）、块元素不在独占一行，宽度和高度会被内容默认撑开。
   （2）、行内元素会变成块元素，不再区分块元素和行内元素。

3.设置浮动后产生的问题

1. 高度塌陷问题：在浮动布局中，父元素的高度默认被子元素撑开，子元素设置浮动后，会脱离文档流，将无法撑起父元素的高度，会导致父元素的高度丢失。
2. 2.受到其他盒子的影响

4.解决浮动带来的问题

1. 设置clear属性

.box1{
    width: 100px;
    height: 100px;
    background-color: rgb(189, 201, 192);
    /* float: left; */
}
.box2{
    width: 200px;
    height: 200px;
    background-color: rgb(189, 255, 205);
    /* float: right; */
}
.box3{
    width: 300px;
    height: 300px;
    background-color: rgb(21, 156, 55);
    /* clear: both; */
}

显示结果如下图

.box1{
    width: 100px;
    height: 100px;
    background-color: rgb(189, 201, 192);
    float: left;
}
.box2{
    width: 200px;
    height: 200px;
    background-color: rgb(189, 255, 205);
    float: right;
}
.box3{
    width: 300px;
    height: 300px;
    background-color: rgb(21, 156, 55);
    clear: both;
}

显示结果如下图

2. clearfix可解决高度塌陷和外边距重叠的影响

.clearfix::before,.clearfix::after{
    content: '';
    display: table;
    clear: both;
}

5.如何开启BFC

BFC（Block Formatting Content）：块级格式化环境
开启BFC后，元素不会被浮动元素盖住，子元素和父元素的外边距不会重叠，且可以包含浮动的元素。

开启BFC的方法：

1. 设置元素的浮动
2. 将元素设置为行内元素
3. 将元素的overflow设置为一个非visible的值

二、定位

1.定位的简介

定位是一种更高级的布局手段
通过定位可以将元素搬放到页面的任意位置
使用position属性来设置定位

position属性可选值	含义
static	默认值 元素静止且未开启定位
relative	开启元素的相对定位
absolute	开启元素的绝对定位
fixed	开启元素的固定定位
sticky	开启元素的粘滞定位

静态定位

position：static;

默认值 元素静止且相当于未开启定位

相对定位

position：relative;

• 元素开启相对定位后，若不设置偏移量，则元素不会发生变化
• 相对定位参照元素在文档流中的位置
• 相对定位会提高元素的层级
• 相对定位不会使元素脱离文档流
• 相对定位不会改变元素的性质

.box1{
    width: 100px;
    height: 100px;
    background-color: rgb(189, 201, 192);
    
}
.box2{
    width: 200px;
    height: 200px;
    background-color: rgb(189, 255, 205);
    position: relative;
     /*设置偏移量  离box150px*/
    top: 50px;
}

绝对定位

position：absolute;

• 元素开启绝对定位后，若不设置偏移量，则元素的位置不会发生变化
• 绝对定位会提高元素的层级
• 绝对定位使元素脱离文档流
• 绝对定位会改变元素的性质
• 绝对元素相对于包含块进行定位
  包含块：正常情况下是指离当前元素最近的祖先元素
  绝对定位的包含块是离当前元素最近的开启了定位的祖先元素，若无，则相对于根元素进行定位

绝对定位的元素布局

水平方向的布局：left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right

元素开启绝对定位后需根据要求调整这几个值。
垂直方向亦同

固定定位

position：fixed；
固定定位也是一种绝对定位，所以大部分特点和绝对定位一样。
不同点：固定定位永远参照浏览器的视口进行定位，固定定位的元素不会随着网页的滚动条滚动而滚动。

粘滞定位

position：sticky；
粘滞定位与相对定位基本一致，不同的是粘滞定位可以在元素达到某个位置是固定，就像粘住似的。

    position: sticky;
    /* top: 50px; */

未开启粘滞定位

开启粘滞定位后，只能下滑到此处

2.元素的层级

开启定位的元素，可以通过z-index属性来指定元素的层级
层级越高越优先显示。

三、伪类

伪类是用来描述一个元素的特殊状态
以下是一些常见的伪类

• ul>li:first-child 选中第一个元素
• ul>li:last-child 选中最后一个元素
• ul>li:nth-child() 选中第n个元素
• ul>li:nth-child(2n) 选中序号为偶数的元素
• ul>li:nth-child(2n+1) 选中序号为奇数的元素
  查看所有伪类

四、伪元素

使用::开头 来表示页面中一些特殊并不真实存在的元素（特殊的位置）

• ::first-letter 表示选中第一个字母
• ::first-line 表示选中第一行
• ::selection 表示选中的内容
• ::before 表示元素的开始位置
• ::after 表示元素的最后位置
• 查看所有伪元素

---

总结

以上就是所有内容，再见啦