一、幾類視圖

內聯視圖：inline

單行

塊級視圖：block

換行，有高度

行內塊級視圖：inline-block

單行，有高度

二、幾類布局

塊級布局

換行，通過設置 margin 水平居中

<div class="center-block">...</div>

source：

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

浮動布局

單行，類似流體布局

<div class="pull-left">...</div>
<div class="pull-right">...</div>

source：

.pull-left {  float: left !important;
}
.pull-right {
  float: right !important;
}

若全為浮動，則父容器會高度塌陷，需要在此清除浮動。

<div class="clearfix">...</div>

source：

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

行內布局

單行，若設定 line-height 垂直方向自動居中。通過設定 text-align 元素將按一定順序排列。

定位布局

-- relative

相對於元素自身最初位置進行偏移，偏移後位置跟最初位置相關聯，即最初位置若受其他元素影響，會導致偏移後位置受關聯影響。

-- absolute

相對於父類非默認定位，即設置了（‘absolute‘、‘relative‘ 或者 ‘fixed‘）父類元素進行偏移，如果都沒有，則相對於 body 進行偏移。脫離文檔流。

三、BFC

mdn說明

四、相關布局實例

① 絕對定位實現垂直居中

a 一般用法

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 寬度的一半 */
}

b css3 用法

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%為自身尺寸的一半 */
}

c 特殊用法

.element {
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了這個就自動居中了 */
}

233

樣式布局與 BFC