六-CSS之浮动

最新推荐文章于 2024-05-02 14:26:53 发布
最新推荐文章于 2024-05-02 14:26:53 发布
阅读量131 收藏
点赞数
分类专栏： HTML+CSS 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sxsxsx2/article/details/132715961
版权

一、结构伪类选择器

1. 作用与优势:
        1. 作用:根据元素在HTML中的结构关系查找元素

        2. 优势:减少对于HTML中类的依赖，有利于保持代码整洁

        3. 场景:常用于查找某父级选择器中的子元素

2. 选择器


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中第一个 */
        /* li:first-child {
            background-color: green;
        } */

        /* 最后一个 */
        /* li:last-child {
            background-color: green;
        } */

        /* 任意一个 */
        /* li:nth-child(5) {
            background-color: green;
        } */

        /* 倒数第xx个 */
        li:nth-last-child(1) {
            background-color: blue;
        }
    </style>
</head>
<body>

    <!-- ul>li{这是第$个li}*8 -->
    <ul>
        <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>
    </ul>
</body>
</html>

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

(拓展)结构伪类选择器的易错点

➢ 问题:在下列案例中，如果需要找到第一个a标签，如何去查找?


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ** 偶数 */
        /* li:nth-child(2n) { */

            /* *** 奇数 */
        /* li:nth-child(2n+1) { */
            /* 找到前3个 */
        /* li:nth-child(-n+3) { */

            /* *** 4的倍数 */
        li:nth-child(4n) {
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <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>
    </ul>
</body>
</html>

二、伪元素

目标:能够使用 伪元素 在网页中创建内容
➢ 伪元素:一般页面中的非主体内容可以使用伪元素

➢ 区别:

  1. 元素:HTML 设置的标签

  2. 伪元素:由 CSS 模拟出的标签效果

➢ 种类:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .father::before {
            /* 内容 */
            /* content属性必须添加, 否则伪元素不生效 */
            content: '';
            color: green;
            width: 100px;
            height: 100px;
            background-color: blue;

            /* 默认是行内元素, 宽高不生效 */
            display: block;
        }

        .father::after {
            content: '大米';
        }
    </style>
</head>
<body>
    <!-- 伪元素 通过css创建标签, 装饰性的不重要的小图 -->

    <!-- 找父级, 在这个父级里面创建子级标签 -->

    <div class="father">爱</div>

    <!-- 老鼠爱大米 -->
</body>
</html>

➢ 注意点:
        1. 必须设置content属性才能生效

        2. 伪元素默认是行内元素

小结

➢ 伪元素的必加属性是?

        • content属性

➢ 伪元素创建出来后默认的显示模式是?

        • 行内元素

三、标准流

目标:能够认识 标准流 的默认排布方式及其特点
➢ 标准流:又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

➢ 常见标准流排版规则:
        1. 块级元素:从上往下，垂直布局，独占一行
        2. 行内元素 或 行内块元素:从左往右，水平布局，空间不够自动折行

小结

➢ 标准流中块级元素的排版规则是?

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

➢ 标准流中行内元素或行内块元素的排版规则是?

        • 从左往右、水平布局、空间不够自动折行

四、浮动

1.浮动的作用

1.1 浮动的作用

➢ 早期的作用:图文环绕

➢ 现在的作用:网页布局
        • 场景:让垂直布局的盒子变成水平布局，如:一个在左，一个在右

2.浮动的代码

2.1 浮动的代码

➢ 属性名:float

➢ 属性值:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* img {
            float: left;
        } */

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

        .one {
            background-color: pink;
            float: left;
        }

        .two {
            background-color: skyblue;
            /* flr */
            /* float: right; */
            float: left;
        }
    </style>
</head>
<body>
    <!-- 1. 图文环绕 -->
    <!-- <img src="./images/1.jpg" alt="">
    阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了 -->


    <!-- 2. 网页布局: 块在一行排列 -->
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

小结

➢ 浮动的作用是什么?
1. 早期作用:图文环绕
2. 现在作用:用于布局，让垂直布局的盒子变成水平布局，如:一个在左，一个在右

➢ 左浮动的属性是?右浮动的属性是?

  1. 左浮动:float : left

  2. 右浮动:float : right

3.浮动的特点

3.1 浮动的特点

1. 浮动元素会脱离标准流(简称:脱标)，在标准流中不占位置

        • 相当于从地面飘到了空中

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

3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动元素有特殊的显示效果

  • 一行可以显示多个

  • 可以设置宽高


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 浮动的标签  顶对齐 */
        /* 浮动: 在一行排列, 宽高生效 -- 浮动后的标签具备行内块特点 */
        .one {
            width: 100px;
            height: 100px;
            background-color: pink;

            float: left;

            margin-top: 50px;
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: skyblue;

            float: left;

            /* 因为有浮动, 不能生效 - 盒子无法水平居中 */
            margin: 0 auto;
        }

        .three {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

➢ 注意点:
• 浮动的元素不能通过text-align:center或者margin:0 auto

小结

➢ 浮动元素的特点有哪些?
1. 浮动元素会脱标，在标准流中不占位置
2. 浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素有特殊的显示效果:1 一行可以显示多个 2 可以设置宽高

4.浮动的案例

（案例)网页布局案例

➢ 需求:使用浮动，完成设计图中布局效果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            /* 宽度高度背景色 */
            height: 40px;
            background-color: #333;
        }

        .header {
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;
            margin: 0 auto;
        }

        .content {
            width: 1226px;
            height: 460px;
            background-color: green;
            margin: 0 auto;
        }

        .left {
            float: left;

            width: 234px;
            height: 460px;
            background-color: #ffa500;

           
        }

        .right {
            float: left;
            
            width: 992px;
            height: 460px;
            background-color: #87ceeb;

           
        }

        /* CSS书写顺序: 浏览器执行效率更高
            1. 浮动 / display
            2. 盒子模型: margin border padding 宽度高度背景色
            3. 文字样式
        */
    </style>
