鍍金池/ 教程/ HTML/ 布局
書(shū)單
JavaScript 動(dòng)畫(huà)
HTML
CSS Reset
屬性操作
DOM 事件
閉包
Photoshop
Atom 文本編輯器
表單操作
布局解決方案
類型系統(tǒng)
開(kāi)發(fā)實(shí)踐
數(shù)據(jù)通信
變量作用域
BOM
JavaScript 程序設(shè)計(jì)
前端工程師概述
CSS
響應(yīng)式布局
表達(dá)式與運(yùn)算符
基本語(yǔ)法
JavaScript 介紹
版本控制
布局
調(diào)試器
背景
圖片保存
多媒體
文檔樹(shù)
列表操作
Sublime 編輯器
盒模型
常見(jiàn)布局樣例
類型識(shí)別
變形
數(shù)據(jù)存儲(chǔ)
選擇器
頁(yè)面架構(gòu)
開(kāi)發(fā)及調(diào)試工具
頁(yè)面模塊化
節(jié)點(diǎn)操作
測(cè)量及取色
瀏覽器兼容
HTML 簡(jiǎn)介
內(nèi)置對(duì)象
實(shí)體字符
產(chǎn)品前端架構(gòu)
協(xié)作流程
切圖
工具, 面板, 視圖
正則表達(dá)式
動(dòng)畫(huà)
語(yǔ)句
面向?qū)ο?/span>
HTML 語(yǔ)法
HTML 標(biāo)簽
技術(shù)選擇
樣式操作
圖片優(yōu)化與合并
語(yǔ)法
DOM 編程藝術(shù)
Canvas
接口設(shè)計(jì)
頁(yè)面優(yōu)化
文本

布局

布局

學(xué)習(xí)布局前須知道 CSS 中的定位機(jī)制。

  • 標(biāo)準(zhǔn)文檔流（Normal Flow）
  • 浮動(dòng)（Float）
  • 絕對(duì)定位（Absolute Positioning)

標(biāo)準(zhǔn)文檔流，從上到下，從左到右的輸出文檔內(nèi)容。它由塊級(jí)（block）元素和行級(jí)元素組成，且它們都是盒子模型。

下面為 Firefox 布局可視化 Gecko Reflow Visualisation，布局是指瀏覽器將元素以正確的大小擺放在正確的位置上。

http://wiki.jikexueyuan.com/project/fend_note/images/G/gecko-reflow-visualisation.gif" alt="" />

display

設(shè)置元素的顯示方式

display 默認(rèn)寬度 可設(shè)置寬高 起始位置
block 父元素寬度 是 換行
inline 內(nèi)容寬度 否 同行
inline-block 內(nèi)容寬度 是 同行
display:block
  • 默認(rèn)寬高為父元素寬高
  • 可設(shè)置寬高
  • 換行顯示
  • 默認(rèn)為block的元素：<div>, <p>, <h1> ~ <h6>, <ul>, <form>
display:inline
  • 默認(rèn)寬度為內(nèi)容寬度
  • 不可設(shè)置寬高
  • 同行顯示（元素內(nèi)部可換行）
  • 默認(rèn)為inline的元素：<span>, <a>, <label>, <cite>, <em>
display:inline-block
  • 默認(rèn)寬度為內(nèi)容寬度
  • 可設(shè)置寬高
  • 同行顯示
  • 整塊換行
  • 默認(rèn)為inline-block的元素：<input>, <textarea>, <select>, <button>
display:none
  • 設(shè)置元素不顯示

display:none 與 visibility:hidden 的區(qū)別為 display:none 不顯示且不占位，但 visibility:hidden 不顯示但占位。

position

position 用于設(shè)置定位的方式與top right bottom left z-index 則用于設(shè)置參照物位置（必須配合定位一同使用）。

三種定位形式

  • 靜態(tài)定位（static）
  • 相對(duì)定位（relative）
  • 絕對(duì)定位（absolute、fixed）
position: static | relative | absolute | fixed
/* 默認(rèn)值為 static */
position:relative
  • 相對(duì)定位的元素仍在文檔流之中，并按照文檔流中的順序進(jìn)行排列。
  • 參照物為元素本身的位置。

NOTE：最常用的目的為改變?cè)貙蛹?jí)和設(shè)置為絕對(duì)定位的參照物。

http://wiki.jikexueyuan.com/project/fend_note/images/P/position-relative.png" alt="" />

position:absolute

