前端进阶系列(二):css常见布局解决方案

葉無聞

2019-06-28

水平居中布局

margin+定宽

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

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

想必是个前端都见过，这定宽的水平居中，我们还可以用下面这种来实现不定宽

table+margin

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

<style>
  .child {
    display: table;
    margin: 0 auto;
  }
</style>

display:table在表现上类似block元素，但是宽度为内容宽。
无需设置父元素样式（支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为 <table>

inline-block+text-align

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

<style>
  .child {
    display: inline-block;
  }
  .parent {
    text-align: center;
  }
</style>

兼容性佳（甚至可以兼容IE6和IE7）

absolute+margin-left

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

<style>
.parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    width: 100px;
    margin-left: -50px;  /* width/2 */
  }
  </style>

宽度固定
相比与使用transform兼容性更好

absolute+transform

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

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

绝对定位脱离文档流，不会对后续元素的布局造成影响
transform为CSS3属性，有兼容性问题

flex+justify-content

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

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

只需设置父节点属性，无需设置子元素
flex有兼容性问题

垂直居中

table-cell+vertical-align

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

<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

兼容性好(IE 8以下版本需要调整页面结构至 table)

absolute+transform

强大的absolute对于这种小问题当然是很简单的

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

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

绝对定位脱离文档流，不会对后续元素的布局造成影响，但如果绝对定位元素是唯一的元素，则父元素也会失去高度。
transform 为CSS3属性，有兼容性问题

同水平居中，这也可以使用margin-top实现，原理水平居中

flex+align-items

如果说absolute强大，那flex只是笑笑，因为他才是最强的，但有兼容性问题

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

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

水平垂直居中

absolute+transform

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

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

绝对定位脱离文档流，不会对后续元素的布局造成影响
transform为CSS3属性，有兼容性问题

inline-block+text-align+table-cell+vertical-align

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

<style>
  .parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>

兼容性好

flex+justify-content+align-items

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

<style>
  .parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /*垂直居中*/
  }
</style>

只需设置父节点属性，无需设置子元素
还是存在兼容性问题

一列定宽，一列自适应

这种布局最常见的就是中后台类型的项目，如下图：

前端进阶系列(二):css常见布局解决方案

float+margin

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    margin-left: 100px
    /*间距可再加入 margin-left */
  }
</style>

IE6中会有3px的BUG,解决方法可以在.left加入margin-left:-3px当然下面的方案也可以解决这个bug:

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right-fix">
    <div class="right">
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
  }
  .right {
    margin-left: 100px
    /*间距可再加入 margin-left */
  }
</style>

float+overflow

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    overflow: hidden;
  }
</style>

设置overflow:hidden会出发BFC模式（block formatting context）块级格式上下文。BFC是什么呢？用通俗的江就是，随便你在BFC里面干什么，外面都不会手段哦影响。此方法样式简单但不支持 IE 6

table

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell;
    /*宽度为剩余宽度*/
  }
</style>

table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout: fixed 可加速渲染，也是设定布局优先。table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距

flex

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

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