閱讀(4.5k) 書簽贊(1) 我要糾錯

布局

2018-07-10 16:12 更新

Table of Contents

DocToc

布局

布局

學習布局前須知道 CSS 中的定位機制。

標準文檔流（Normal Flow）
浮動（Float）
絕對定位（Absolute Positioning)

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

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

display

設置元素的顯示方式

display	默認寬度	可設置寬高	起始位置
block	父元素寬度	是	換行
inline	內(nèi)容寬度	否	同行
inline-block	內(nèi)容寬度	是	同行

display:block

默認寬高為父元素寬高
可設置寬高
換行顯示
默認為block的元素：<div>, <p>, <h1> ~ <h6>, <ul>, <form>

display:inline

默認寬度為內(nèi)容寬度
不可設置寬高
同行顯示（元素內(nèi)部可換行）
默認為inline的元素：<span>, <a>, <label>, <cite>, <em>

display:inline-block

默認寬度為內(nèi)容寬度
可設置寬高
同行顯示
整塊換行
默認為inline-block的元素：<input>, <textarea>, <select>, <button>

display:none

設置元素不顯示

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

position

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

三種定位形式

靜態(tài)定位（static）
相對定位（relative）
絕對定位（absolute、fixed）

position: static | relative | absolute | fixed
/* 默認值為 static */

position:relative

相對定位的元素仍在文檔流之中，并按照文檔流中的順序進行排列。
參照物為元素本身的位置。

NOTE：最常用的目的為改變元素層級和設置為絕對定位的參照物。

position:absolute

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

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

position:fixed

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

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

top/right/bottom/left

其用于設置元素邊緣與參照物邊緣的距離，且設置的值可為負值。在同時設置相對方向時，元素將被拉伸。

z-index

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

z-index 棧

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

float

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

float: left | right | none | inherit

默認寬度為內(nèi)容寬度
脫離文檔流（會被父元素邊界阻擋與position脫離文檔流的方式不同）
指的方向一直移動

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

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

clear

clear: both | left | right | none | inherit

應用于后續(xù)元素
應用于塊級元素（block）

使用方法：

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

clearfix 于父元素
浮動后續(xù)空白元素 .emptyDiv {clear: both}
為受到影響的元素設置 width: 100% overflow: hidden 也可
塊級元素可以使用 <br> 不建議使用，影響 HTML 結構

/* clearfix */
.clearfix:after {
   content: "."; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.clearfix {zoom: 1;} /* 針對 IE 不支持 :after */

flex

彈性布局可用于多行自適應，多列自適應，間距自適應和任意對齊。

創(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

<!-- 默認值為 row -->
flex-direction: row | row-reverse | column | column-reverse

flex-wrap

<!-- 默認值為 nowrap -->
flex-wrap: nowrap | wrap | wrap-reverse

flex-flow

flex-flow 為 flex-wrap 與 flex-direction 的簡寫，建議使用此屬性（避免同時使用兩個屬性來修改）。

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

order

order 的值為相對的（同被設置和未被設置的值相比較），當均為設置時默認值為 0 則按照文檔流中的順序排列。

order: <integer>
<!-- 默認為 0 -->

flex 彈性

flex-basis

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

flex-basis: main-size | <width>

flex-grow

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

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

flex-grow: <number>
initial: 0
<!-- 默認值為 0 -->

flex-shrink

收縮因子，用于分配超出的負空間如何從可用空間中進行縮減。

flex-shrink: <number>
initial: 1
<!-- 默認值為 1 -->

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

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

flex

其為 flex-grow flex-shrink flex-basis 的值縮寫。

flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
initial: 0 1 main-size

flex 對齊

justify-content

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

justify-content: flex-start | flex-end | center | space-between | space-around
<!-- 默認值為 flex-start -->

align-items

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

align-items: flex-start | flex-end | center | baseline | stretch
<!-- 默認值為 stretch -->

align-self

其用于設置單個 flex-item 在 cross-axis 方向上的對其方式。

align-self: auto | flex-start | flex-end | center | baseline | stretch
<!-- 默認值為 auto -->

align-content

其用于設置 cross-axis 方向上的對其方式。

align-content:flex-start | flex-end | center | space-between | space-around | stretch
<!-- 默認為 stretch -->

以上內(nèi)容是否對您有幫助：

← 背景

變形 →

寫筆記

我要補充