【CSS】常见 CSS 布局

小秀_heo

已于 2024-07-24 20:27:26 修改

阅读量608

点赞数 1

分类专栏： CSS 文章标签： css css3 前端 1024程序员节

于 2023-10-22 21:15:04 首次发布

本文链接：https://blog.csdn.net/XiugongHao/article/details/133844641

版权

CSS 专栏收录该内容

53 篇文章 2 订阅

订阅专栏

1. 盒模型布局

通过设置元素的 margin、padding、border 等属性，控制元素在⻚⾯中的位置和⼤⼩。

<!DOCTYPE html>
<html>

<head>
    <title>简单的响应式布局</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        /* 导航样式 */
        nav {
            background-color: #f2f2f2;
            padding: 10px;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            display: inline;
            margin-right: 10px;
        }

        nav ul li a:hover {
            background-color: #ccc;
        }

        nav ul li a {
            color: #333;
            text-decoration: none;
            padding: 5px;
        }

        /* 主要内容样式 */
        main {
            padding: 20px;
        }

        section {
            margin-bottom: 20px;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <header>
        <h1>响应式布局示例</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>欢迎来到我们的网站！</h2>
            <p>这是一个简单的响应式布局示例。</p>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
    <script>
    </script>
</body>

</html>

在这里插入图片描述

2. 块级布局

这是最基本的布局⽅式，它使元素在⻚⾯上垂直堆叠。这种布局适⽤于单个⻚⾯元素或简单的⻚⾯结构。

<!DOCTYPE html>
<html>

<head>
    <title>简单的块级布局</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        /* 主要内容样式 */
        main {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        section {
            flex-basis: 48%;
            background-color: #f2f2f2;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .left-section {
            /* order 规定 section 出现的先后顺序 */
            order: 1;
        }

        .right-section {
            order: 2;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <header>
        <h1>块级布局示例</h1>
    </header>
    <main>
        <section class="left-section">
            <h2>左侧区域</h2>
            <p>这是左侧区域的内容。</p>
        </section>
        <section class="right-section">
            <h2>右侧区域</h2>
            <p>这是右侧区域的内容。</p>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
    <script src="main.js"></script>
</body>

</html>

在这里插入图片描述
footer 实现响应式布局

方法一：底部 absolute + bottom: 0;

html, body {
	height: 100%;  /* 1. 需要将页面的高度设置为浏览器可视区的高度 */
}
#container {
	min-height: 100%;  /* 2. 需要将容器的高度设置为 100%  */
	position: relative;  /* 3. 子绝父相  */
}

方法二：底部 margin-top: auto

#container {
	min-height: 100%; 
	display: flex;  /* 容器为 flex 布局 */
	flex-direction: column;  /*  方向为纵向，保证从上到下的文档流 */
}

3. 流式布局

通过设置元素的 display 属性为 flex 或 inline-flex，控制元素在⻚⾯中的位置和⼤⼩，从⽽实现响应式布局。元素按照⽂档流⾃上⽽下排列，宽度⾃适应⽗容器或内容。

<!DOCTYPE html>
<html>

<head>
    <title>简单的流式布局</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        /* 内容区域样式 */
        #content {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
        }

        .box {
            flex-basis: 300px;
            background-color: #f2f2f2;
            padding: 20px;
            margin: 10px;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <header>
        <h1>流式布局示例</h1>
    </header>
    <div id="content">
        <div class="box">
            <h2>盒子 1</h2>
            <p>这是盒子 1 的内容。</p>
        </div>
        <div class="box">
            <h2>盒子 2</h2>
            <p>这是盒子 2 的内容。</p>
        </div>
        <div class="box">
            <h2>盒子 3</h2>
            <p>这是盒子 3 的内容。</p>
        </div>
        <div class="box">
            <h2>盒子 4</h2>
            <p>这是盒子 4 的内容。</p>
        </div>
    </div>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
    <script src="main.js"></script>
</body>

</html>

在这里插入图片描述

4. 定位布局

通过设置元素的 position 属性为 relative、absolute 或 fixed，控制元素在⻚⾯上的位置。

<!DOCTYPE html>
<html>

<head>
    <title>简单的定位布局</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 容器样式 */
        #container {
            position: relative;
            width: 500px;
            height: 300px;
            background-color: #f2f2f2;
        }

        /* 盒子样式 */
        .box {
            position: absolute;
            padding: 20px;
            background-color: #333;
            color: #fff;
        }

        #box1 {
            top: 20px;
            left: 20px;
        }

        #box2 {
            bottom: 20px;
            right: 20px;
        }

        #box3 {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div id="container">
        <div
            id="box1"
            class="box"
        >盒子 1</div>
        <div
            id="box2"
            class="box"
        >盒子 2</div>
        <div
            id="box3"
            class="box"
        >盒子 3</div>
    </div>
    <script src="main.js"></script>
