摘要：想寫出高效合理的布局，必須以深厚的基礎(chǔ)為前提。現(xiàn)在布局方式主要分為三種傳統(tǒng)布局方案等配合。彈性布局，實(shí)現(xiàn)方便，兼容性較好。在環(huán)境中的元素按照如下規(guī)則渲染和文檔流一樣，元素按照自己類型的布局特性從左到右，從上往下依次排列。

前端css布局知識(shí)繁雜，實(shí)現(xiàn)方式多種多樣。想寫出高效、合理的布局，必須以深厚的css基礎(chǔ)為前提。為了方便記憶和復(fù)習(xí)，將css布局要點(diǎn)記錄如下。內(nèi)容較多，應(yīng)用方面說的不太詳細(xì)，但都是很實(shí)用的點(diǎn)。

所謂布局，就是指將元素設(shè)置為我們想要的大小，放置于我們想要的位置,位置、尺寸是核心兩要素。這些元素其實(shí)就是一些方塊，頁(yè)面就是由各種方塊拼湊而成?，F(xiàn)在布局方式主要分為三種：

傳統(tǒng)css布局方案（position,float,line-height等配合）。實(shí)現(xiàn)復(fù)雜，需要多種屬性配合使用，兼容性最好。

flex布局方案。彈性布局，實(shí)現(xiàn)方便，兼容性較好。

gird布局方案。

使用哪種布局方式，看項(xiàng)目具體要求，如果不需要兼容IE，建議使用flex或者grid，這兩種是未來趨勢(shì)。如果要考慮兼容，則最好使用傳統(tǒng)css布局方案。

前面提過，一個(gè)html元素，就是一個(gè)方塊，講究一點(diǎn)的話就是盒模型。盒模型長(zhǎng)這樣：

我們可以在chrome開發(fā)者工具的styles中查看：

css盒模型，分為4部分：

content：顯示元素內(nèi)容區(qū)域，包含子孫元素的地方

padding：內(nèi)容區(qū)域到邊框的距離，也稱內(nèi)邊距

border：顯示自身輪廓

margin: 用于設(shè)置元素自身和同級(jí)元素或者父級(jí)元素的距離

無規(guī)矩不成方圓。所有的html元素都是按照一定規(guī)則去排列渲染的。在html中，不只有一種規(guī)則，是多種規(guī)則的混合。了解這些渲染規(guī)則和這些規(guī)則生效的條件對(duì)于我們理解css有很大幫助。

文檔流可以理解為所有元素的默認(rèn)渲染規(guī)則。它的規(guī)則很簡(jiǎn)單：元素按照自己的類型的布局特性從左到右，從上往下依次排列。

元素在布局上分為三種類型：

塊級(jí)元素：默認(rèn)占據(jù)一整行，即時(shí)設(shè)置寬度也還是占據(jù)一整行，由margin來補(bǔ)充（霸道總裁），有block、table、flex、grid、list-item

內(nèi)聯(lián)元素：寬度由內(nèi)容撐開，只占據(jù)自己的位置，即時(shí)設(shè)置了寬度也不起作用,margin也是左右起作用，上下不起作用（大家閨秀）,有inline

內(nèi)聯(lián)塊級(jí)元素： 寬度由內(nèi)容撐開，只占據(jù)自己的位置，可以設(shè)置自己的寬度（兩個(gè)人的孩子？）,有inline-block、inline-table、inline-flex、inline-grid

上面內(nèi)聯(lián)元素其實(shí)說的不太正確，這里需要特殊說一下，內(nèi)聯(lián)元素又分為兩種：

可置換內(nèi)聯(lián)元素：該元素展示的內(nèi)容不在css作用域范圍之內(nèi)，典型比如img、video、object、input、textarea等，展示內(nèi)容由src、value等決定，這種元素可以設(shè)置寬高

不可置換內(nèi)聯(lián)元素：普通的內(nèi)聯(lián)元素，比如span、a、i、em等

有兩種方式可以脫離文檔流，絕對(duì)定位和浮動(dòng)，我們下面再詳細(xì)說。

BFC全稱是Block Formatting Context,塊級(jí)格式化上下文。在BFC環(huán)境中的元素按照如下規(guī)則渲染：

和文檔流一樣，元素按照自己類型的布局特性從左到右，從上往下依次排列。

BFC是一個(gè)獨(dú)立、封閉的渲染區(qū)域。子元素的樣式對(duì)BFC外部產(chǎn)生影響。

BFC可以識(shí)別浮動(dòng)子元素。

BFC可以識(shí)別浮動(dòng)的同級(jí)元素。利用這一點(diǎn)可以制作彈性布局。