建立以包含塊為基準(zhǔn)的定位，其隨即擁有偏移屬性和 z-index 屬性。

  • 默認(rèn)寬度為內(nèi)容寬度
  • 脫離文檔流
  • 參照物為第一個(gè)定位祖先或根元素（<html> 元素）

http://wiki.jikexueyuan.com/project/fend_note/images/P/position-absolute.png" alt="" />

position:fixed
  • 默認(rèn)寬度為內(nèi)容寬度
  • 脫離文檔流
  • 參照物為視窗

NOTE：寬高的100%的參照依然為視窗（例：網(wǎng)頁(yè)遮罩效果）

http://wiki.jikexueyuan.com/project/fend_note/images/P/position-fixed.png" alt="" />

top/right/bottom/left

http://wiki.jikexueyuan.com/project/fend_note/images/L/layout-position.png" alt="" />

其用于設(shè)置元素邊緣與參照物邊緣的距離，且設(shè)置的值可為負(fù)值。在同時(shí)設(shè)置相對(duì)方向時(shí)，元素將被拉伸。

z-index

其用于設(shè)置 Z 軸上得排序，默認(rèn)值為 0 但可設(shè)置為負(fù)值。（如不做設(shè)置，則按照文檔流的順序排列。后面的元素將置于前面的元素之上）

http://wiki.jikexueyuan.com/project/fend_note/images/L/layouy-position-zindex.png" alt="" />

z-index 棧

父類容器的 z-index 優(yōu)于子類 z-index 如圖

http://wiki.jikexueyuan.com/project/fend_note/images/L/layout-position-zindex-stack.jpg" alt="" />

float

CSS 中規(guī)定的定位機(jī)制，其可實(shí)現(xiàn)塊級(jí)元素同行顯示并存在于文檔流之中。浮動(dòng)僅僅影響文檔流中下一個(gè)緊鄰的元素。

float: left | right | none | inherit
  • 默認(rèn)寬度為內(nèi)容寬度
  • 脫離文檔流（會(huì)被父元素邊界阻擋與position脫離文檔流的方式不同）
  • 指的方向一直移動(dòng)

http://wiki.jikexueyuan.com/project/fend_note/images/F/float-right.png" alt="" />

float 元素在同一文檔流中，當(dāng)同時(shí)進(jìn)行 float 時(shí)它們會(huì)按照文檔流中的順序排列。(當(dāng)所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認(rèn)的內(nèi)容高度)

http://wiki.jikexueyuan.com/project/fend_note/images/F/float-right-all.jpg" alt="" />

注意：float 元素是半脫離文檔流的，對(duì)元素是脫離文檔流，但對(duì)于內(nèi)容則是在文檔流之中的（既元素重疊但內(nèi)容不重疊）。

http://wiki.jikexueyuan.com/project/fend_note/images/F/float-half-off.png" alt="" />

clear
clear: both | left | right | none | inherit
  • 應(yīng)用于后續(xù)元素
  • 應(yīng)用于塊級(jí)元素（block）

使用方法：

優(yōu)先級(jí)自上而下

  1. clearfix 于父元素
  2. 浮動(dòng)后續(xù)空白元素 .emptyDiv {clear: both}
  3. 為受到影響的元素設(shè)置 width: 100% overflow: hidden 也可
  4. 塊級(jí)元素可以使用 <br> 不建議使用，影響 HTML 結(jié)構(gòu)
