CSS浮动

最新推荐文章于 2024-07-25 16:45:46 发布

鹏zxp

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量411

点赞数 1

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/m0_74229555/article/details/128650584

版权

CSS浮动

结构伪类选择器

根据HTML结构选择标签,减少对类名的依赖.

结构伪类选择器的权重是0010.

结构伪类选择器作用与优势：
- 作用：根据元素在HTML中的结构关系查找元素
- 优势：减少对于HTML中类的依赖，有利于保持代码整洁
- 场景：常用于查找某父级选择器中的子元素
选择器

n的注意点：
- n为：0、1、2、3、4、5、6、……
- 通过n可以组成常见公式

式例

<ul>
        <li>我是li里的第1个孩子</li>
        <li>我是li里的第2个孩子</li>
        <li>我是li里的第3个孩子</li>
        <li>我是li里的第4个孩子</li>
        <li>我是li里的第5个孩子</li>
        <li>我是li里的第6个孩子</li>
        <li>我是li里的第7个孩子</li>
        <li>我是li里的第8个孩子</li>
        <li>我是li里的第9个孩子</li>
        <li>我是li里的第10个孩子</li>
    </ul>

/* 匹配父元素里面的第一个孩子 */
        ul li:first-child {
            background-color: red;
        }

        /* 匹配父元素里面的最后一个孩子 */
        ul li:last-child {
            background-color: skyblue;
        }
        /* 匹配父元素里面的某一个孩子 */
        ul li:nth-child(6){
            background-color: purple;
        }
        /* 匹配父元素里面倒数第几个孩子 */
        ul li:nth-last-child(3){
            background-color: pink;
        }

nth-child(n)

1.n 可以是数字，数字是几，就选择第几个孩子。

ul li:nth-child(6) { }  选择第6个孩子

n 还可以是 关键字 比如 odd even

  /* 选中偶数的孩子 */
        ul li:nth-child(even) {
            background-color: pink;
        }

        /* 选中奇数的孩子 */
        ul li:nth-child(odd) {
            background-color: skyblue;
        }

n 还可以是公式。

n 是从 0开始 012345…
2n 是偶数
2n + 1 是奇数
5n 5的倍数
n+5 从第五个开始包含第五个一直到最后.
-n+5 选中前5个包含第五个

/*2n */
ol li:nth-child(2n) {
            background-color: tomato;
 }
/*2n+1 */
ol li:nth-child(2n+1){
            background-color: violet;
}
/*5n  */
ol li:nth-child(5n){
            background-color: yellowgreen;
        }
/* n+5    从第五个开始 包含第五个 一直到最后.*/
ol li:nth-child(n+5) {
            background-color: yellowgreen;
        }
/*-n+5   选中前5个 包含第五个*/
ol li:nth-child(-n+5) {
            background-color: yellowgreen;
        }

伪元素

伪元素就是利用css来创建标签.伪元素创建出来的标签属于行内元素.

在父元素内容的最前面添加一个伪元素
E:::before{
     content: '';
}
在父元素内容的最后面添加一个伪元素
E::::after{
     content: '';
}
使用委员插入必须要指定content属性

标准流

一个完整的网页布局,只有标准流是不能满足需求,打破常规布局,让多个块级元素水平一行显示并且没有间隙.

网页布局: 标准流 + 浮动+ 定位

标准流布局规则

块级元素:

从上往下垂直布局独占一行

行内 /行内块元素:

从左往右水平布局一行转不下自动换行

浮动

浮动的作用

早期的作用:图文环绕

**现在的作用:**布局页面,让垂直布局的盒子变成水平布局

浮动的特点

1 浮动元素会脱离标准流(简称脱标),不占位置,被后面的标准流占有.

<div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

	* {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
        }

        .box1 {
            background-color: pink;
        }

        .box2 {
            /* 右浮动 */
            float: right;
            background-color: red;
        }

        .box3 {
            background-color: green;
        }

2 浮动的元素比标准流高半个级别,可以覆盖标准流的元素.

	* {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
        }

        .box1 {
            background-color: pink;
        }

        .box2 {
            /* 左浮动 */
            float: left;
            background-color: red;
        }

        .box3 {
            padding: 40px;
            background-color: green;
        }

浮动找浮动(同方向浮动) ，下一个浮动元素会在上一个浮动元素后面左右浮动

	* {
            margin: 0;
            padding: 0;
        }

        div {
            float: left;
            width: 200px;
            height: 200px;
        }

        .box1 {
            background-color: pink;
        }

        .box2 {
            background-color: red;
        }

        .box3 {
            background-color: green;
        }

4 浮动的元素会受到上面元素边界的影响

	* {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
        }

        .box1 {
            background-color: pink;
        }

        .box2 {
            /* 右浮动 */
            float: right;
            background-color: red;
        }

        .box3 {
            background-color: green;
        }

5 浮动的元素有特殊效果(浮动元素具有行内块元素特性并且顶部对齐.)

一行可以显示多个,可以设置宽高

块级元素浮动之后不设置宽高,默认由内容撑开

行内元素浮动之后设置宽高有效

 * {
            margin: 0;
            padding: 0;
        }

        div {
            float: left;
            width: 200px;
            height: 200px;
        }

        .box1 {
            background-color: pink;
        }

        .box2 {
            background-color: red;
        }

        .box3 {
            background-color: green;
        }

        span {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        p {
            width: 200px;
            height: 200px;
            float: left;
            background-color: yellow;
        }

 <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <span>设置宽高有效</span>
    <p>块级元素浮动之后不设置宽高默认由内容撑开</p>

浮动注意事项:

1 浮动的盒子搭配标准流的父元素一起使用.(标准流:垂直布局 ;浮动:水平布局)

2 浮动的时候,当父元素装不下浮动的子元素,此时子元素会换行显示.

3 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

子浮父不浮兄弟一起浮一浮全浮

清除浮动

清除浮动的方法 (一) 直接设置父元素高度
特点：
• 优点：简单粗暴，方便
• 缺点：有些布局中不能固定父元素高度。

清除浮动的方法 (二) 额外标签法
操作：
•在父元素内容的最后添加一个块级元素
•给添加的块级元素设置 clear:both
特点：
• 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

清除浮动的方法 (三) 单伪元素清除法
操作：用伪元素替代了额外标签
① ：基本写法
在这里插入图片描述

② ：补充写法
在这里插入图片描述

特点：
• 优点：项目中使用，直接给标签加类即可清除浮动

清除浮动的方法 (四) 双伪元素清除法
操作：
在这里插入图片描述

特点：
• 优点：项目中使用，直接给标签加类即可清除浮动

清除浮动的方法 (五) 给父元素设置overflow : hidden
操作：
•直接给父元素设置 overflow : hidden

鹏zxp

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS浮动

1 浮动的盒子搭配标准流的父元素一起使用.(标准流:垂直布局;浮动找浮动(同方向浮动) ，下一个浮动元素会在上一个浮动元素后面左右浮动。2 浮动的时候,当父元素装不下浮动的子元素,此时子元素会换行显示.1 浮动元素会脱离标准流(简称脱标),不占位置,被后面的标准流占有.5 浮动的元素有特殊效果(浮动元素具有行内块元素特性并且顶部对齐.)3 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.2 浮动的元素比标准流高半个级别,可以覆盖标准流的元素.
复制链接

扫一扫