css 布局以及 trick 总结

请前往 CodePen 查看效果

一、两栏布局

1、左定宽（例如 200px），右自适应

（1）浮动布局

html

<div id="left">Left sidebar</div>
<div id="content">Main Content</div>

css

* {
  margin: 0;
  padding: 0;
}
#left {
  float: left;
  width: 200px;
  background-color: green;
}
#content {
  background-color: orange;
  margin-left: 200px;/*==等于左边栏宽度==*/
}

（2）浮动和负边距

html

<div id="left">
  Left Sidebar
</div>
<div id="content">
  <div id="contentInner">
    Main Content
  </div>
</div>

css

*{
  margin: 0;
  padding: 0;
}
#left {
  background-color: green;
  float: left;
  width: 200px;
  margin-right: -100%;
}
#content {
  float: left;
  width: 100%;
}
#contentInner {
  margin-left: 200px;/*==等于左边栏宽度值==*/
  background-color: orange;
}

2、左不定宽，右自适应

（1）float + BFC

原理：BFC 区域，不会与浮动元素重叠。

html

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

css

.left{
    float: left;
    width: 100px;
    margin-right: 20px;    //形成20px的间隔
    background-color: green;
}
.right{
    overflow: hidden; <!-- 通过设置overflow:hidden来触发BFC特性，也可以使用*zoom: 1 -->
    background-color: yellow;
}

（2）flex 布局

html

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

css

.parent{
    display: flex;
}
.left{
    margin-right: 20px;
}
.right{
    flex: 1;
}
.left p{
  width: 200px;
}

3、两列等高布局

(1) float + 内外边距正负值

原理：background 会填充内边距 padding，而不会填充外边距 margin。margin 具有坍塌性，可以设置负值。父容器设置 overflow 属性为 hidden 产生 BFC，一方面消除 float 带来的影响，另一方面将超出容器的部分隐藏。

html

<div class="box">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

css

.box {
    overflow: hidden;
}

.box > div {
    /**
    * padding-bottom 设置比较大的正值。
    * margin-bottom 设置绝对值大的负值。
    **/
    padding-bottom: 10000px;
    margin-bottom: -10000px;
    float:left;
    width:50%;
    word-break: break-all;
}

.left {
    background-color: greenyellow;
}

.right {
    background-color: yellowgreen;
}

二、三栏布局、中间自适应

1、流体布局

html

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

css

.left {
    float: left;
    height: 200px;
    width: 100px;
    background-color: red;
}
.right {
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
}
.main {
    margin-left: 120px;
    margin-right: 220px;
    height: 200px;
    background-color: green;
}

2、float + BFC（参考两栏布局的 float + BFC）

3、双飞翼布局

html

<div class="content">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

css

.content {
    float: left;
    width: 100%;
}
.main {
    height: 200px;
    margin-left: 110px;
    margin-right: 220px;
    background-color: green;
}
.left {
    float: left;
    height: 200px;
    width: 100px;
    margin-left: -100%;
    background-color: red;
}
.right {
    width: 200px;
    height: 200px;
    float: right;
    margin-left: -200px;
    background-color: blue;
}

4、圣杯布局

html

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

css

.container {
    margin-left: 120px;
    margin-right: 220px;
}
.main {
    float: left;
    width: 100%;
    height: 300px;
    background-color: red;
}
.left {
    float: left;
    width: 100px;
    height: 300px;
    margin-left: -100%;
    position: relative;
    left: -120px;
    background-color: blue;
}
.right {
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -200px;
    position: relative;
    right: -220px;
    background-color: green;
}

三、垂直居中

1、父元素高度确定的行内元素

line-height = height

2、未知父元素高度和自身高度

parentElement{
    position:relative;
}
childElement{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

3、已知自身宽高

(1)

.div {
    position:absolute;
    width:200px;
    height:200px;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-100px;
}

(2)

.div {
    position:absolute;
    width:140px;
    height:140px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

4、flex 布局

parentElement{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}