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

水平居中布局

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>
  • 低版本浏览器兼容性问题
  • 性能问题,只是适合小范围布局

以上就是常见的几种布局。

参考文章:

相关推荐