那么什么樣的渲染區(qū)域是一個(gè)BFC哪？下列幾種方式可以顯示聲明一個(gè)BFC的渲染區(qū)域：

根元素或包含根元素的元素

float的值不為none

position為absolute或者fixed

overflow的值不為visible

display為inline-block、table-cell、table-caption

元素的尺寸有兩種情況：

默認(rèn)情況： 塊級(jí)元素寬度默認(rèn)為100%，高度由內(nèi)容撐開；內(nèi)聯(lián)元素和內(nèi)聯(lián)塊級(jí)元素寬度和高度默認(rèn)由內(nèi)容撐開。

開發(fā)者設(shè)置： 主動(dòng)設(shè)置width、height、line-height等

我們先來明確一下元素的尺寸概念，我們都知道元素的盒模型，元素由content、padding、border、margin四個(gè)區(qū)域組成。那么尺寸具體是指什么？我們可以把尺寸分為三類：

元素尺寸：由content、padding、border組成，在原生的DOM API中用offsetWidth、offsetHeight獲取

元素內(nèi)部尺寸： 由content、padding組成，在原生的DOM API中用clientWidth和clientHeight獲取

元素外部尺寸： 由content、padding、border、margin組成，沒有對(duì)應(yīng)的DOM API,但是理解這個(gè)，對(duì)布局很有幫助

而我們?cè)赾ss中設(shè)置的width、height代表哪部分區(qū)域是有歧義的，我們通過設(shè)置box-sizing，可以切換width、height所代表的區(qū)域。

box-sizing，可以切換width、height所代表的區(qū)域。box-sizing主流瀏覽器有兩個(gè)值：

content-box: width、height設(shè)置的是content的寬高

border-box: width、height設(shè)置的是content、padding、border加起來的寬高

box-sizing的這兩個(gè)屬性，造成width、height的二義性，而且很多情況下是全局設(shè)置的，隱蔽性很強(qiáng)，對(duì)于新手來說很容易懵。這兩個(gè)屬性的產(chǎn)生有一定的歷史原因，最開始的盒模型默認(rèn)采用的border-box，早期的IE就是這種，也叫IE盒模型。后來W3C覺得content-box更好，又把盒模型默認(rèn)改為content-box模式。后來的后來，隨著彈性布局的流行，border-box的優(yōu)勢(shì)越來越明顯，大家都更愿意使用border-box來布局，W3C又想把border-box搞回來。但是已經(jīng)有好多基于content-box的網(wǎng)站，為了兼容性也不能隨便改。于是，W3C就想出了box-sizing這種方式，支持了border-box，但是默認(rèn)還是content-box。使用box-sizing應(yīng)注意的幾點(diǎn)：

加入要全局設(shè)置box-sizing: border-box，要注意對(duì)第三方組件庫(kù)的侵入，因?yàn)榈谌浇M件很可能是基于content-box來布局的

設(shè)置所有元素的box-sizing屬性為inherit：

*, *:before, *:after {
    box-sizing: inherit;
}

這樣我們可以設(shè)置父元素的box-sizing，就可以控制所有子元素的box-sizing屬性，對(duì)于我們封裝組件，設(shè)置整個(gè)組件環(huán)境很方便，只有我們?cè)诜庋b組件時(shí)強(qiáng)設(shè)置box-sizing，就不怕全局的樣式侵入了。

content-box模式在設(shè)置彈性布局時(shí)，可以使用calc屬性輔助實(shí)現(xiàn)，或者弄兩層div實(shí)現(xiàn)

包含塊

我們知道width, height都是可以設(shè)置百分比，那這個(gè)百分比的參照物是誰？這里引出一個(gè)概念，叫做包含塊(CB, Contanining Block),一個(gè)元素的包含塊就是該元素的width、height百分比的參照物。

很多新手同學(xué)，在設(shè)置寬高百分比的時(shí)候，有時(shí)候覺得莫名其妙，各種奇怪現(xiàn)象，怎么設(shè)置都不起作用。其實(shí)就是沒有包含塊的概念。一個(gè)元素的包含塊是誰，主要取決于該元素的position屬性，總結(jié)如下：

position為static和relative的元素，包含塊為其父元素的content-box

position為absolute的元素，包含塊為其最近的定位非static的祖先元素的padding-box，如果沒有定位非static的祖先元素，則為初始包含塊（后面解釋）

position為fixed的元素，包含塊為視口viewport

position為absolute和fixed時(shí)，包含塊也可能是由滿足以下條件的最近父級(jí)元素的padding-box：

A transform or perspective value other than none

A will-change value of transform or perspective

A filter value other than none or a will-change value of filter (only works on Firefox)

