常用布局总结

2024年3月9日 147次阅读来源: SJJ0330

一、两列布局

1.1 左列定宽，右列自适应

1）利用float + margin实现（方法1）

HTML代码：

<div class="two-col-1">
  <div class="left">左列定宽</div>
  <div class="right">右列自适应</div>
</div>

CSS代码：

.left {
  width: 600px;
  height: 400px;
  background-color: pink;
  float: left;
}
.right {
  height: 400px;
  background-color: skyblue;
  margin-left: 600px;
}

2）利用float + margin实现（方法2）

HTML代码：

<div class="two-col-2">
  <div class="left">左列定宽</div>
  <div class="right-fix">
    <div class="right">右列自适应</div>
  </div>
</div>

CSS代码：

.left {
  width: 100px;
  height: 400px;
  background-color: #33cccc;
  float: left;
}
.right-fix {
  margin-left: -100px;
  width: 100%;
  float: right;
}
.right {
  margin-left: 100px;
  height: 400px;
  background-color: #876ed7;
}

3）利用float + overflow实现

HTML代码：

<div class="two-col-3">
   <div class="left">左列定宽</div>
   <div class="right">右列自适应</div>
</div>

CSS代码：

.left {
  width: 100px;
  height: 400px;
  background-color: #d25fd2;
  float: left;
}
.right {
  height: 400px;
  background-color: #d235d2;
  overflow: hidden;
}

解析: div.right设置overflow: hidden形成BFC，不与div.left的float box重叠，宽度达到自适应。
BFC（block formatting context，块级格式化上下文）
创建BFC的情况：
1、浮动元素（float: left | right）；
2、绝对定位元素（position: absolute | fixed）；
3、行内块元素（display: inline-block）；
4、表格的单元格（display: table-cells，td、th）；
5、表格的标题（display: table-captions | table-caption）；
6、’overflow’ 特性不为visible 的元素；
7、弹性盒 (display: flex | inline-flex)；
BFC布局规则：
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
3、每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。（#）
4、BFC的区域不会与float box重叠。（#）
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之亦然。
6、计算BFC的高度时，浮动元素也参与计算（清除浮动）。
因为BFC内部的元素和外部的元素绝对不会互相影响，因此，本例中当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
1）和3）的异同：
相同点：两者的 div.left 都采用float浮动
不同点：
1）的 div.right 使用 margin-left 改变宽度。
3）的 div.right 使用 overflow: hidden 自身形成BFC自适应宽度，不需要关注 div.left 的定宽。

4）利用table实现

HTML代码：

<div class="two-col-4">
   <div class="left">左列定宽</div>
   <div class="right">右列自适应
      <div></div>
      <div></div>
   </div>
</div>

CSS代码：

.two-col-4 {
  width: 100%;
  height: 400px;
  display: table;
}
.left, .right {
  display: table-cell; /* 利用单元格自动分配宽度 */
}
.left {
  width: 100px;
  background-color: #ff9040;
}
.right {
  background-color: #ffb273;
}
.right div{
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 30px;
}

缺点：display: table-cell形成BFC，造成margin collapse。属于同一个BFC的两个相邻Box的margin会发生重叠。

5）使用position实现

HTNML代码：

<div class="two-col-5">
  <div class="left">左列定宽</div>
  <div class="right">右列自适应</div>
</div>

CSS代码：

.two-col-5 {
  position: relative;
}
.left {
  width: 100px;
  height: 400px;
  background-color: #f7fe00;
  position: absolute;
  top: 0;
  left: 0;
}
.right {
  height: 400px;
  background-color: #52e93a;
  position: absolute;
  top: 0;
  left: 100px;
  right: 0;
}

6）使用flex实现

HTML代码：

<div class="two-col-6">
   <div class="left">左列定宽</div>
   <div class="right">右列自适应</div>
</div>

CSS代码：

.two-col-6 {
  width: 100%;
  height: 400px;
  display: flex;
}
.left {
  width: 100px;
  background-color: #39e639;
}
.right {
  flex: 1;
  background-color: #67e667;
}

解析：flex 是 flex-grow、flex-shrink 和 flex-basis 的简写。
flex-grow：用来“瓜分”父项的“剩余空间”
flex-shrink：设置子项的缩小比例，默认为1，即如果父项空间不足，该项目将缩小。
flex-basis：用于设置子项的占用空间。如果设置了值，则子项占用的空间为设置的值；如果没设置或者为auto，那子项的空间为width/height 的值。

1.2 右侧定宽，左侧自适应

1）使用float + overflow 实现

HTML代码：

<div class="two-col-r-2">
   <div class="right">右列定宽</div> <!-- 先写div.right -->
   <div class="left">左列自适应</div>
</div>

CSS代码：

.left {
  height: 400px;
  background-color: pink;
  overflow: hidden; /* BFC */
}
.right {
  width: 100px;
  height: 400px;
  background-color: skyblue;
  float: right;
}

1.3 一列不定，一列自适应

1）使用float + overflow实现

HTML代码：

<div class="two-col-lr-1">
  <div class="left">左列不定宽</div>
  <div class="right">右列自适应</div>
</div>

CSS代码：

.left {
  height: 400px;
  background-color: #ff9040;
  float: left; /* 只设浮动，不设宽度 */
}
.right {
  height: 400px;
  background-color: #ffb273;
  overflow: hidden; /* 触发BFC */
}

2）使用flex实现

HTML代码：

<div class="two-col-lr-2">
  <div class="left">左列不定宽</div>
  <div class="right">右列自适应</div>
</div>

CSS代码：