/* clearfix */
.clearfix:after {
   content: "."; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.clearfix {zoom: 1;} /* 針對(duì) IE 不支持 :after */

flex

http://wiki.jikexueyuan.com/project/fend_note/images/F/flex-container-and-item.jpg" alt="" />

彈性布局可用于多行自適應(yīng)，多列自適應(yīng)，間距自適應(yīng)和任意對(duì)齊。

創(chuàng)建 flex container

display: flex
/* 彈性容器內(nèi)的均為彈性元素*/

flex item

只有彈性容器在文檔流中的子元素才屬于彈性元素。

<div style="display: flex;">
  <div>Block Element</div>
  <!-- flex item: YES-->
  <span>Inline Element</span>
  <!-- flex item: YES-->
  <div style="position:absolute;">Absolute Block Element</div>
  <!-- flex item: YES-->
</div>
flex 方向
flex-direction
<!-- 默認(rèn)值為 row -->
flex-direction: row | row-reverse | column | column-reverse

http://wiki.jikexueyuan.com/project/fend_note/images/F/flex-direciton.png" alt="" />

flex-wrap
<!-- 默認(rèn)值為 nowrap -->
flex-wrap: nowrap | wrap | wrap-reverse

http://wiki.jikexueyuan.com/project/fend_note/images/F/flex-wrap.png" alt="" />

flex-flow

flex-flow 為 flex-wrap 與 flex-direction 的簡(jiǎn)寫(xiě)，建議使用此屬性（避免同時(shí)使用兩個(gè)屬性來(lái)修改）。

flex-flow: <'flex-direction'> || <'flex-wrap'>

http://wiki.jikexueyuan.com/project/fend_note/images/F/flex-flow.png" alt="" />

order

order 的值為相對(duì)的（同被設(shè)置和未被設(shè)置的值相比較），當(dāng)均為設(shè)置時(shí)默認(rèn)值為 0 則按照文檔流中的順序排列。

order: <integer>
<!-- 默認(rèn)為 0 -->

http://wiki.jikexueyuan.com/project/fend_note/images/F/flex-order0.png" alt="" /> http://wiki.jikexueyuan.com/project/fend_note/images/F/flex-order1.png" alt="" />

flex 彈性
flex-basis

其用于設(shè)置 flex-item 的初始寬高（并作為彈性的基礎(chǔ)）。如果 flex-direction 是以 row 排列則設(shè)置寬，如以 column 排列則設(shè)置高。

flex-basis: main-size | <width>
flex-grow

伸展因子，其為彈性布局中最重要的元素之一，flex-grow 設(shè)置元素可用空余空間的比例。flex-container 先安裝寬度（flex-basis）進(jìn)行布局，如果有空余空間就按照 flex-grow 中的比例進(jìn)行分配。

*Width/Height = flex-basis + flex-grow/sum(flow-grow) remain**

flex-grow: <number>
initial: 0
<!-- 默認(rèn)值為 0 -->

http://wiki.jikexueyuan.com/project/fend_note/images/F/flex-grow0.png" alt="" /> http://wiki.jikexueyuan.com/project/fend_note/images/F/flex-grow1.png" alt="" /> http://wiki.jikexueyuan.com/project/fend_note/images/F/flex-grow2.png" alt="" />

flex-shrink

收縮因子，用于分配超出的負(fù)空間如何從可用空間中進(jìn)行縮減。

flex-shrink: <number>
initial: 1
<!-- 默認(rèn)值為 1 -->

*Width/Height = flex-basis + flow-shrink/sum(flow-shrink) remain**

remain 為負(fù)值，既超出的區(qū)域。

http://wiki.jikexueyuan.com/project/fend_note/images/F/flex-shrink.png" alt="" />

flex

其為 flex-grow flex-shrink flex-basis 的值縮寫(xiě)。

flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
initial: 0 1 main-size
flex 對(duì)齊
justify-content

其用于設(shè)置主軸（main-axis）上的對(duì)其方式。彈性元素根據(jù)主軸（橫向和縱向均可）定位所以不可使用 left 與 right 因?yàn)槲恢脼橄鄬?duì)的。（行為相似的屬性有 text-align）

justify-content: flex-start | flex-end | center | space-between | space-around
<!-- 默認(rèn)值為 flex-start -->

http://wiki.jikexueyuan.com/project/fend_note/images/F/flex-justify-content.png" alt="" />

align-items

其用于設(shè)置副軸（cross-axis）上的對(duì)其方式。（行為相似的屬性有 vertical-align）

align-items: flex-start | flex-end | center | baseline | stretch
<!-- 默認(rèn)值為 stretch -->

http://wiki.jikexueyuan.com/project/fend_note/images/F/flex-align-items.png" alt="" />

align-self

其用于設(shè)置單個(gè) flex-item 在 cross-axis 方向上的對(duì)其方式。

align-self: auto | flex-start | flex-end | center | baseline | stretch
<!-- 默認(rèn)值為 auto -->

http://wiki.jikexueyuan.com/project/fend_note/images/F/flex-align-self.png" alt="" />

align-content

其用于設(shè)置 cross-axis 方向上的對(duì)其方式。

align-content:flex-start | flex-end | center | space-between | space-around | stretch
<!-- 默認(rèn)為 stretch -->

http://wiki.jikexueyuan.com/project/fend_note/images/F/flex-align-content.png" alt="" />

上一篇：瀏覽器兼容下一篇：前端工程師概述