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

布局

2018-07-10 16:12 更新

Table of Contents

DocToc

布局

布局

學(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，布局是指瀏覽器將元素以正確的大小擺放在正確的位置上。

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ì)定位的參照物。

position:absolute

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

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

position:fixed

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

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

top/right/bottom/left

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

z-index

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

z-index 棧

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

float

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

float: left | right | none | inherit

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

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

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

clear

clear: both | left | right | none | inherit

應(yīng)用于后續(xù)元素
應(yīng)用于塊級(jí)元素（block）

使用方法：

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

clearfix 于父元素
浮動(dòng)后續(xù)空白元素 .emptyDiv {clear: both}
為受到影響的元素設(shè)置 width: 100% overflow: hidden 也可
塊級(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

彈性布局可用于多行自適應(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

flex-wrap

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

flex-flow

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

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

order

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

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

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

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ū)域。

flex

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

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

align-items

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

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

align-self

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

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

align-content

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

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

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

← 背景

變形 →

寫筆記

我要補(bǔ)充