CSS布局方法

顺晟科技

2021-09-23 10:32:04

130

CSS的常见的布局方式
（1）flex布局

采用flex布局的元素叫做容器，其所有的子元素自动成为容器成员，成为flex项目

容器属性：

flex-direction：row | row-reverse | column | column-reverse
row: 主轴为水平方向，起点在左边
row-reverse：主轴为水平方向，起点在右方
column：主轴为垂直方向，起点在上沿
column：主轴为垂直方向，起点在下方flex-wrap：nowrap｜wrap｜wrap-reverse
nowrap：不换行（默认）
wrap: 换行，行在上方
wrap-reverse：换行，行在下方flex-flow： flex-direction 和 flex-wrap的简写形式justify-content：flex-start ｜ flex-end ｜ center ｜ space-between ｜ space-around

align-items：定义项目在交叉轴上如何对齐
flex-start｜flex-end｜center｜stretch｜space-between｜space-around｜stretch

项目属性

order：定义项目的排列顺序，数值越小，排列越靠前，默认为0flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间也不放大
如果所有项目的flex-grow属性为1，则它们将等分剩余空间（如果有的话），如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间比其他项多一倍flex-shrink：定义项目的缩小比例，默认为1，如果空间不足，该项目会缩小
如果所有的项目的flex-shrink都为1，当空间不足时，都将等比例缩小，如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性不生效。flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目本来大小flex：flex-grow，flex-shrink，flex-basis的缩写

（2）grid布局
网格布局（grid）是最强大的css布局
采用网格布局的区域叫做容器，容器内部采用网格定位的子元素，称为项目。

容器属性

display: grid ｜ inliine-grid 指定一个容器采用网格布局grid-template-columns: 定义每一列的宽度gird-template-rows：定义每一行的行高grid-row-gap：用来设置行间距grid-column-gap：用来设置列间距grid-gap：<gid-row-gap> <grid-column-gap>

项目属性

grid-column-start：左边框所在的垂直网格线grid-column-end：右边框所在的垂直网格线grid-row-start：上边框所在的水平网格线grid-row-end：下边框所在的水平网格线grid-column：是grid-column-start 和 grid-column-end 的简写grid-row：是grid-row-start 和 grid-row-end 的简写

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

justify-self：设置单元格内容的水平位置（左中右）align-self：设置单元格内容的垂直位置（上中下）place-self：align-self属性和justify-self属性的合并简写形式。

圣杯和双飞翼布局，都是三栏，中间自适应的布局

（3）圣杯布局

首先把left、middle、right都放出来给它们三个设置上float: left, 脱离文档流一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档left、right设置上各自的宽度middle设置width:
接下来比较重要给left、middle、right设置position: relative;left设置 left: -leftWidth, right设置 right: -rightWidth;container设置padding: 0, rightWidth, 0, leftWidth;

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圣杯布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .header,
    .footer {
      height: 100px;
      line-height: 100px;
      background-color: green;
      text-align: center;
      font-size: 30px;
      font-weight: bolder;
    }

    .footer {
      background-color: goldenrod;
    }

    .container {
      padding: 0 220px 0 200px;
      overflow: hidden;
    }

    .left,
    .middle,
    .right {
      position: relative;
      float: left;
      min-height: 130px;
      word-break: break-all;
    }

    .left {
      margin-left: -;
      left: -200px;
      width: 200px;
      background-color: red;
    }

    .right {
      margin-left: -220px;
      right: -220px;
      width: 220px;
      background-color: green;
    }

    .middle {
      width: ;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div>header</div>
  <div>
    <div>
      <h4>middle</h4>
      <p>
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddle
      </p>
    </div>
    <div>
      <h4>left</h4>
      <p>
        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
      </p>
    </div>
    <div>
      <h4>right</h4>
      <p>
        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightright
      </p>
    </div>
  </div>
  <div>footer</div>
</body>

</html>

（4）双飞翼布局
双飞翼布局和圣杯布局很类似，不过是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。

首先把left、middle、right都放出来, middle中增加inner给它们三个设置上float: left, 脱离文档流；一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档left、right设置上各自的宽度middle设置width:
接下来和圣杯布局不一样的地方left设置 margin-left: -, right设置 right: -rightWidthcontainer设置padding: 0, rightWidth, 0, leftWidth

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>双飞翼布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .header,
    .footer {
      height: 100px;
      line-height: 100px;
      background-color: green;
      text-align: center;
      font-size: 30px;
      font-weight: bolder;
    }

    .footer {
      background-color: goldenrod;
    }

    .container {
      overflow: hidden;
    }

    .left,
    .middle,
    .right {
      float: left;
      min-height: 130px;
      word-break: break-all;
    }

    .left {
      margin-left: -;
      width: 200px;
      background-color: red;
    }

    .right {
      margin-left: -220px;
      width: 220px;
      background-color: green;
    }

    .middle {
      width: ;
      height: ;
      background-color: blue;
    }

    .inner {
      margin: 0 220px 0 200px;
      min-height: 130px;
      background: blue;
      word-break: break-all;
    }
  </style>
</head>

<body>
  <div>header</div>
  <div>
    <div>
      <div>
        <h4>middle</h4>
        <p>
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddle
        </p>
      </div>
    </div>
    <div>
      <h4>left</h4>
      <p>
        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
      </p>
    </div>
    <div>
      <h4>right</h4>
      <p>
        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightright
      </p>
    </div>
  </div>
  <div>footer</div>
</body>

</html>

参考文献：https://juejin.cn/post/684490...

上一篇：网格布局-简单语法下一篇：了解如何使用CSS代码来提高列表页面

网站建设

Css

CSS布局方法