常见的布局方式

五彩斑斓黑123

已于 2023-04-19 11:31:12 修改

阅读量381

点赞数 2

分类专栏：技术小白 css 文章标签： css html css3

于 2023-03-26 23:20:24 首次发布

本文链接：https://blog.csdn.net/qq_69444691/article/details/129763582

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

技术小白

5 篇文章 0 订阅

订阅专栏

1.弹性布局---flex布局

弹性布局是一种常见且好用的布局方式，它可以让结构中的内容自适应不同的分辨率，简化的代码的书写。

使用方法

给父盒子加上display:flex;默认子元素不换行，如果装不开，子元素会缩小元素的宽度。

父级元素常用属性

flex-direction 设置主轴方向，默认水平为主轴。row:水平为主轴，column：竖直方向为主轴
justify-content 设置主轴方向上子元素的排列方式。 flex-start:默认从头开始，如果主轴是x轴，则从左往右；flex-end:从尾部开始；center:在主轴居中对齐；space-around:平分剩余空间；space-between:先两边贴边，再平分剩余空间
flex-wrap 设置是否换行。 wrap，换行，如果放不下，则会换行；nowrap：不换行，当父级装不下，则会压缩子元素。
align-items 设置侧周上的子元素排列方式 --单行
align-content 设置侧周上的子元素排列方式 --多行
flex-flow 复合属性，相当于同时设置了flex-direction 和 flex-wrap

代码演示（部分属性）

<!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>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    li {
      list-style: none;
    }
    .box {
      width: 700px;
      height: 300px;
      margin: 100px auto;
      background-color: pink;
    }
    ul {
      display: flex;
      flex-direction: row; /*设置主轴方向*/
      justify-content: space-between; /*设置主轴上元素排列方式*/
      flex-wrap: wrap; /*设置是否换行*/
      align-items: center; /* 设置侧周方向上子元素排列方式 -- 单行*/
      /* align-content: space-between; */ /* 设置侧周方向上子元素排列方式 --多行*/
      /* flex-flow: row wrap; */ /* 同时设置主轴方向和是否换行 */
    }
    li {
      width: 200px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      background-color: skyblue;
    }
    ul {
      height: 100%;
    }
    li:nth-child(2) {
      background-color: purple;
    }
    li:nth-child(3) {
      background-color: lightgreen;
    }
    li:last-child {
      background-color: red;
    }
  </style>
  <body>
    <div class="box">
      <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
      </ul>
    </div>
  </body>
</html>

子项目常用属性

flex 定义子项分配剩余的空间，用flex表示占据多数分数
align-self align-self属性允许单个项目有与其他项目不一样的对齐方式，且可覆盖 align-items属性。默认值为auto，表示子项继承父项的align-items属性。
order 用来定义子项目的排列顺序，数值越小，排列越靠前，默认值为0。

2.grid布局。

grid是二维布局方式，可以同时控制行和列的排布和对齐方式。

使用方法

要开启grid布局，只需要给父级盒子加上display:grid。

常用属性

grid-template-columns：定义每一列的宽度
grid-template-rows：设置每一行的宽度

grid-template-rows和grid-template-columns的参数可以是一个固定值也可以是fr（浮动宽度，是grid布局专有单位，代表grid剩余空间）

row-gap：设置行间距
column-gap：设置列间距
gap：统一设置行间距和列间距

css代码演示

  ul {
      display: grid;
      /* grid-template-columns: 100px 100px 100px; */ /* 将子元素设置为三列，每列宽度为100px */
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: 1fr 1fr;
      /* column-gap: 20px; 设置列间距 */
      /* row-gap: 10px; 设置行间距 */
      gap: 10px 20px; /* 统一设置行间距和列间距 */
    }

效果

grid-template-areas：排列元素；grid-area：指定元素对应的区域

代码演示

<!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>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box {
      display: grid;
      /* 设置元素排列方式 */
      grid-template-areas: 'header header header' 'sidebar content content' 'footer footer footer';
      width: 50%;
      height: 40vh;
      margin: 100px auto;
    }
    header {
      /* 指定当前元素对应的区域 */
      grid-area: header;
      background-color: lightcoral;
    }
    aside {
      grid-area: sidebar;
      background-color: lightgreen;
    }
    main {
      grid-area: content;
      background-color: lightblue;
    }
    footer {
      grid-area: footer;
      background-color: lightpink;
    }
  </style>
  <body>
    <div class="box">
      <header>这里是头部区域</header>
      <aside>侧边栏区域</aside>
      <main>内容区域</main>
      <footer>底部区域</footer>
    </div>
  </body>
</html>

效果