這條比較特殊，遇到的情況比較少，多帶帶拿出來

除了width, height的百分比相對(duì)于包含塊設(shè)置外，margin、padding的百分比也是相對(duì)于包含塊設(shè)置，只不過margin、padding百分比相對(duì)于包括塊的寬度設(shè)置（水平模式下）。絕對(duì)定位的偏移屬性top、left、right、bottom也是相對(duì)于包含塊設(shè)置，后面再詳細(xì)說。

初始包含塊

元素的包含塊都是自己的祖先元素，那hmtl元素沒有祖先元素，它的百分比設(shè)置相對(duì)于誰那？就是初始包含塊，根元素(hmtl)所在的包含塊是一個(gè)被稱為初始包含塊的矩形。這個(gè)矩形的大小就是瀏覽器視口的大小。有一點(diǎn)需要注意，那些沒有定位非static祖先元素的參照物是初始包含塊，而非html元素。

因?yàn)閙argin在布局中有一些重要特性和特殊情況，所以多帶帶拿出來講一下。

margin:auto

我們知道，塊級(jí)元素即使設(shè)置了寬度，也會(huì)占滿一行，為什么會(huì)這樣？剩余的空間被誰占了？

這里要明確一點(diǎn)，塊級(jí)元素占據(jù)一行，是指塊級(jí)元素的外部尺寸占據(jù)一行，就是margin-box。當(dāng)margin設(shè)置為auto的時(shí)候，margin會(huì)自動(dòng)占滿剩余空間。

margin-left: 默認(rèn)為0，為auto時(shí)，自動(dòng)充滿剩余空間

margin-right: 默認(rèn)為0，為auto時(shí)，自動(dòng)充滿剩余空間

margin-top: 默認(rèn)為0，為auto時(shí)，值還是為0

margin-bottom: 默認(rèn)為0，為auto時(shí)，值還是為0

當(dāng)margin-left和margin-right同時(shí)為auto，就會(huì)平分剩余空間，這就是margin:auto會(huì)使元素水平居中的原因。然后margin: auto卻不能使元素垂直居中，這是因?yàn)樵诖怪狈较蛏希瑝K級(jí)元素不會(huì)自動(dòng)擴(kuò)充，它的外部尺寸沒有自動(dòng)充滿父元素，也沒有剩余空間可說。如果我們?cè)诟冈厣显O(shè)置writing-mode: vertical-lr,這時(shí)margin:auto就會(huì)使子元素垂直居中，而水平居中無效。

那有沒有什么辦法使用margin:auto讓元素同時(shí)水平垂直居中？答案是有的，就是絕對(duì)定位的情況下。

.father {
    width: 300px; height:150px;
    position: relative;
}
.son {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 200px;
    height: 200px;
    margin: auto;
}

此時(shí)的son的外部尺寸，就會(huì)自動(dòng)充滿它的包含塊，效果和塊級(jí)元素類似。這時(shí)候設(shè)置.son元素的寬高，就會(huì)有剩余空間出來，margin:auto會(huì)自動(dòng)平分剩余空間，使.son水平垂直居中。

margin對(duì)布局影響

margin對(duì)元素的影響有2個(gè)：

影響內(nèi)部尺寸

影響外部尺寸

影響元素內(nèi)部尺寸

塊級(jí)元素這種寬度方向自動(dòng)充滿空間的布局特性，當(dāng)沒有設(shè)置寬度，設(shè)置margin-left和margin-right為對(duì)元素的內(nèi)部空間有影響。margin為正值時(shí)，元素尺寸縮小；margin為負(fù)值時(shí)，元素尺寸增大。因?yàn)樵氐耐獠砍叽绱笮∫呀?jīng)定了，就是其包含塊的尺寸，而外部尺寸等于元素尺寸加上margin，如果margin為負(fù)，元素尺寸自然就增大了。利用內(nèi)部尺寸增大、外部尺寸不變這個(gè)特點(diǎn)，我們可以進(jìn)行等間隔列表的布局。比如我們實(shí)現(xiàn)一個(gè)一行三列，兩側(cè)無間隙，中間間隙為20px的布局：

.father{
    margin-right: -20px;
}
.son{
    width: calc( calc(100% - 20px * 3) / 3);
    margin-right: 20px;
}

影響元素外部尺寸