</body>

</html>

在这里插入图片描述

5. 两栏布局

左边为导航栏，右边为⻚⾯内容，左边⽤绝对定位absolution，右边宽度拉满100%。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <title>两栏布局示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body,
    html {
      height: 100%;
      font-family: Arial, sans-serif;
    }

    .container {
      display: flex;
      height: 100%;
    }

    .sidebar {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 200px;
      /* 导航栏宽度 */
      background-color: #f4f4f4;
      padding: 20px;
      /* 其他样式 */
    }

    .content {
      margin-left: 200px;
      /* 与导航栏的宽度一致 */
      padding: 20px;
      background-color: #fff;
      /* 其他样式 */
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="sidebar">
      <!-- 导航栏内容 -->
      <ul>
        <li>导航项 1</li>
        <li>导航项 2</li>
        <li>导航项 3</li>
        <!-- 更多导航项 -->
      </ul>
    </div>
    <div class="content">
      <!-- 页面内容 -->
      <p>这里是页面的主要内容区域。</p>
      <!-- 更多内容 -->
    </div>
  </div>
</body>

</html>

在这里插入图片描述

6. 网格布局

通过设置元素的 display 属性为 grid，使⽤⽹格线将⻚⾯分为若⼲⾏和列，控制元素在⻚⾯中的位置和⼤⼩。

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

        .box {
            width: 1700px;
            height: 500px;
            border: 10px solid gray;
            margin: 100px auto;
            display: grid;
            /* 13 列，每列列宽为 100px */
            grid-template-columns: repeat(13, 100px);
            /* 4 行，每行高度为 100px */
            grid-template-rows: repeat(4, 100px);
            /* 单元格间距 垂直 水平 */
            grid-gap: 10px 10px;
            /* 整体网格居中 */
            place-content: center center;
        }

        .box>div {
            background: pink;
        }

        .box1 {
            /* 横向网格线起始位置 */
            grid-row: 1/3;
            /* 纵向网格线起始位置 */
            grid-column: 12/14;
        }

        .box2 {
            grid-row: 1/2;
            grid-column: 10/12;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
        <div>31</div>
        <div>32</div>
        <div>33</div>
        <div>34</div>
        <div>35</div>
        <div>36</div>
        <div>37</div>
        <div>38</div>
        <div>39</div>
        <div>40</div>
        <div>41</div>
        <div>42</div>
        <div>43</div>
        <div>44</div>
        <div>45</div>
        <div>46</div>
        <div>47</div>
        <div>48</div>
        <!-- <div>49</div> -->
        <!-- <div>50</div>
        <div>51</div>
        <div>52</div> -->
    </div>
</body>

</html>

在这里插入图片描述

7. 浮动布局

通过设置元素的 float 属性，使元素脱离⽂档流并向左或向右浮动，从⽽实现对⻚⾯布局的控制。

<!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>
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
        .container {
            background: lightcoral;
            width: 100%;
            margin: 0 auto;
        }
        .aside {
            float: left;
            background: lightblue;
            color: white;
            width: 300px;
        }
        .main {
            float: right;
            background: lightgreen;
            color: white;
            width: 900px;
        }

    </style>
</head>
<body>
    <div class="container clearfix">
        <aside class="aside">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam nihil illum, eum ratione, at nisi qui temporibus vero assumenda ex quo! Soluta veniam sit omnis dolore possimus deleniti nesciunt mollitia autem facilis ipsa consequatur incidunt amet, vero rerum maxime ea adipisci magni. Architecto, id. Quos, harum assumenda! Dolorum voluptate possimus in. Sapiente, provident veritatis deserunt perspiciatis repellendus minus voluptatem modi harum delectus aspernatur eum molestias veniam adipisci numquam assumenda ratione consequatur quibusdam eaque ea dolorum impedit debitis ullam! Id, unde aspernatur rem eos, eius deleniti, tenetur doloribus odio beatae sint ipsum quisquam tempore aut saepe? Corrupti assumenda nobis amet fuga cum minus rem aperiam voluptatibus tempore! Atque pariatur reprehenderit cum itaque molestiae autem nulla ea ex, facilis id laborum praesentium repellat officiis quo corporis possimus iste. Cum incidunt sunt dicta corrupti deleniti porro, perspiciatis ad doloremque sit beatae omnis iusto provident ipsa corporis at culpa enim eaque totam magni inventore aspernatur officiis consequatur. Quo commodi id dignissimos voluptatibus ipsum dolore. Ea ab dolor atque rerum officiis neque impedit odio autem molestias officia enim accusamus suscipit odit nostrum minima, incidunt animi nam magnam consequuntur iste accusantium. Molestiae voluptate aliquid id, quod quos velit nihil ullam blanditiis beatae, possimus ab asperiores doloremque aperiam sunt doloribus perspiciatis sint tempora quaerat tenetur! Sed reprehenderit impedit architecto eius quam laborum, ducimus eligendi sit molestias optio nulla at aperiam reiciendis dolorum incidunt, nostrum accusamus explicabo quos quisquam illo nisi aut. Aliquam, accusamus at, ex libero placeat laboriosam dolorum tempore voluptates, obcaecati quibusdam doloribus. Esse eum voluptates provident, impedit sunt quia? Aut veniam quos maiores numquam rerum voluptatem accusantium vitae beatae quo, debitis sequi voluptatibus corrupti eaque soluta provident consequuntur facilis aperiam autem excepturi distinctio rem! Omnis, aut. Expedita nesciunt ipsum earum repudiandae sapiente dignissimos blanditiis, mollitia veritatis vitae adipisci ea non dolore ex quisquam numquam suscipit optio perferendis, dolores nemo officiis! Possimus sit laboriosam quos dolorem impedit, fuga eveniet perferendis maiores eos? Similique ipsam corrupti ratione cum suscipit. Vel, illum. Illum omnis eum similique? Odit, maiores. Minima facere ullam beatae eum necessitatibus sit ratione, architecto dicta eligendi quis inventore, dolores distinctio recusandae ut aliquid animi hic placeat corporis vel sint? Commodi, dolore, doloribus quam similique, assumenda suscipit atque consequuntur iste repellendus aliquid qui officia excepturi fugiat tempora impedit odio ab reprehenderit porro aspernatur repudiandae ducimus ut id. Illum, nisi? Aspernatur, dolorem? Qui natus dolorem dolor mollitia dicta animi consequuntur, dolores molestias commodi quae libero architecto accusamus? Consequatur, et harum aut perferendis temporibus explicabo, qui esse minus, unde ea cupiditate. Molestias iste sequi commodi qui ad officiis deleniti adipisci amet unde nostrum excepturi necessitatibus aliquid reiciendis autem, perferendis consequuntur temporibus natus laboriosam nemo cumque, error voluptatibus voluptates aliquam. Magni earum impedit magnam nam, libero possimus optio commodi ipsum quaerat aliquid ratione autem atque consequatur! Laudantium quae iure dolorem at! Impedit laborum, iure illo cum modi sed facere fugit autem ipsa, ullam possimus exercitationem delectus, repudiandae tenetur! Vel eos qui quasi aut ipsa sunt illo voluptate, sapiente tenetur vero aliquam aliquid quas. Eaque, quae cupiditate consequatur nihil impedit expedita odit corrupti ut hic? Dolorem debitis labore itaque quaerat quibusdam, distinctio atque mollitia quo odit aliquid delectus voluptates molestiae ipsum in, vero porro sapiente sint! Ducimus et architecto deleniti fugit obcaecati provident laborum officia animi quod! Omnis optio perferendis saepe, aspernatur earum eveniet, doloribus beatae praesentium itaque at in dolore quaerat est error totam molestias architecto illum, dolores dicta accusantium molestiae veritatis tempore? Assumenda quod dicta cupiditate iste corporis quo dolorum facere consequatur delectus voluptates! Eveniet exercitationem nostrum, praesentium assumenda animi voluptate beatae nobis officia vitae culpa quas veritatis totam ipsum voluptatem? Culpa cum veniam libero blanditiis! Aspernatur, provident similique, amet aperiam ea debitis eaque ex alias labore tempore ab facere incidunt corporis, accusamus porro ipsa rem doloremque id placeat culpa nesciunt. Rerum, dolore? Et, odio vel? Perspiciatis pariatur dolorem, veniam, minima cupiditate aspernatur cum modi dicta in necessitatibus repellat mollitia consectetur. Dignissimos, fugiat minima odio aperiam nesciunt consequuntur id odit sed omnis pariatur, tenetur commodi accusantium nam quis amet? Quisquam laboriosam quod id dolorum architecto repudiandae odit, molestiae dicta mollitia? Obcaecati minima adipisci, dicta ratione repudiandae eaque neque cupiditate aperiam hic, temporibus repellat qui corrupti mollitia ipsa quam? Ad, illum aperiam suscipit mollitia nemo veniam expedita magni, quis, sapiente sit sed. Nostrum eveniet, aperiam asperiores iusto eum ipsum saepe tenetur expedita debitis repellat ex sed eos corporis id quo, voluptate dolorem ad, totam assumenda tempora facilis! Enim quibusdam facere vel necessitatibus praesentium, debitis asperiores accusantium aperiam ullam, quas officiis tempore delectus expedita consequuntur illo quasi odit architecto officia adipisci. Laudantium, velit placeat. Quaerat a quae facere quis, eos neque hic deleniti dolores accusamus quas voluptatum enim odit porro beatae. Labore dolorem aliquam dolores, ab dolor illo eveniet architecto! Doloremque fugiat deserunt, dignissimos molestias quisquam quis repudiandae porro? Facilis modi quibusdam, eaque assumenda enim quo deserunt! Dolorum officia, consequatur recusandae, nostrum a itaque, dolores nesciunt doloribus quas quam fugit quasi eum blanditiis? Magnam fugiat saepe, delectus, quasi quisquam nihil cum soluta deserunt, commodi molestias nostrum explicabo esse autem. Commodi officia laborum nam. Aspernatur beatae, autem aut, nesciunt esse reprehenderit deleniti quis perspiciatis eveniet impedit nam distinctio quae laudantium est voluptate minus ut tempore. Aut deserunt, sapiente, fugiat accusamus ipsum quo obcaecati labore ex nisi quibusdam perspiciatis quos doloremque molestias dignissimos provident impedit doloribus tempore voluptas quasi quod officiis. Ullam, iste eligendi, velit in quidem earum nisi illo inventore exercitationem dignissimos corporis deleniti minus architecto praesentium similique laudantium ad quia. Ex voluptates necessitatibus porro. Possimus error, minus ipsa nostrum praesentium deleniti aut ducimus eveniet velit accusantium quae, sunt corrupti, omnis doloribus fugiat atque aliquam nisi optio! Sit debitis natus aut esse expedita, delectus minima aspernatur aliquid nostrum, error labore tempora odit quo ad velit beatae eaque et quia sapiente, iusto nihil ipsum! Veritatis, exercitationem vel minus nostrum excepturi temporibus sunt debitis aperiam quaerat voluptatibus quod dicta quam aspernatur totam. Magnam voluptates beatae necessitatibus voluptate! In nam culpa, aspernatur laudantium quidem repellat eaque delectus dolores consequatur expedita, similique ex suscipit aliquam totam esse sequi repellendus debitis, blanditiis accusamus? Possimus, hic eligendi!</aside>
        <div class="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore quae ratione cupiditate excepturi? Quidem atque deleniti beatae ut sit sunt culpa quaerat doloremque qui ipsa ex perspiciatis, commodi nemo nobis quod aut laboriosam officia doloribus provident excepturi. Vero, porro quod error, nobis minus quis reiciendis possimus ipsam odit veniam neque saepe eos quibusdam ab voluptas, a nulla. Recusandae fugiat fugit eveniet quos consequuntur impedit sed fuga magnam, harum laborum rerum eius tempore, neque voluptatum! Sequi maxime sint quia aspernatur quisquam excepturi magnam, corporis, vero ut, aut consequuntur sed ipsa asperiores fugit. Tempora nulla perspiciatis earum, vel esse reiciendis. Aliquam cumque totam fugiat velit doloremque nulla adipisci ea harum, placeat fuga autem nam dolore necessitatibus, alias ipsam officiis voluptates tempore a corrupti minus magni numquam incidunt neque. Voluptas repellat obcaecati rem eveniet. Enim nam dolor praesentium explicabo dignissimos ullam quam aperiam optio odio in eaque illum distinctio et, ea sit error ipsam quos sint ducimus voluptatum facilis debitis accusantium molestiae sunt! Aliquid fugiat possimus quod est vero dolorum, incidunt debitis totam eum cupiditate illo obcaecati quisquam ut recusandae veritatis ad molestiae hic reprehenderit at repudiandae laborum officia adipisci ullam earum? Consequatur officia maiores incidunt deserunt commodi, cumque totam ullam sunt cupiditate sequi rem impedit aspernatur ratione doloribus vitae sed corrupti sint, quae, eaque tempora voluptates laborum voluptas fugiat fuga? Maiores odit a, porro sit eum labore soluta magnam necessitatibus hic veritatis placeat laboriosam sequi? Atque aperiam, quisquam adipisci aut repudiandae quae animi maiores autem dicta perspiciatis quod deleniti. Quaerat dolor nesciunt natus dolores ullam dolorem veniam dolore repellendus est, libero blanditiis commodi. Vero dolorum eius nostrum ratione amet omnis consectetur ipsa inventore perferendis a dolores ex repudiandae vitae eligendi magnam, natus cumque officiis blanditiis soluta mollitia quibusdam. Sapiente iste maxime totam, rem quasi veritatis corporis expedita deserunt qui, officiis nemo consequatur. Accusamus ullam incidunt deleniti. Soluta, deserunt odit cupiditate, accusamus deleniti animi voluptate non officia optio dolores quos provident repellat eaque quae quo sit labore molestiae, iure quas reiciendis aspernatur porro officiis quibusdam. Fugiat, soluta, sint qui laboriosam modi nisi ipsa eligendi aspernatur totam sunt, sapiente quibusdam odio non autem nobis facilis cumque tempore ipsam. Velit eum dolores debitis sint exercitationem officia, dolor praesentium quae, nostrum illo, voluptatum sit maxime. Porro voluptatibus illum, nemo doloremque repudiandae iste molestiae deleniti enim excepturi rem quasi obcaecati adipisci odit explicabo laborum hic placeat, molestias optio beatae voluptatem. Libero, suscipit recusandae, ullam unde at, laudantium quidem aliquid accusamus repudiandae consequuntur a quo voluptates praesentium. Nostrum maiores, animi qui nihil optio explicabo enim ad laborum tempora! Repellat nam voluptates, maiores commodi ex hic est ab dolor sint illum ea, architecto esse totam delectus rerum nisi animi fuga laborum atque blanditiis a molestias aliquid quae. Totam, quam ab doloribus corrupti impedit suscipit amet tenetur? Velit repudiandae eveniet aut minus quia earum dolorem mollitia explicabo corrupti, iusto rem suscipit asperiores provident. Assumenda vel nesciunt autem quibusdam illo aut atque repudiandae dolorum commodi nisi sapiente voluptatem possimus, eum cumque ullam asperiores pariatur suscipit, sequi repellendus quos. Perferendis magni, maiores autem, itaque minima tempore distinctio cumque amet quos voluptatem culpa dolorem iure, rem nemo? Praesentium, voluptatem quis? Saepe iste repudiandae sapiente, rem exercitationem, ad deserunt ducimus nesciunt voluptas ipsa reiciendis commodi beatae voluptates voluptate unde facere sit aliquid explicabo cupiditate asperiores suscipit odit aut! Quasi quidem, blanditiis rem quia nisi ipsa iusto quod commodi, eos hic numquam incidunt impedit perspiciatis dicta esse! Dicta, ducimus deserunt dignissimos molestias est beatae in laborum quam obcaecati perferendis ipsum, voluptatibus dolor unde sed quod ea. Atque ad doloremque quibusdam perferendis facere excepturi quasi velit dignissimos, fuga repellat? Minus officiis, consequuntur aut natus ipsum, unde recusandae quam pariatur expedita, provident repellendus magni possimus doloribus cum. Animi, culpa voluptate totam voluptatem, at odio velit eveniet dolores vel alias quibusdam ab hic tempora! Consequatur nam commodi qui sint aliquam nulla corporis voluptatibus officiis, similique eaque fuga quae, voluptate animi ullam cumque vitae placeat repudiandae porro beatae assumenda saepe magni labore ratione? Sapiente velit quo, quasi id obcaecati dolore neque saepe quibusdam omnis est suscipit corporis eum molestiae at excepturi tenetur doloremque enim recusandae eligendi doloribus natus. Totam rem veniam magni quidem reiciendis at ipsa recusandae in a nihil. Odit repudiandae qui ipsa iure assumenda, dolorum inventore a dolor minima cum distinctio magni, animi suscipit enim dicta quae corrupti quisquam dolores alias ratione. Asperiores ipsa, error quas veniam nobis fuga porro necessitatibus! Soluta nostrum, ipsum praesentium exercitationem optio illum ducimus expedita itaque a sapiente aut tempora vel perspiciatis autem facere nisi fugit maiores eius! Illum dignissimos sunt aperiam ea dolorem veritatis, corporis sequi porro earum harum voluptatem nemo. Facilis a numquam aliquid, omnis facere libero maiores at maxime ex dolor quae placeat animi veritatis sed harum quis cupiditate voluptatem aspernatur eius voluptates. Laborum necessitatibus quae consequuntur nemo dolore dolor facere velit. Vel perspiciatis dolor unde omnis maxime dolore nemo nam quae nisi quod voluptatem at earum sequi sunt ipsa eligendi expedita, quas impedit soluta ab saepe! Officia ducimus impedit iste, reprehenderit odit perspiciatis beatae fuga illum id, distinctio aliquid perferendis. Placeat perferendis, nesciunt minima, quisquam, magnam at illo molestiae totam aliquid earum doloribus in. Laudantium accusamus perferendis quod. Laboriosam inventore modi eligendi fugit possimus vel dicta dolor, quos asperiores accusamus, provident debitis quidem blanditiis, ipsam placeat earum! Perferendis saepe sint, dolores odio nam delectus, hic dolore, accusamus sed dolor laboriosam totam. Neque cupiditate saepe dignissimos, rerum, alias magni consectetur, distinctio odit illo modi impedit. Nisi porro officiis dolores vel molestiae, eum, aperiam iure fugit libero enim blanditiis praesentium! Velit dicta doloribus dolorum ullam facilis, id consectetur, tempora vero quibusdam molestias reprehenderit? Odio quod harum expedita aperiam veritatis ab nam aut numquam et, odit, mollitia similique quidem, sit deserunt. Voluptatum nostrum mollitia aperiam nemo tenetur doloribus quis eum cum quam aspernatur dicta dolorem consectetur explicabo velit exercitationem adipisci necessitatibus animi nesciunt eius earum cupiditate repudiandae, ipsum alias. Pariatur nulla perferendis ab quia hic, commodi, facilis esse tenetur quisquam omnis architecto cupiditate impedit! Natus ullam adipisci nulla distinctio iusto, consectetur non, minima, harum blanditiis reprehenderit illum quidem perspiciatis repellat quibusdam.</div>
    </div>
</body>
</html>

在这里插入图片描述
将 .main 样式去掉 float，加上 overflow: hidden; 可以创建 bfc，使得左侧定宽，右侧自适应宽度。

8. 响应式布局

可以根据设备屏幕的⼤⼩和⽅向⾃动调整⻚⾯布局，以提供更好的⽤户体验。

9. 粘性布局

粘性布局（Sticky Layout）：将元素粘贴在视图中的特定位置，通常在滚动时保持可⻅。可以使⽤ position: sticky; 属性来实现。

小秀_heo

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS】常见 CSS 布局

通过设置元素的 margin、padding、border 等属性，控制元素在⻚⾯中的位置和⼤⼩。这是最基本的布局⽅式，它使元素在⻚⾯上垂直堆叠。这种布局适⽤于单个⻚⾯元素或简单的⻚⾯结构。实现响应式布局方法二：底部 3. 流式布局通过设置元素的 display 属性为 flex 或 inline-flex，控制元素在⻚⾯中的位置和⼤⼩，从⽽实现响应式布局。元素按照⽂档流⾃上⽽下排列，宽度⾃适应⽗容器或内容。通过设置元素的 position 属性为 relative、absolut
复制链接

扫一扫