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

芸朵化了

已于 2022-04-21 20:33:11 修改

阅读量439

点赞数 1

文章标签：前端 css

于 2022-04-20 16:28:31 首次发布

本文链接：https://blog.csdn.net/m0_68870440/article/details/124296491

版权

本文详细介绍了CSS中的浮动、定位、伪类和伪元素的概念及用法。浮动用于创建多列布局，包括float属性和clear属性；定位包括静态定位、绝对定位、相对定位等，通过position属性实现；伪类用于定义元素的特殊状态，如:hover、:first-child等；伪元素如::first-line和::before、::after则用于添加元素内容前后的特殊样式。

摘要由CSDN通过智能技术生成

7.CSS-:first-child 伪类

9.CSS-::selection 伪元素

一、浮动

1.浮动定义

css浮动是一种使元素脱离普通标准流控制的方法，会使元素向左或向右移动，其周围的元素也会重新排列。

2.浮动方向

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。

3.所有的CSS浮动属性

clear:指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动box-sizing: 定义元素的宽度和高度的计算方式：它们是否应包含内边距和边框
float:指定元素应如何浮动
overflow:指定如果内容溢出元素框会发生什么情况
overflow-x:指定当溢出元素的内容区域时，如何处理内容的左/右边缘
overflow-y:指定当溢出元素的内容区域时，如何处理内容的上/下边缘

4.float属性

float属性：定义元素在哪个方向浮动，常用于div实现横向多列布局

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

所有三个盒子向左浮动所有三个盒子向左浮动，宽度不够

所有三个盒子向左浮动，宽度不够

5.clear属性

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一：

none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值

注：使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。

单方向清除浮动的用法

侧栏向右?浮动，并且短于主内容区域。页脚(footer)于是按浮动所要求的向上跳到了可能的空间。

#footer{

clear: both;

}

二、定位

1.定位的定义

css中定位布局指的是元素可以脱离原来的位置，定位到页面中任意位置的方式；定位布局可以分为静态定位（static）、绝对定位（absolute）、相对定位（relative）、固定定位（fixed）和粘性定位（sticky）五种定位方式。

2.定位方式

静态定位（static）
绝对定位（absolute）
相对定位（relative）
固定定位（fixed）
粘性定位（sticky）

3.position 属性

平面定位的属性 :

positon属性：通过left,right,top,bottom, z-index进行定位的前提。

4.position 属性值

static：默认值。元素依页面正常流进行定位，top, bottom, left, right，z-index无效
fixed：固定定位。相对于浏览器窗口进行定位，top, bottom, left, right，z-index有效。
relative：相对定位。相对于其当前位置进行定位，top,bottom,left,right，z-index有效。