在元素寬高固定的時(shí)候，相當(dāng)于元素尺寸固定了，margin開始影響元素的外部尺寸。正margin會(huì)使元素元素的外部尺寸增大，負(fù)margin會(huì)使元素元素的外部尺寸縮小。正值很好理解，就不說了。主要說一下負(fù)值，這時(shí)候margin-top、margin-left和margin-right、margin-bottom的表現(xiàn)看起來是有區(qū)別的，實(shí)質(zhì)是一樣。margin-top、margin-left為負(fù)值時(shí)，表現(xiàn)為元素向上或者向左移動(dòng)，margin-right、margin-bottom為負(fù)值時(shí)，表現(xiàn)為其右側(cè)元素或者下面元素都會(huì)相應(yīng)地向左或者向上移動(dòng)。仔細(xì)想想，這都是元素外部尺寸縮小的表現(xiàn)。margin-top、margin-left使左側(cè)上上側(cè)尺寸縮小，就會(huì)自然向左或者向上移動(dòng)。margin-right、margin-bottom使右側(cè)和下側(cè)尺寸縮小，旁邊和下面的元素自然就會(huì)往左或者往上占位。

margin合并

塊級(jí)元素的上邊距和下邊距在某些場(chǎng)景下會(huì)發(fā)生合并行為。需要注意的是浮動(dòng)元素和絕對(duì)定位元素不會(huì)發(fā)生合并，且合并只發(fā)生在垂直方向。有以下3中合并場(chǎng)景

相鄰兄弟元素

父元素和第一個(gè)/最后一個(gè)元素

元素內(nèi)容為空時(shí)，height為0，自己的上邊距和下邊距會(huì)發(fā)生合并

margin合并的計(jì)算規(guī)則

正正取大

正負(fù)相加

負(fù)父取小(-20px, -50px合并取-50px)

阻止margin合并的方法

把合并元素變成BFC，比如設(shè)置display: inline-block,overflow: hidden, float: left等

父子合并/空元素合并時(shí)，給父元素/空元素設(shè)置border、padding都能阻止合并

主要想說line-height,vertical-align兩個(gè)屬性，這兩個(gè)屬性對(duì)高度有重要的影響，而且如果沒有理解這兩個(gè)屬性的作用，會(huì)經(jīng)常碰到一些不好解決的詭異的布局問題。

幽靈空白節(jié)點(diǎn)

這個(gè)名字是張?chǎng)涡翊笊穸x的，在W3C規(guī)范中也是可以找到根據(jù)的。在《CSS世界》這本書中，為了證明幽靈空白節(jié)點(diǎn)的存在，舉了一個(gè)例子：

div {
    background-color: #cd0000;
}
span {
    display: inline-block;
}

你可能猜到了，div的高度不為0，我在chrome下試了試高度為21px，這個(gè)高度猜測(cè)應(yīng)該和div的字體、字體大小、行高有關(guān)。這個(gè)幽靈空白節(jié)點(diǎn)的存在，會(huì)引起一些怪異現(xiàn)象，比如：

我是文字，我要環(huán)繞你

.img-wrap因?yàn)楦叨人荩瑢?shí)際上不識(shí)別float元素，高度為0，p元素與其重合，從而實(shí)現(xiàn)文字環(huán)繞效果。

高度塌陷特性在實(shí)現(xiàn)布局的時(shí)候是不合理的，而現(xiàn)在文字環(huán)繞的場(chǎng)景很少，float基本都用來布局使用了。這現(xiàn)在實(shí)際上已經(jīng)成為了一個(gè)“bug”的存在。所以css又提供了一個(gè)屬性用來清除浮動(dòng)：clearfix。

clearfix

clearfix在mdn上的解釋為指定一個(gè)元素是否可以在它之前的浮動(dòng)元素旁邊（我覺得這里用重合更貼切），或者必須向下移動(dòng)(清除浮動(dòng)) 在它的下面。

注意上面這句話，指定一個(gè)元素表示clearfix的作用目標(biāo)是元素自身，在它之前的浮動(dòng)元素表示clearfix的作用條件是它前面有浮動(dòng)元素，而clearfix的作用效果是讓元素?fù)Q行顯示。所以clearfix的作用是，如果元素前面有浮動(dòng)元素，可以指定該元素?fù)Q行顯示，或者說是識(shí)別前面的浮動(dòng)元素。clearfix有3個(gè)值：

left: 清除左浮動(dòng)

right: 清除右浮動(dòng)

both: 清除左右浮動(dòng)

一般情況下采用clearfix: both。清除浮動(dòng)一個(gè)重要應(yīng)用就是解決float高度塌陷的問題。通用的解決方案是設(shè)置.clearfix類：

.clearfix {
    display: block;
    zoom: 1;
    &:after {
        content: "";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}

在包含浮動(dòng)元素的父元素上設(shè)置該類即可。

博客地址

張?chǎng)涡?《CSS世界》

https://mp.weixin.qq.com/s/8e...