CSS 常见布局

· 1024 words · 6 min

前端工程师的一门必修课程就是 CSS ( Cascading Style Sheet, 层叠样式表)，CSS 是一门艺术，学好 CSS 需要投入大量的时间去实践。今天我们主要聊一聊工作中常用到的 CSS 布局套路。

说明

内联元素指 display: inline，块级元素指 display: block，弹性布局指 display: flex。

水平居中

使用 margin（块级元素）

<style>
  .child {
    width: 300px;
    margin: 0 auto;
  }
</style>

<div class="parent">
  <div class="child">BLOCK</div>
</div>

使用绝对定位（块级元素 & 内联元素）

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
</style>

<body>
  <div class="parent">
    <span class="child">INLINE</span>
  </div>

  <div class="parent">
    <div class="child">BLOCK</div>
  </div>
</body>
提示

top、bottom、left、right 等属性参考父元素，而 translate 属性参考自身。绝对定位会使内联元素的 display 属性为 block。

使用 flex 布局（块级元素 & 内联元素）

<style>
  .parent {
    display: flex;
    justify-content: center;
  }
</style>

<body>
  <div class="parent">
    <span class="child">INLINE</span>
  </div>

  <div class="parent">
    <div class="child">BLOCK</div>
  </div>
</body>

垂直居中

父元素设置 padding（内联元素）

<style>
  .parent {
    padding: 10px;
  }
</style>

<div class="parent">
  <span class="child">INLINE</span>
</div>

使子元素 line-height 与父元素 height 等高（块级元素 & 内联元素）

<style>
  .parent {
    height: 50px;
  }
  .child {
    line-height: 50px;
  }
</style>

<body>
  <div class="parent">
    <span class="child">INLINE</span>
  </div>

  <div class="parent">
    <div class="child">BLOCK</div>
  </div>
</body>
提示

内联元素的高度是由其中文字的 line-height 决定的，当内联元素的 line-height 等于其父元素的 height 时，内联元素垂直居中，且其中的文字也是垂直居中的。

使用绝对定位（块级元素 & 内联元素）

<style>
  .parent {
    position: relative;
  }
  .child {
    postion: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>

<body>
  <div class="parent">
    <span class="child">INLINE</span>
  </div>

  <div class="parent">
    <div class="child">BLOCK</div>
  </div>
</body>

使用 flex 布局（块级元素 & 内联元素）

<style>
  .parent {
    display: flex;
    align-items: center;
  }
</style>

<body>
  <div class="parent">
    <span class="child">INLINE</span>
  </div>

  <div class="parent">
    <div class="child">BLOCK</div>
  </div>
</body>

水平垂直居中

使用绝对定位（块级元素 & 内联元素）

<style>
  .parent {
    position: relative;
  }
  .child {
    postion: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<body>
  <div class="parent">
    <span class="child">INLINE</span>
  </div>

  <div class="parent">
    <div class="child">BLOCK</div>
  </div>
</body>

或者

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>

<body>
  <div class="parent">
    <span class="child">INLINE</span>
  </div>

  <div class="parent">
    <div class="child">BLOCK</div>
  </div>
</body>

使用 flex 布局（块级元素 & 内联元素）

<style>
  .parent {
    display: flex;
  }
  .child {
    margin: auto;
  }
</style>

<body>
  <div class="parent">
    <span class="child">INLINE</span>
  </div>

  <div class="parent">
    <div class="child">BLOCK</div>
  </div>
</body>

或者

<style>
  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

<body>
  <div class="parent">
    <span class="child">INLINE</span>
  </div>

  <div class="parent">
    <div class="child">BLOCK</div>
  </div>
</body>

两列布局

左侧定宽，右侧自适应

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
  }
  .right {
    flex-grow: 1;
  }
</style>

<div class="parent">
  <div class="left">左列定宽</div>
  <div class="right">右列自适应</div>
</div>

或者

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    margin-left: 100px;
  }
</style>

<div class="parent">
  <div class="left">左列定宽</div>
  <div class="right">右列自适应</div>
</div>
说明

左列脱离标准文档流，右列仍处在标准文档流中，设置 margin-left 使其距离左边 100px 以免被左列遮挡。

左侧不定宽，右侧自适应

<style>
  .left {
    float: left;
  }
  .right {
    overflw: hidden;
  }
</style>

<div class="parent">
  <div class="left">左列不定宽</div>
  <div class="right">右列自适应</div>
</div>

或者

<style>
  .parent {
    display: flex;
  }
  .right {
    flex-grow: 1;
  }
</style>

<div class="parent">
  <div class="left">左列不定宽</div>
  <div class="right">右列自适应</div>
</div>

三列布局

双飞翼布局

<style>
  .center-parent {
    float: left;
    width: 100%;
  }
  .center {
    margin-left: 120px;
    margin-right: 130px;
  }
  .left {
    float: left;
    width: 120px;
  }
  .right {
    float: left;
    width: 130px;
  }
</style>

<div class="parent">
  <div class="center-parent">
    <div class="center">中间列自适应</div>
  </div>
  <div class="left">左列定宽 120px</div>
  <div class="right">右列定宽 130px</div>
</div>

圣杯布局

<style>
  .parent {
    position: relative;
  }
  .center {
    margin-left: 120px;
    margin-right: 130px;
  }
  .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
  }
  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 130px;
  }
</style>

<div class="parent">
  <div class="left">左列定宽 120px</div>
  <div class="center">中间列自适应</div>
  <div class="right">右列定宽 130px</div>
</div>

使用 flex 布局

<style>
  .parent {
    display: flex；;
  }
  .center {
    flex-grow: 1;
  }
  .left {
    width: 120px;
  }
  .right {
    width: 130px;
  }
</style>

<div class="parent">
  <div class="left">左列定宽 120px</div>
  <div class="center">中间列自适应</div>
  <div class="right">右列定宽 130px</div>
</div>

总结

以上的各种布局方法基本上囊括了大多数布局场景，可根据实际情况进行应用。可以看出，flex 布局能够解决大部分的布局问题，且兼容性良好，因此推荐使用 flex 布局。

CSS
Layout