.two-col-lr-2 {
  display: flex;
}
.left { /* 不设宽度 */
 height: 400px;
 background-color: #f63e62;
}
.right {
 height: 400px;
 background-color: #f66f89;
 flex: 1; /* 均分父项剩余部分 */
}

二、三列布局

2.1 两列定宽，一列自适应

1）使用float + margin实现

HTML代码：

<div class="tri-col-1">
   <div class="left">左列定宽</div>
   <div class="center">中间定宽</div>
   <div class="right">右列自适应</div>
</div>

CSS代码：

.tri-col-1 {
  min-width: 300px;
}
.left {
  width: 100px;
  height: 400px;
  background-color: #ed002f;
  float: left;
}
.center {
  width: 200px;
  height: 400px;
  background-color: #f63e62;
  float: left;
}
.right {
  margin-left: 300px;
  height: 400px;
  background-color: #f66f89;
}

2）使用float + overflow实现

HTML代码：

<div class="tri-col-2">
   <div class="left">左列定宽</div>
   <div class="center">中间定宽</div>
   <div class="right">右列自适应</div>
</div>

CSS代码：

.tri-col-2 {
  min-width: 300px;
}
.left {
  width: 100px;
  height: 400px;
  background-color: #ff7400;
  float: left;
}
.center {
  width: 200px;
  height: 400px;
  background-color: #ff9640;
  float: left;
}
.right {
  height: 400px;
  background-color: #ffb273;
  overflow: hidden; /* 触发BFC */
}

3）使用table实现

HTML代码：

<div class="tri-col-3">
  <div class="left">左列定宽</div>
  <div class="center">中间定宽</div>
  <div class="right">右列自适应</div>
</div>

CSS代码：

.tri-col-3 {
  width: 100%;
  height: 400px;
  display: table;
}
.left {
  width: 100px;
  background-color: #ffc900;
  display: table-cell;
}
.center {
  width: 200px;
  background-color: #ffd640;
  display: table-cell;
}
.right {
  background-color: #ffe173;
  display: table-cell;
}

4）使用flex实现

HTML代码：

<div class="tri-col-4">
   <div class="left">左列定宽</div>
   <div class="center">中间定宽</div>
   <div class="right">右列自适应</div>
</div>

CSS代码：

.tri-col-4 {
  height: 400px;
  display: flex;
}
.left {
  width: 100px;
  background-color: #00cc00;
}
.center {
  width: 200px;
  background-color: #39e639;
}
.right {
  background-color: #67e667;
  flex: 1; /* 均分父项剩余部分达到自适应 */
}

2.2 两侧定宽，中间自适应

1）使用flex实现

HTML代码：

<div class="tri-col-lr-1">
   <div class="left">左列定宽</div>
   <div class="center">中间自适应</div>
   <div class="right">右列定宽</div>
</div>

CSS代码：

.tri-col-lr-1 {
  height: 400px;
  display: flex;
}
.left{
  width: 100px;
  background-color: #bc008d;
}
.center {
  flex: 1; /*均分父项剩余的部分*/
  background-color: #dd37b4;
}
.right {
  width: 200px;
  background-color: #dd64bf;
}

2）使用position实现

HTML代码：

<div class="tri-col-lr-2">
   <div class="left">左列定宽</div>
   <div class="center">中间自适应</div>
   <div class="right">右列定宽</div>
</div>

CSS代码：

.tri-col-lr-2 {
  position: relative;
}
.left {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #00af64;
}
.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 400px;
  background-color: #37dc74;
}
.right {
  width: 200px;
  height: 400px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #63dc90;
}

三、多列等宽布局

1）利用table实现

HTML代码：

<div class="multi-col-1">
   <div class="col">1</div>
   <div class="col">2</div>
   <div class="col">3</div>
   <div class="col">4</div>
   <div class="col">5</div>
</div>

CSS代码：

.multi-col-1 {
  width: 100%;
  height: 400px;
  display: table;
}
.col {
  display: table-cell; /* 无需关注列数，单元格自动平分 */
}
.col:nth-child(odd) {
  background: pink;
}
.col:nth-child(even) {
  background: lightgreen;
}

2）利用flex实现

HTML代码：

<div class="multi-col-2">
   <div class="col">1</div>
   <div class="col">2</div>
   <div class="col">3</div>
   <div class="col">4</div>
   <div class="col">5</div>
</div>

CSS代码：

.multi-col-2 {
  height: 400px;
  display: flex;
}
.col {
  flex: 1; /* 无需关注列数，自动平分 */
}
.col:nth-child(odd) {
  background: lightcoral;
}
.col:nth-child(even) {
  background: yellow;
}

四、九宫格布局

1）使用table实现

HTML代码：

<div class="squ-1">
  <div class="row">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
  </div>
  <div class="row">
     <div class="item">4</div>
     <div class="item">5</div>
     <div class="item">6</div>
  </div>
  <div class="row">
     <div class="item">7</div>
     <div class="item">8</div>
     <div class="item">9</div>
  </div>
</div>

CSS代码：

.squ-1 {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  display: table;
}
.row {
  display: table-row;
}
.item {
  display: table-cell;
  border: 1px solid red;
}

2）使用flex实现

HTML代码：

<div class="squ-1">
  <div class="row">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
  </div>
  <div class="row">
     <div class="item">4</div>
     <div class="item">5</div>
     <div class="item">6</div>
  </div>
  <div class="row">
     <div class="item">7</div>
     <div class="item">8</div>
     <div class="item">9</div>
  </div>
</div>

CSS代码：

.squ-2 {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  flex: 1;
}
.item {
  flex: 1;
  border: 1px solid skyblue;
}

    原文作者：SJJ0330
    原文地址: https://segmentfault.com/a/1190000019810101
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。