</head>
<body>
    <!-- 通栏的盒子: 宽度和浏览器宽度一样大 -->
    <div class="top"></div>
    <div class="header">头部</div>
    <div class="content">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

 

(案例)小米模块案例

➢ 需求:使用浮动，完成设计图中布局效果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 0 auto;

            width: 1226px;
            height: 614px;
            /* background-color: pink; */
        }

        .left {
            float: left;

            width: 234px;
            height: 614px;
            background-color: #800080;
        }

        .right {
            float: right;

            width: 978px;
            height: 614px;
            /* background-color: green; */
        }

        ul {

            /* 去掉列表的符号 */
            list-style: none;
        }

        .right li {
            float: left;

            margin-right: 14px;
            margin-bottom: 14px;

            width: 234px;
            height: 300px;
            background-color: #87ceeb;
        }

        /* 如果父级的宽度不够, 子级会自动换行 */
        /* 第四个li和第八个li右侧间距清除 */
        .right li:nth-child(4n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</html>

（案例)网页导航案例

➢ 需求:使用浮动，完成设计图中布局效果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            margin: 50px auto;
            width: 640px;
            height: 50px;
            background-color: #ffc0cb;
        }

        ul {
            list-style: none;
        }

        .nav li {
            float: left;
        }

        .nav li a {
            /* 1. 浮动 / display */
            /* display: inline-block; */
            display: block;

            /* 2. 盒子模型 */
            width: 80px;
            height: 50px;
            /* background-color: green; */

            /* 3. 文字样式 */
            text-align: center;
            line-height: 50px;
            color: #fff;
            text-decoration: none;
        }

        .nav li a:hover {
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- 导航 -->
    <div class="nav">
        <ul>
            <li><a href="#">新闻</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">新闻</a></li>
        </ul>
    </div>
</body>
</html>

书写网页导航步骤:

  1. 清除默认的margin和padding

  2. 找到ul，去除小圆点

  3. 找到li标签，设置浮动让li一行中显示

  4. 找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高??

    • 方法一:给a标签设置 display : inline-block

    • 方法二:给a标签设置 display : block

    • 方法三:给a设置 float : left

五、清除浮动

1.清除浮动的介绍

1.1 清除浮动的介绍

➢ 含义:清除浮动带来的影响
• 影响:如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

➢ 原因:
• 子元素浮动后脱标 → 不占位置


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

➢ 目的:
• 需要父元素有高度，从而不影响其他网页元素的布局

小结

➢ 清除浮动的含义是什么?

  • 清除浮动带来的影响

  • 影响:如果子元素浮动了，此时子元素不能撑开父元素

➢ 清除浮动的目的是什么?

    • 需要父元素有高度，从而不影响其他网页元素的布局

2.清除浮动的方法

2.1 清除浮动的方法

1 直接设置父元素高度

➢ 特点:

  • 优点:简单粗暴，方便

  • 缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块

 

2.2 清除浮动的方法 

2 额外标签法

➢ 操作:
        1. 在父元素内容的最后添加一个块级元素

        2. 给添加的块级元素设置 clear:both

➢ 特点:
        • 缺点:会在页面中添加额外的标签，会让页面的HTML结构变得复杂

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        .clearfix {
            /* 清除左右两侧浮动的影响 */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

2.3 清除浮动的方法 

3 单伪元素清除法

➢ 操作:用伪元素替代了额外标签

1 :基本写法

2 :补充写法

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

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /* 单伪元素清除浮动 和 额外标签法原理是一样的 */
        .clearfix::after {
            content: '';

            /* 伪元素添加的标签是行内, 要求块 */
            display: block;
            clear: both;

            /* 为了兼容性 */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 通过css 添加标签 -->
    </div>
    <div class="bottom"></div>
</body>
</html>

2.4 清除浮动的方法

4 双伪元素清除法

➢ 操作:

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

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /*  .clearfix::before 作用: 解决外边距塌陷问题
            外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置
        */
        /* 清除浮动 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        /* 真正清除浮动的标签 */
        .clearfix::after {
            /* content: '';
            display: table; */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

2.5 清除浮动的方法

5 给父元素设置overflow : hidden

➢ 操作:
        1. 直接给父元素设置 overflow : hidden

➢ 特点:
• 优点:方便


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;

            overflow: hidden;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

小结

➢ 清除浮动的方法有哪些?

  1. 直接设置父元素高度

  2. 额外标签法

  3. 单伪元素清除法

  4. 双伪元素清除法

  5. 给父元素设置overflow : hidden

三金呐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Day06-CSS布局-浮动
07-10
Day06-CSS布局-浮动
html中ul左浮动,使用带有CSS </li> </ul>的左浮动<li>中心<ul>列表
weixin_42488997的博客
06-27 548
我必须重现这样一个菜单：+----------------------------------------------------------------------------+Option 1 | Option 2 | Option 3 | Option 4 | Option 5+-------------------------------------------------...
css中li设了左浮动,如何使它宽度超过ul以后依然不自动换行，成横排显示？
LuLuke_lucky的博客
04-19 598
ul { white-space:nowrap; } li { display:inline;}
CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级
专研前端，探索后端
04-16 325
文档流： 普通流（normal flow）： 字面意思是普通流或者标准流，也就是常说的文档流，指网页内标签正常是从上到下，从左到右排列的意思，css的定位机制有3种：普通流（标准流）、浮动、定位。 浮动： 是指使元素飘起来不完全脱离标准流的控制，绝对定位才是完全脱离标准流的，飘起来后不会再占原来的位置，浮动可以使块级元素在一行排列显示，float的值有：none默认值，元素不浮动、right元素向右浮动、left元素向左浮动。 .box ul li { float:left; } 浮动特性： 1、浮动
CSS--浮动
weixin_43988680的博客
05-05 1048
浮动的特点；浮动的使用方法；父标签塌陷问题及解决方法；基于浮动的网页导航栏示例；
10.前端基础--CSS盒子浮动
weixin_45267102的博客
10-31 1391
文章目录前端基础--CSS盒子浮动1. CSS 布局的三种机制2. 为什么需要浮动？3. 什么是浮动float3.1 浮动的作用3.2 浮动的语法浮动口诀3.3 浮动float的应用☆浮动和标准流的父盒子搭配导航栏案例3.4 浮动float的扩展浮动元素与父盒子的关系浮动元素与兄弟盒子的关系4. 清除浮动4.1 为什么要清除浮动4.2 清除浮动本质4.3 清除浮动的方法额外标签法(隔墙法)父级添加overflow属性方法使用after伪元素清除浮动案例代码：4.4 清除浮动总结5. Photoshop切图5
Craftsy：Ejercicio HTML-CSS（浮动）
02-14
Craft.io品
CSS 关于浮动
09-25
浮动是 css 的定位属性。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。
css系列之浮动博客源码
09-10
css系列之浮动博客源码。 1.使用winara解压文件。 2.使用visual studio code工具打开，即可运行。
css基础4-浮动布局
12-05
css基础-浮动
element-ui的bug记录
nick_zhang的博客
04-29 371
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
【Web】CTFSHOW 中期测评刷题记录(1)
最新发布
uuzeray的博客
05-02 1045
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 271
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 259
createWs("测试数据", (res) => {
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 1062
XYCTF 2024 Web 方向全解
vue如何如何组合组件并通讯
codemami的博客
05-02 595
在Vue中，组件的组合和通讯是构建复杂应用的关键部分。Vue提供了多种方式来组合组件，并允许组件之间进行通讯。-- 子组件 ChildComponent.vue -->-- 子组件 ChildComponent.vue -->通过自定义事件（$emit）来通知父组件。通过props属性向子组件传递数据。子组件通过props来接收数据。-- 父组件 -->-- 父组件 -->
彻底理清防抖和节流（前端性能优化）
夏日漱石的博客
04-28 825
前端有很多性能优化的方式，面对用户与网页的频繁交互，如输入框打字、按钮点击、滚动事件等，我们如何确保应用的响应既迅速又高效？ 大家应该都简单了解防抖和节流本质上就是优化这种高频率执行代码的手段，那么他们之间有什么区别呢？应该如何正确根据具体的场景来选择使用呢？
[前端] Bearer令牌
好习惯成就伟大
04-28 145
Bearer令牌的安全性依赖于令牌的保密性和传输的安全性。因为任何拥有令牌的人都能访问资源，所以必须确保在传输过程中使用HTTPS来防止中间人攻击，并且存储时也要妥善保管，避免令牌泄露。此外，由于Bearer令牌的这一特点，相比其他类型如MAC（Message Authentication Code） tokens，它在安全性上要求更高的保护措施。服务器接收到请求后，会验证令牌的有效性（比如检查令牌是否过期、是否被撤销等），然后决定是否允许访问请求的资源。在HTTP请求中，Bearer令牌通常放在。
3. uniapp开发工具的一些事
Oliver尹的博客
04-28 109
新的一天，又要开始卷起来了，程序开发当前离不开开发工具，一个好的开发工具办事起来那必然是事倍功半的...本文主要分享了关于开发工具的一些事~
html-css-javascript面试题
08-31
当涉及到HTML、CSS和JavaScript的面试题时，以下是一些常见的问题： 1. HTML是什么？它用于做什么？ 2. 什么是DOCTYPE？它的作用是什么？ 3. 请解释一下HTML5新增的一些重要特性。 4. 什么是语义化HTML？为什么它重要？ 5. CSS是什么？它的作用是什么？ 6. 请解释一下CSS盒模型。 7. 什么是浮动（float）？如何清除浮动？ 8. 请解释一下响应式设计（Responsive Design）。 9. JavaScript是什么？它的作用是什么？ 10. 请解释一下变量声明的关键字var、let和const之间的区别。 11. 什么是函数作用域和块级作用域？ 12. 请解释一下闭包（Closure）并给出一个例子。 13. 什么是事件冒泡（Event Bubbling）和事件捕获（Event Capturing）？ 14. 请解释一下AJAX的工作原理。 15. 什么是跨域请求（Cross-Origin Request）？如何解决跨域问题？ 这只是一些常见的面试问题，根据面试的具体要求，可能还会涉及到其他更深入的主题。在准备面试时，建议你深入了解这些概念，并准备一些相关的示例和代码片段来展示你的知识和实践经验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值