CSS常见布局解决方案

来源：互联网发布：手机总是弹出登录网络编辑：程序博客网时间：2024/06/11 02:04

浏览博客时，看到一篇博客《CSS常见布局解决方案》，因为平时在写网站的时候，也会出现很多CSS布局方面的问题，所以看到这个文章格外兴奋，借鉴他的学习经验，希望自己以后也可以有所总结。

水平居中布局

首先看水平居中：
1.margin+定宽

<div class="parent">  <div class="child">Demo</div></div><style>  .child {    width: 100px;    margin: 0 auto;  }</style>

不定宽的水平居中
2. 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 一下版本需要调整为

3.inline-block + text-align

<div class="parent">  <div class="child">Demo</div></div><style>  .child {    display: inline-block;  }  .parent {    text-align: center;  }</style>

4.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 ，有兼容性更好
1. absolute + transform

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

绝对定位脱离文档流，不会对后续元素的布局造成影响。

6.flex + justify-content

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: flex;    justify-content: center;  }</style>

只需设置父节点属性，无需设置子元素

垂直居中

1.table-cell + vertical-align

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: table-cell;    vertical-align: middle;  }</style>

2.absolute + transform

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

绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。

3.flex + align-items

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: flex;    align-items: center;  }</style>

水平垂直居中

1.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>

绝对定位脱离文档流，不会对后续元素的布局造成影响。

2.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>

只需设置父节点属性，无需设置子元素

一列定宽，一列自适应

1.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>

IE 6 中会有3像素的 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>

此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择，需要设置 .left {position: relative} 来提高层级。注意此方法增加了不必要的 HTML 文本结构。

2.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

3.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 来设置间距

4.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>

等分布局

1.float

<div class="parent">  <div class="column">    <p>1</p>  </div>  <div class="column">    <p>2</p>  </div>  <div class="column">    <p>3</p>  </div>  <div class="column">    <p>4</p>  </div></div><style>  .parent {    margin-left: -20px;  }  .column {    float: left;    width: 25%;    padding-left: 20px;    box-sizing: border-box;  }</style>

2.flex

<div class="parent">  <div class="column">    <p>1</p>  </div>  <div class="column">    <p>2</p>  </div>  <div class="column">    <p>3</p>  </div>  <div class="column">    <p>4</p>  </div></div><style>  .parent {    display: flex;  }  .column {    flex: 1;  }  .column+.column { /* 相邻兄弟选择器 */    margin-left: 20px;  }</style>

3.table

<div class='parent-fix'>  <div class="parent">    <div class="column">      <p>1</p>    </div>    <div class="column">      <p>2</p>    </div>    <div class="column">      <p>3</p>    </div>    <div class="column">      <p>4</p>    </div>  </div></div><style>  .parent-fix {    margin-left: -20px;  }  .parent {    display: table;    width: 100%;    /*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/    table-layout: fixed;  }  .column {    display: table-cell;    padding-left: 20px;  }</style>

等高布局

1.table
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>

2.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>

注意这里实际上使用了 align-items: stretch，flex 默认的 align-items 的值为 stretch
3.float

<div class="parent">  <div class="left">    <p>left</p>  </div>  <div class="right">    <p>right</p>    <p>right</p>  </div></div><style>  .parent {    overflow: hidden;  }  .left,  .right {    padding-bottom: 9999px;    margin-bottom: -9999px;  }  .left {    float: left;    width: 100px;    margin-right: 20px;  }  .right {    overflow: hidden;  }</style>

此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。兼容性较好。

作者信息：XiNG
作者地址：

http://www.xingxin.me/posts/590058affd9e613545f2d1f3

阅读全文

0 0