Day06-CSS布局-浮动

已于 2022-09-29 20:27:19 修改
阅读量69 收藏
点赞数
分类专栏： 女神前端 文章标签： css html 前端
于 2022-07-10 00:37:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45831040/article/details/125694275
版权

CSS布局-浮动

一、结构伪类选择器

1.1 结构伪类选择器

目标：能够使用 结构伪类选择器 在HTML中定位元素

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

选择器

在这里插入图片描述

<!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: green;
        }

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

        /* 任意一个 */
        li:nth-child(2) {
            background: pink;
        }

        /* 倒数第XX个 */
        li:nth-last-child(4) {
            background: 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可以组成常见公式

在这里插入图片描述

<!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个  +3 */
        /* li:nth-child(-n+3) */

        /* 第4个和第8个 */
        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>

在这里插入图片描述

2.1 （拓展）结构伪类选择器的易错点

➢ 问题：在下列案例中，如果需要找到第一个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里面的a */
        li:first-child a {
            /* background-color: green; */
            color: red;
        }

        li:nth-child(3) a {
            color: yellow;
        }
    </style>
    <!-- <style>
        /* 找到第一个li 里面的  第三个a  设置文字颜色是红色 */
        li:first-child a:nth-child(3) {
            color: red;
        }
    </style> -->
</head>
<body>
    <ul>
        <li>
            <a href="#">这是第1个li里面的a1</a>
            <a href="#">这是第1个li里面的a2</a>
            <!-- 选中第三个a -->
            <a href="#">这是第1个li里面的a3</a>
            <a href="#">这是第1个li里面的a4</a>
            <a href="#">这是第1个li里面的a5</a>
        </li>
        <li><a href="#">这是第2个li里面的a</a></li>
        <li><a href="#">这是第3个li里面的a</a></li>
        <li><a href="#">这是第4个li里面的a</a></li>
        <li><a href="#">这是第5个li里面的a</a></li>
        <li><a href="#">这是第6个li里面的a</a></li>
        <li><a href="#">这是第7个li里面的a</a></li>
        <li><a href="#">这是第8个li里面的a</a></li>
    </ul>
</body>
</html>

在这里插入图片描述

3.1 （了解）nth-of-type结构伪类选择器

➢ 选择器：

在这里插入图片描述
➢ 区别：
• :nth-child → 直接在所有孩子中数个数
• :nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数

二、伪元素

目标：能够使用 伪元素 在网页中创建内容

➢ 伪元素：一般页面中的非主体内容可以使用伪元素

➢ 区别：
1.元素：HTML 设置的标签
2 伪元素：由 CSS 模拟出的标签效果

➢ 种类：

在这里插入图片描述
➢ 注意点：
1.必须设置content属性才能生效
2.伪元素默认是行内元素

三、标准流

目标：能够认识 标准流 的默认排布方式及其特点

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

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

四、浮动

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>
        div {
            /* 浏览器解析行内块或行内标签时，如果标签换行书写会产生一个空格的距离 */
            display: inline-block;
            width: 100px;
            height: 100px;
        }

        .one {
            background-color: pink;
        }

        .two {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

在这里插入图片描述

2.1 浮动的代码

➢ 属性名：float

➢ 属性值：

在这里插入图片描述
➢ 左浮动的属性是？右浮动的属性是？
1.左浮动：float : left
2.右浮动：float : right

<!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;
            /* 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>

在这里插入图片描述

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: pink;

            float: left;

            margin-top: 50px;
        }

        .two {
            width: 200px;
            height: 200px;
            background: 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>

在这里插入图片描述

4.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>
        * {
            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: green;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 460px;
            background-color: #ffa500;
        }

        .right {
            float: left;
            width: 992px;
            height: 460px;
            background: #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>

在这里插入图片描述

4.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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 0 auto;
            width: 1226px;
            height: 614px;
            /* background-color: pink; */
        }

        .left {
            float: left;
            width: 234px;
            height: 614px;
            background: #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>

在这里插入图片描述

4.3 （案例）网页导航案例

<!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: 50px auto;
            width: 640px;
            height: 50px;
            background-color: #ffc0cb;
        }

        .box ul {
            list-style: none;
        }

        .box ul li a{
            float: left;
            width: 80px;
            height: 50px;
            color: #fff;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            font-size: 16px;
        }

        a:hover {
            background-color: #008000;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="#">新闻1</a></li>
            <li><a href="#">新闻2</a></li>
            <li><a href="#">新闻3</a></li>
            <li><a href="#">新闻4</a></li>
            <li><a href="#">新闻5</a></li>
            <li><a href="#">新闻6</a></li>
            <li><a href="#">新闻7</a></li>
            <li><a href="#">新闻8</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 清除浮动的介绍

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

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

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

<!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.1 清除浮动的方法 — ① 直接设置父元素高度

➢ 特点：
• 优点：简单粗暴，方便
• 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

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 清除浮动的方法 — ③ 单伪元素清除法

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

① ：基本写法

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

在这里插入图片描述
➢ 特点：
• 优点：项目中使用，直接给标签加类即可清除浮动

<!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 清除浮动的方法 — ④ 双伪元素清除法

➢ 操作：

在这里插入图片描述
➢ 特点：
• 优点：项目中使用，直接给标签加类即可清除浮动

<!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 {
            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 清除浮动的方法 — ⑤ 给父元素设置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>

在这里插入图片描述

2.6 （拓展补充）BFC的介绍

➢ 块格式化上下文（Block Formatting Context）：BFC
• 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

➢ 创建BFC方法：
1.html标签是BFC盒子
2.浮动元素是BFC盒子
3.行内块元素是BFC盒子
4.overflow属性取值不为visible。如：auto、hidden…
5.……

➢ BFC盒子常见特点：
1.BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动
2.BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷
3.……

六、总结

◆ 能够使用 结构伪类选择器 在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 {
            height: 40px;
            /* background-color: pink; */
            /* border-top: 1px solid #dadce0; */
            border-bottom: 1px solid #ccc;
        }

        .box ul {
            width: 1200px;
            margin: 0 auto;
            list-style: none;
        }

        .box ul li {
            float: left;
            width: 20%;
            height: 40px;
            border-right: 1px solid #ccc;
            box-sizing: border-box;
            text-align: center;
            line-height: 40px;
        }

        .box ul .last {
            border-right: none;
        }

        ul li a {
            color: #000;
            height: 40px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="#">我要投资</a></li>
            <li><a href="#">平台介绍</a></li>
            <li><a href="#">新手专区</a></li>
            <li><a href="#">手机微金所</a></li>
            <li class="last"><a href="#">个人中心</a></li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

纯纯不会写代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
解决flex布局space-between最后一行布局问题超简单方法
m0_51636525的博客
04-19 1万+
flex布局space-between、space-evenly、space-around最后一行布局问题
flex space-between 第二位置贴左问题
Technology_hands的博客
11-22 474
如果我们想让他贴左边或者右边的话，我们设置左边一个距离，右边一个auto即可。那么第二个数据将居中对齐。
css --- > flex布局的应用(between)
栗子好好吃的博客
09-18 2132
between 想把发布时间放在左边,点击放在右边 页面结构如下: 可以看到发布时间和点击是在类 .mui-ellipsis 下. 使用css3的 flex 布局中的: space-between .mui-ellipsis{ display: flex; justify-content: space-between; } ...
flex 布局 justify-between 最后一行左对齐
潜心
03-30 2322
网络方法层出不穷（佩服），有的追加伪类，但是追加伪类就设计到了item个数问题，就是当最后一行元素是一个的时候，不对左对齐，所以借助dom思想来实现 我要实现的是三列 利用数组长度，在末尾渲染i个伪元素，来适应justify-between的特性 ...
css盒子模型flex中属性space-around和space-between的本质理解！！！
qq_63116916的博客
03-06 1357
每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。其实可以从命名来理解，space就是空间，between就是中间的意思，space-between就是把剩余空间均匀分配到子盒子中间，自然而然，最右和最左边的盒子就不给他们空间了，因为中间，什么叫中间？其实可以从命名来理解，space是空间的意思，around是包围的意思，space-around就是平分剩余空间，并把分配到的空间平分到一个子盒子的两侧；相邻子盒子之间，空间相加，自然而然，就会形成最左和最右的空间是子盒子中间空间的一半。
day06（CSS04-浮动）.rar
12-01
标题中的"day06（CSS04-浮动）.rar"指示了这是一个关于CSS浮动的教程资料包，属于Web前端开发的学习资源。CSS是层叠样式表（Cascading Style Sheets）的缩写，它是用来描述HTML或XML（包括如SVG、MathML等各种XML...
day06（CSS04-浮动）v1.0.pdf
02-17
【CSS布局浮动】知识点详解 在网页设计中，CSS布局浮动是一种重要的技术，它主要用于创建复杂的网页布局。本文将深入探讨浮动（Floating）以及相关的HTML和CSS概念，包括结构伪类选择器、伪元素、标准流和清除浮动...
CSS-day06.pdf
01-25
实际开发场景中，`overflow` 属性常用于清除浮动、隐藏超出内容等。 用户界面样式 用户界面样式是指更改一些用户操作样式，以便提高更好的用户体验。常见的用户界面样式有鼠标样式、轮廓线、防止拖拽等。 2.1 ...
flex布局两端对齐space-between，最后一行如果不满的话则从左对齐
xiaopangzipy的博客
05-15 2099
给容器元素增加伪类，宽度为子元素宽度 &:after { content: ''; width: 200rpx; }
CSS盒子模型和水平、竖直方向的布局
XinKun的博客
11-02 2604
一、CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： ![盒子模型](https://img-blog.csdnimg.cn/20201102104800910.png?x-oss- process=image/w
CSS——盒子模型以及盒子的水平、垂直布局
Bonsoir777的博客
07-18 2096
本文主要介绍CSS中的盒子模型，以及盒子的水平与垂直布局等相关知识点
CSS如何实现竖排并列两个元素
qq_40388699的博客
06-02 2187
container { display:flex;//弹性盒子 flex-wrap:wrap;//按照子元素的宽度来包裹 } child { width: 49%; }
结构伪类选择器—查找单个—查找多个—nth-of-type和伪元素
小琳爱分享的博客
07-22 335
nth-of-type结构伪类选择器
Web前端学习笔记2（结构伪类选择器，:nth-of-type用法和区别，css3盒子模型，伪类选择器用法及应用）
m0_60531106的博客
06-29 1004
1、用nth-child()选择偶数 2、选择奇数 3、选择所有数 4、n+m,和-n+m :nth-of-type用法 选第一个和最后一个元素 和nth-child()相似的用法 nth-child和nth-of-type的差别 （元素）:nth-child(m)先把所有元素排好，在找前面的元素（元素）:nth-of-type先找前面元素，再排序号 css3盒子模型 我们默认的盒子为盒子大小 = 本身大小+边框+padding盒子大小 = 本身大小
结构伪类选择器nth-child和nth-of-type以及两者区别
3木子熙H
06-16 589
nth-child(n)选择某个父元素的一个或多个特定的子元素 n可以是数字，关键字和公式 n如果是数字，就是选择第n个子元素，里面数字从1开始 n可以是关键字：even是偶数，odd是奇数 n可以是公式：常见的公式如下 公式 取值 2n 偶数 2n+1 奇数 5n 5 10 15… -n+5 前五个（包含第五个） nth-of-type是相同的使用方法 两者之间的区别，通过下面的例子说明： 当使用nth-child去选择父元素中含div标签的第一个改变背景颜
伪元素nth-child()与nth-of-type()有什么区别
mini_1251861209的博客
09-23 516
p:nth-child(4)指的是p元素的第四个兄弟元素，如果这个元素是p元素就会选中，如果不是就不会 p:nth-of-type(4)指的是第四个p元素 例： <p></p> <p></p> <a></a> <a></a> <!-- p:nth-child(4)会选中这个，但是由于...
网站基本布局CSS
最新发布
m0_46608027的博客
07-24 808
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
day--和--day区别
04-18
"day--"和"day"是两种不同的操作符，它们在编程中有着不同的含义和用法。 1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

纯纯不会写代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值