Web前端入门第 34 问：CSS 常见布局

Web 网页中，所有元素都是盒模型构成的，一个大盒子套一个或者多个小盒子，再用更大的盒子把大盒子给圈起来，这就构成了基本的 HTML 结构，再利用 CSS 把盒子装修得好看一些，最后把它放在正确位置，就是我们所看到的网页。

布局的作用就是要把元素摆放在合适的位置，让网页看起来不显得空闹闹的，也不要显得拥挤。

要摆放元素到合适的位置不是设置某一个元素能达到效果的，而是经常需要父元素和子元素配合，才能达到目标。

元素堆叠

看这么一段的代码，没有任何控制布局情况下，元素会按照出现顺序进行堆叠显示

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
<style>
  .box {
    font-size: 20px;
    margin: 20px;
    width: 250px;
    height: 180px;
    border: 2px solid #ff4757;
  }
  .box .item {
    border: 2px solid rgba(0,255,0,1);
    width: 30px;
    height: 30px;
  }
</style>

效果：

需求一

现要求元素控制在一行显示。

flex 弹性盒子

给外层盒子添加 display: flex; 即可将元素改为弹性盒子。

.box {
  display: flex;
}

效果：

grid 网格

让外层盒子变为网格，可让元素在一行中显示。

.box {
  display: grid;
  grid-template-columns: repeat(auto-fit, 30px);
}

效果：

inline-block 内联块

除了 flex，还可以控制子元素显示为内联块 inline-block，让元素在一行中显示。

.box .item {
  display: inline-block;
}

效果：

注意：inline-block 让元素变为了内联块，会像文字、图片一样排版，所以元素之间会存在空隙，其空隙其实是元素之间的换行符造成的，可设置 font-size 为 0，让元素之间没有空隙。

float 元素浮动

还可以给元素添加浮动，让元素在一行中显示。

.box .item {
  float: left;
}

效果：

需求二

现要求元素在盒子中居中显示。

flex 弹性盒子

.box {
  display: flex;
  justify-content: center;
}

grid 网格

.box {
  display: grid;
  grid-template-columns: repeat(auto-fit, 30px);
  justify-content: center;
}

inline-block 内联块

.box {
  text-align: center;
}
.box .item {
  display: inline-block;
}

效果

为什么没有 float ？float 没办法做到元素居中显示，嗯...也不是做不到，只是需要通过计算获得元素 margin 或 padding，用边距做出出居中效果。

需求三

元素两端对齐显示。

flex 弹性盒子

.box {
  display: flex;
  justify-content: space-between;
}

grid 网格

.box {
  display: grid;
  grid-template-columns: repeat(auto-fit, 30px);
  justify-content: space-between;
}

效果

可以明显看到，随着需求越来越复杂，能用的方法就越少了。

其实 float 和 inline-block 也不是做不到这种效果，还是像上面说的一样，必须要通过计算获得边距，才能做出我们想要的样子。

需求四

元素等宽间距显示。

flex 弹性盒子

.box {
  display: flex;
  justify-content: space-around;
}

grid 网格

.box {
  display: grid;
  grid-template-columns: repeat(auto-fit, 30px);
  justify-content: space-around;
}

效果

需求五

如果元素大小不统一，默认显示效果是这样：

怎么让元素垂直居中显示？

flex 弹性盒子

.box {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

grid 网格

.box {
  display: grid;
  grid-template-columns: repeat(auto-fit, 30px);
  justify-content: space-around;
  align-items: center;
}

效果

需求六

第二个元素定位在盒子右上角。

这时候 flex、grid 都不能实现，只能通过 position 来实现了。

position 元素定位

position 属性对应的值有：

• static 默认值，元素在正常文档流中显示。
• relative 相对定位，元素在正常文档流中显示，但可以通过 top、right、bottom、left 属性来定位。
• absolute 绝对定位，元素脱离正常文档流，且不再占用文档流空间，可以通过 top、right、bottom、left 属性来设置位置，其位置相对于最近的非 static 祖先元素，如果找不到，则相对于浏览器窗口。
• sticky 粘性定位，如果元素正常显示，则跟 static 一样，如果元素跑到视口之外，则跟 absolute 一样，但其位置相对 可滚动 的祖先元素。
• fixed 固定定位，元素脱离正常文档流，切不再占用文档流空间，可以通过 top、right、bottom、left 属性来设置位置，其位置相对于浏览器窗口。

实现需求：

.box {
  position: relative;
}
.box .item:nth-child(2) {
  position: absolute;
  right: 0;
  top: 0;
}

效果

总结

本文仅介绍了常见的布局场景，开发中的需求千奇百怪，本文介绍的方法可能无法满足需求，这时候就需要发挥想象，在这些基础的布局方法上进行组合了。