前端学习-HTML/CSS刷题笔记03

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;
                box-sizing: border-box;
            }
            body {
                width: 500px;
            }
            header,
            section,
            footer {
                margin: 10px auto;
                width: 360px;
                border: 1px solid black;
            }

            header,
            footer {
                height: 32px;
            }
        </style>
    </head>
    <body>
        <header></header>
        <section><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>
        <footer></footer>
    </body>
    </html>

双列布局

BFC

参考链接

  • 什么是BFC：具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
  • 什么可以使元素具有BFC特性：
    • body 根元素
    • 浮动元素：float 除 none 以外的值
    • 绝对定位元素：position (absolute、fixed)
    • display 为 inline-block、table-cells、flex
    • overflow 除了 visible 以外的值 (hidden、auto、scroll)
  • BFC 可以包含浮动的元素（清除浮动）

  • 子元素没有浮动时

  • 子元素浮动、父元素没有触发BFC

  • 子元素浮动、父元素触发BFC

    <!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>
            .out {
                border: 1px solid #000;
                overflow: hidden;
            }

            .in {
                width: 100px;
                height: 100px;
                background-color: #eee;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="out">
            <div class="in"></div>
        </div>
    </body>
    </html>
  • 实现两列布局-BFC
    • 父元素触发BFC
    • 子元素1浮动，子元素2不浮动，父元素高度取两个子元素中高的一个
    • 如下例，子元素1会覆盖子元素2，可对子元素2使用margin-left: 100px;
    <!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-sizing: border-box;
            }
            .container {
                border: 1px solid black;
                overflow: hidden;
            }
            .left {
                border: 1px solid black;
                float: left;
                width: 100px;
                background-color: pink;
            }
            .right {
                margin-left: 100px;
                background-color: greenyellow;
            }
        </style>
    </head>
    <body>
        <section class="container">
            <article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
            <article class="right"><br /></article>
        </section>
    </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-sizing: border-box;
            }
            .container {
                position: relative;
            }
            .left {
                border: 1px solid black;
                position: absolute;
                left: 0;
                width: 100px;
            }
            .right {
                border: 1px solid black;
                position: absolute;
                right: 0;
                left: 100px;
            }
        </style>
    </head>
    <body>
        <section class="container">
            <article class="left"><br /><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
    </html>
  • 实现两列布局-flex
    <!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-sizing: border-box;
            }
            .container {
                border: 1px solid black;
                display: flex;
            }
            .left {
                border: 1px solid black;
                width: 100px;
            }
            .right {
                border: 1px solid greenyellow;
                flex: 1;
            }
        </style>
    </head>
    <body>
        <section class="container">
            <article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
            <article class="right"></article>
        </section>
    </body>
    </html>
  • 实现两列布局-grid
    <!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-sizing: border-box;
            }
            .container {
                border: 1px solid black;
                display: grid;
                grid-template-columns: 100px 1fr;
            }
            .left {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <section class="container">
            <article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
            <article class="right"></article>
        </section>
    </body>
    </html>
  • 实现三列布局-浮动
    • 浮动元素要写在内容元素之前，否则布局是混乱的
    • 优点：兼容性好、实现简单
    • 缺点：要清除浮动
    • 为防止内容元素被遮挡，需要给内容元素添加margin
    <!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-sizing: border-box;
            }
            .container {
                border: 1px solid black;
                overflow: hidden;
            }
            .left {
                border: 1px solid black;
                background-color: pink;
                float: left;
                width: 100px;
            }
            .right {
                border: 1px solid black;
                background-color: greenyellow;
                float: right;
                width: 100px;
            }
            .center {
                background-color: skyblue;
                margin: 0 100px;
            }
        </style>
    </head>
    <body>
        <section class="container">
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
            <article class="center">aaaaaaaaaaaaaa</article>
        </section>
    </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-sizing: border-box;
            }
            .container {
                position: relative;
            }
            .left {
                position: absolute;
                border: 1px solid black;
                left: 0;
                width: 100px;
            }
            .center {
                position: absolute;
                border: 1px solid black;
                left: 100px;
                right: 100px;
            }
            .right {
                position: absolute;
                border: 1px solid black;
                right: 0;
                /* width: 100px; */
            }
        </style>
    </head>
    <body>
        <section class="container">
            <article class="left"><br /><br /></article>
            <article class="center"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /><br /></article>
        </section>
    </body>
    </html>
  • 实现三列布局-flex
    <!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-sizing: border-box;
            }
            .container {
                display: flex;
            }
            .left {
                border: 1px solid black;
                width: 100px;
            }
            .center {
                border: 1px solid black;
                flex: 1;
            }
            .right {
                border: 1px solid black;
                width: 100px;
            }
        </style>
    </head>
    <body>
        <section class="container">
            <article class="left"><br /><br /></article>
            <article class="center"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /><br /></article>
        </section>
    </body>
    </html>
  • 实现三列布局-grid
    <!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-sizing: border-box;
            }
            .container {
                display: grid;
                grid-template-columns: 100px 1fr 100px;
            }
            .left {
                border: 1px solid black;
                /* width: 100px; */
            }
            .center {
                border: 1px solid black;
                /* flex: 1; */
            }
            .right {
                border: 1px solid black;
                /* width: 100px; */
            }
        </style>
    </head>
    <body>
        <section class="container">
            <article class="left"><br /><br /></article>
            <article class="center"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /><br /></article>
        </section>
    </body>
    </html>

三列布局-圣杯布局

这篇讲的很清楚,圣杯布局就是将基本布局之后使用向左浮动，middle栏留出两边位置，然后使用相对定位将左右两栏通过margin-left定位到相应位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .content {
            overflow: hidden;
            padding: 0 100px;
        }
        .header {
            background-color: pink;
        }
        .left {
            background-color: greenyellow;
            width: 100px;
            float: left;
            position: relative;
            margin-left: -100%;
            right: 100px;
        }
        .middle {
            background-color: darkorange;
            width: 100%;
            float: left;
            min-width: 100px;
        }
        .right {
            background-color: darkgreen;
            width: 100px;
            float: left;
            margin-right: -100px;
        }
        .footer {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="header">header</div>
    <div class="content wrapper">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .header {
            background-color: pink;
        }
        .left {
            background-color: greenyellow;
            width: 100px;
            float: left;
            margin-left: -100%;
        }
        .middle {
            background-color: darkorange;
            float: left;
            width: 100%;
        }
        /* 直接在.middle上设置padding，布局会乱 */
        .main-wrapper {
            padding: 0 100px;
        }
        .right {
            background-color: darkgreen;
            width: 100px;
            float: left;
            margin-left: -100px;
        }
        .footer {
            background-color: skyblue;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="header">header</div>
    <div class="main middle"><div class="main-wrapper">middle</div></div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="footer">footer</div>
</body>
</html>
posted @   ayubene  阅读(7)  评论(0)  编辑  收藏  举报
相关博文：
· 前端学习-HTML/CSS刷题笔记02
· 前端学习-HTML/CSS刷题笔记01
· 第八篇 css - 布局 - 【 浮动布局 + 定位布局 + flex 伸缩盒布局 + grid 网格布局 】
· css常见布局
· 页面布局总结
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示