這可能是史上最全的CSS自適應(yīng)布局總結(jié)

時(shí)間：2023-09-04 09:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-04 09:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

這可能是史上最全的CSS自適應(yīng)布局總結(jié)：標(biāo)題嚴(yán)格遵守了新廣告法，你再不爽，我也沒(méi)犯法呀！屁話不多說(shuō)，直入！

所謂布局，其實(shí)包含兩個(gè)含義：尺寸與定位。也就是說(shuō)，所有與尺寸和定位相關(guān)的屬性，都可以用來(lái)布局。

大體上，布局中會(huì)用到的有：尺寸相關(guān)的盒子模型，普通流、浮動(dòng)、絕對(duì)定位三種定位機(jī)制，CSS3中的transform、彈性盒子模塊、試驗(yàn)中的grid模塊。逛園子的時(shí)候經(jīng)?？梢钥吹礁?dòng)布局，inline-block布局，彈性盒布局這幾個(gè)名詞?，F(xiàn)在對(duì)布局也算有一點(diǎn)了解，做個(gè)總結(jié)鞏固一下。如果你也看了很多資料，但是實(shí)際動(dòng)手時(shí)對(duì)布局還是無(wú)從下手的話，希望本文可以幫你理清思路。

嘮叨一句：看到一個(gè)效果圖的時(shí)候，千萬(wàn)不要急著手賤去敲代碼！先思考清楚頁(yè)面的構(gòu)造，理清各元素之間的關(guān)系，特別需要注意的是在不同的設(shè)備下需要有怎樣的展現(xiàn)，當(dāng)你思路清晰找到最好的布局方案時(shí)，coding其實(shí)真的不需要多少時(shí)間。




尺寸相關(guān)

為什么要先說(shuō)尺寸呢？因?yàn)槌叽缭诓季种械淖饔梅浅：诵?，布局方式定位這些只是改變了元素之間的關(guān)系，沒(méi)有尺寸就什么也不是。比如我們通常會(huì)用margin來(lái)控制跟其他元素的距離，這就是布局。

很多人都會(huì)覺(jué)得，什么width、margin太簡(jiǎn)單了，早就掌握了。這種心態(tài)我一開(kāi)始學(xué)習(xí)CSS的時(shí)候也有，覺(jué)得很好理解很簡(jiǎn)單，但是后面才發(fā)現(xiàn)自己原來(lái)很多東西都沒(méi)真正掌握?？纯磸?chǎng)涡翊笊窠o我們上的政治課：http://www.zhangxinxu.com/wordpress/2012/07/bottleneck-css-study/

先說(shuō)說(shuō)百分比，百分比是相對(duì)父對(duì)象的，這里特性非常好用，很多時(shí)候會(huì)用在自適應(yīng)布局上面。瀏覽器尺寸的改變，就是根節(jié)點(diǎn)html的長(zhǎng)寬改變，我們可以用%來(lái)將瀏覽器尺寸和元素尺寸聯(lián)系起來(lái)，做到自適應(yīng)。

另外一個(gè)比較有意思的是auto，auto是很多尺寸值的默認(rèn)值，也就是由瀏覽器自動(dòng)計(jì)算。首先是塊級(jí)元素水平方向的auto，塊級(jí)元素的margin、border、padding以及content寬度之和等于父元素width。使用auto屬性在父元素寬度變化的時(shí)候，該元素的寬度也會(huì)隨之變化。

但是當(dāng)該元素被設(shè)為浮動(dòng)時(shí)，該元素的width就變成了內(nèi)容的寬度了，由內(nèi)容撐開(kāi)，也就是所謂的有了包裹性。overflow | position:absolute | float:left/right都可以產(chǎn)生包裹性，替換元素也同樣具有包裹性。在具有包裹性的元素上想利用width : auto；來(lái)讓元素寬度自適應(yīng)瀏覽器寬是不行的。

高度方向：外邊距重疊，外邊距auto為0，這兩點(diǎn)需要注意。書(shū)寫(xiě)方向什么的，接觸比較少就不扯了。

那為什么margin：auto對(duì)不能計(jì)算垂直方向的值呢？很簡(jiǎn)單，垂直方向是被設(shè)計(jì)成可以無(wú)限擴(kuò)展的，內(nèi)容越多瀏覽器便產(chǎn)生滾動(dòng)條來(lái)擴(kuò)展，所以垂直方向都找不到一個(gè)計(jì)算基準(zhǔn)，以此返回一個(gè)false，便成了0。

用處：通過(guò)width、height控制大小，各個(gè)方向的margin值控制與邊界或者其他元素的距離來(lái)定位。




浮動(dòng)

目前PC網(wǎng)站大多使用float布局，從成本上考慮大改的概率很小，所以不要說(shuō)浮動(dòng)無(wú)用，總是會(huì)有機(jī)會(huì)讓你維護(hù)的！代表網(wǎng)站：淘寶、騰訊、百度，好吧BAT都到齊了。

浮動(dòng)聽(tīng)得多了，博客園上關(guān)于用浮動(dòng)布局的介紹也非常的多。浮動(dòng)原本用于文本環(huán)繞，但卻在布局被發(fā)揚(yáng)光大，這就是命！我的理解：浮動(dòng)布局的核心就是讓元素脫離普通流，然后使用width/height，margin/padding將元素定位。脫離普通流的元素，就像脫離地心引力一樣，與普通流不在一個(gè)高度上。這個(gè)跟圖層的概念類(lèi)似。高度不同所以可以疊在其他元素上面產(chǎn)生重疊或者使用負(fù)邊距跑到父元素外，理解了這一點(diǎn)浮動(dòng)布局就很好理解了。

下面用個(gè)圣杯布局的例子說(shuō)明一下，理解了這個(gè)之后其他布局更加簡(jiǎn)單：

left，寬度固定,高度可固定也可由內(nèi)容撐開(kāi)

right，寬度固定，高度可固定也可由內(nèi)容撐開(kāi)

center，可以自適應(yīng)瀏覽器寬度，高度可固定也可由內(nèi)容撐開(kāi)。

HTML & CSS：

原理非常簡(jiǎn)單，左右側(cè)邊欄定寬并浮動(dòng)，中部?jī)?nèi)容區(qū)放最后不浮動(dòng)、默認(rèn)width：auto并設(shè)置相應(yīng)外邊距，讓左右側(cè)邊欄浮動(dòng)到上面。注意：子元素設(shè)置為浮動(dòng)之后，父對(duì)象的高度就坍塌了，需要設(shè)置父對(duì)象后的元素清除浮動(dòng)，這樣父對(duì)象的高度才能被浮動(dòng)子元素?fù)纹饋?lái)了。

當(dāng)然，我們也要問(wèn)一下，為啥父對(duì)象高度會(huì)坍塌呢？上面也說(shuō)過(guò)了，浮動(dòng)元素已經(jīng)脫離了普通流，父對(duì)象所在的普通流比喻成地表，那浮動(dòng)元素就已經(jīng)上天了。但是父對(duì)象還在地表啊，從外太空看浮動(dòng)元素在父對(duì)象里面，但是其實(shí)并不在，又怎么能撐開(kāi)父對(duì)象呢？寬度如果我們不設(shè)置的話，其實(shí)也是為0的，因?yàn)楦笇?duì)象里面空空如也，所以寬高為0。

要撐開(kāi)的辦法就兩個(gè)，1是讓父對(duì)象也上天（。。。你咋不上天呢），2是把浮動(dòng)元素的邊框邊界拉下來(lái)。

父對(duì)象也上天（即浮動(dòng)）的話，那就不能實(shí)現(xiàn)寬度自適應(yīng)了。因?yàn)閒loat元素的width：auto是包裹內(nèi)容的，參考前面說(shuō)的！

辦法2就是在后面的元素里加一個(gè)clear語(yǔ)句。說(shuō)到這個(gè)問(wèn)題就要扯到clear與BFC了，我就不獻(xiàn)丑了。傳送門(mén)：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear

這個(gè)三列布局還有個(gè)雙飛（是雙飛翼！想啥呢）的變種，就是在HTML中center部分也就是內(nèi)容區(qū)提到最前面，也就是內(nèi)容先行渲染。在網(wǎng)絡(luò)不好的時(shí)候，左右雙翼能不能出來(lái)不要緊，先讓主體內(nèi)容出來(lái)！這種想法，明顯的優(yōu)秀工程師思維，但，尼瑪?shù)碾p翼都是廣告啊。廣告不出來(lái)，哪能賺錢(qián)養(yǎng)你們這群工程師？所以提出雙飛的玉伯才離開(kāi)了淘寶？？？（純屬意淫，如真屬實(shí)，當(dāng)我扯淡，哈哈哈！）

先上碼：

思路：

1)既然HTML里面要讓center放前面，為了讓left跑到center前面，那center也必須浮動(dòng)了，否則因?yàn)槎际菈K元素他們會(huì)分兩行。

2)浮動(dòng)之后還要讓center寬度自適應(yīng)，那明顯width只能100%，然后在父元素中設(shè)width:auto，還有兩側(cè)margin，其實(shí)也就是父對(duì)象寬度自適應(yīng)，center只是繼承content的寬度。

3)對(duì)left使用負(fù)的margin讓他們浮動(dòng)到上方去。

代碼里面我用到了一個(gè)calc()，這個(gè)CSS3帶來(lái)的計(jì)算函數(shù)簡(jiǎn)直酷斃了！本例里如果不使用calc函數(shù)，那么就需要wrap左邊距為0，left左邊距-100%，然后center多加一層子塊DIV設(shè)置margin-left：100px，可以達(dá)到同樣的效果！calc函數(shù)與百分比配合就足以實(shí)現(xiàn)自適應(yīng)的要求！目前所有的自適應(yīng)布局都在利用瀏覽器來(lái)為我們計(jì)算尺寸，但是有了calc之后我們就可以自己制定規(guī)則！單是想想都高潮了吧？

總結(jié)：使用浮動(dòng)來(lái)進(jìn)行布局，一個(gè)比較大的問(wèn)題是清除浮動(dòng)。這個(gè)可以使用一個(gè)after偽類(lèi)來(lái)清除。更大的問(wèn)題是浮動(dòng)性像水一樣向上流動(dòng)，難以把握。在元素較多而且元素高度尺寸不一的情況下，單純使用浮動(dòng)只能實(shí)現(xiàn)上端對(duì)齊，這對(duì)于適應(yīng)多種設(shè)備的布局就顯得力不從心了。目前的做法是犧牲一部分內(nèi)容，將元素做成等高排列，從美觀上看也當(dāng)然也是極好的，比參差不齊的排列要美觀。




普通流布局

普通流布局：display : inline-block！這是一個(gè)傳說(shuō)中取代float布局的存在?？戳艘恍┚W(wǎng)站，PC端浮動(dòng)為主，移動(dòng)端的也用的不多啊，已經(jīng)有些使用flex的了，說(shuō)好的inline-block一統(tǒng)江湖呢？

使用inline-block之前先處理點(diǎn)小障礙：inline-block元素會(huì)有4px左右的空隙，這個(gè)是因?yàn)槲覀儗?xiě)代碼時(shí)候的換行符所致。

解決辦法很簡(jiǎn)單：在inline-block的父元素中設(shè)置樣式font-size：0；letter-spacing: -4px; 然后設(shè)置inline-block的所有兄弟元素 font-size：值；letter-spacing: 值px; 恢復(fù)正常的顯示。

另外還有一點(diǎn)需要注意的是inline-block默認(rèn)是基線對(duì)齊的，而inline-block的基線又跟文本基線一致，所以在內(nèi)容不同的時(shí)候并不能水平對(duì)齊。只需要用vertical-align顯式聲明一下top/bottom/middle對(duì)齊即可。這里補(bǔ)充一下基線的內(nèi)容，沒(méi)你想的那么簡(jiǎn)單哦。分有文字和無(wú)文字兩種情況：

1）無(wú)文字：容器的margin-bottom下邊緣。與容器內(nèi)部的元素沒(méi)一毛錢(qián)關(guān)系。

2）有文字：最后一行文字的下邊緣，跟文字塊（p,h等）的margin、padding沒(méi)關(guān)系！注意是最后一行，無(wú)論文字在什么子對(duì)象容器內(nèi)在什么位置都沒(méi)關(guān)系，瀏覽器會(huì)找到最后一行文字對(duì)齊底部。

你們感受一下：

警示：inline-block的基線是最后一行文字的底部，flex里面的基線是第一行文字的底部（請(qǐng)看下文阮老師的文章）

滿(mǎn)滿(mǎn)的都是淚啊。。。既然都叫baseline，何必呢？

使用inline-block進(jìn)行圣杯布局：

這里也沒(méi)什么好說(shuō)的，用到的也是width：auto和width：100%這兩點(diǎn)，簡(jiǎn)單知識(shí)點(diǎn)的簡(jiǎn)單用法。

雙飛的話，代碼跟圣杯的基本相同，注意在html的順序變?yōu)閏enter>right>left，只改左欄移動(dòng)的margin-left: calc(-100% – 100px)到預(yù)定位置即可。不能用calc的話可以在center里面再加一層，跟浮動(dòng)一樣的處理方式。更簡(jiǎn)單的方法是使用CSS3帶給我們的box-sizing屬性。請(qǐng)看代碼：

總結(jié)：相比浮動(dòng)inline-block更加容易理解，也更符合我們的認(rèn)知，結(jié)合盒子模型的幾個(gè)控制屬性就可以進(jìn)行布局了。對(duì)于元素高度不同的情況，目前浮動(dòng)布局的做法都是將元素做成等高元素進(jìn)行展現(xiàn)，這從美學(xué)上看也符合整齊的要求，不過(guò)犧牲了一部分內(nèi)容。但inline-block有vertical-align屬性，可以很好地解決元素高度不同而帶來(lái)的布局問(wèn)題。用過(guò)之后，你也會(huì)喜歡上inline-block的。。。至少我會(huì)！




絕對(duì)定位

前面的浮動(dòng)和普通流中其實(shí)定位都是靠盒子模型控制的，與我們常說(shuō)的定位還是有差別的。而絕對(duì)定位就是我們平常所說(shuō)的定位，給定參考坐標(biāo)系+坐標(biāo)確定位置。關(guān)于絕對(duì)定位的資料太多，我就不說(shuō)了。提一點(diǎn)就是absolute定位的基準(zhǔn)是最近的非static定位父對(duì)象，而fixed是相對(duì)html根節(jié)點(diǎn)的定位。兩種定位都會(huì)脫離普通流，跟之前說(shuō)的浮動(dòng)一樣，上天了。

當(dāng)然，他們跟浮動(dòng)在空間中的位置還是有差別的，項(xiàng)目中有遇到這個(gè)問(wèn)題的請(qǐng)參考張大嬸的文章：http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 還是要結(jié)合項(xiàng)目來(lái)看，否則看過(guò)也只是看過(guò)而已，并不會(huì)存到你的腦子里，畢竟還是相當(dāng)抽象相當(dāng)理論性的東西。借用張大神的一個(gè)總結(jié)圖：

使用絕對(duì)定位（特指absolute）做自適應(yīng)布局跟前面兩種方式?jīng)]太大差別，寬度自適應(yīng)還是在auto和100%上做文章，而位置則由top/bottom/left/right等控制。還是以圣杯布局來(lái)舉例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>寬度自適應(yīng)布局</title>
<style>
.wrap {
position: relative;
background-color: #FBD570;
margin-left: 100px;
margin-right: 150px;
height: 250px;
}
.left {
position: absolute;
top: 0;
left: -100px;
width: 100px;
background: #00f;
height: 180px;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 150px;
background: #0f0;
height: 200px;
margin-right: -150px;
}
.center {
position: absolute;
top: 0;
left: 0;
background: #B373DA;
height: 150px;
min-width: 150px;
width: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center">
center，可以自適應(yīng)瀏覽器寬度，高度固定。
</div>
<div class="left">left，寬度高度固定</div>
<div class="right">right，寬度高度固定</div>
</div>
</body>
</html>

父元素為relative，子元素為absolute，這樣的話，又會(huì)出現(xiàn)跟浮動(dòng)一樣的問(wèn)題：父對(duì)象高度坍塌，子元素不能撐起父對(duì)象。原因也跟浮動(dòng)一樣，解決辦法的話目前我知道的只有給父對(duì)象指定一個(gè)確定height值，大家如果有更好的辦法，請(qǐng)聯(lián)系我！

總結(jié)：?jiǎn)渭兪褂媒^對(duì)定位進(jìn)行自適應(yīng)布局的情況很少，一般絕對(duì)定位都用在尺寸固定的元素定位上。而且fixed定位的渲染效率很低，因?yàn)樗鼤?huì)頻繁觸發(fā)瀏覽器的重排。另外提一點(diǎn)：CSS3的transform會(huì)對(duì)絕對(duì)定位產(chǎn)生影響哦~比如說(shuō)讓fixed定位不再固定在瀏覽器視窗的黑魔法：http://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/




彈性盒子

CSS3中對(duì)布局影響最大的莫過(guò)于彈性盒子模塊了，這是一套區(qū)別于以往盒子模型布局的全新方案。上面幾種方法你可以看到，為了實(shí)現(xiàn)自適應(yīng)我們用的都是width：auto和100%的嵌套以及各種邊距的移動(dòng)定位，這套規(guī)則并不符合我們的認(rèn)知。為什么不能開(kāi)拓出一塊區(qū)域，橫豎排列都可以，內(nèi)部所有元素的尺寸可以按照一個(gè)規(guī)則和這個(gè)區(qū)域的大小聯(lián)系起來(lái)？終于CSS3做出了改變，引入了flex彈性布局方案，彈性盒布局有如下優(yōu)勢(shì)：

1.獨(dú)立的高度控制與對(duì)齊。

2.獨(dú)立的元素順序。

3.指定元素之間的關(guān)系。

4.靈活的尺寸與對(duì)齊方式。

在MDN上有非常簡(jiǎn)單易懂的基礎(chǔ)教程：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

上面也已經(jīng)給出了圣杯布局的自適應(yīng)布局方案，所以代碼就不貼了不過(guò)這個(gè)例子實(shí)現(xiàn)的是3欄成比例縮放，左右欄如果需要固定值的話可以寫(xiě)成 flex: 0 0 150px; 的樣式。

但是上面的教程沒(méi)有給出各個(gè)屬性的詳細(xì)解釋?zhuān)ㄗh看看阮一峰的博文，詳細(xì)易懂而且配圖超漂亮的有木有：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

總結(jié)：彈性盒子在移動(dòng)端的應(yīng)用會(huì)越來(lái)越普遍，這套模型值得去好好研究。語(yǔ)法規(guī)則都是非常貼近人性，非常靈活，瀏覽器兼容性也非常好，當(dāng)然國(guó)內(nèi)百花齊放的移動(dòng)瀏覽器會(huì)有哪些大坑呢？我們拭目以待~




其他

其他包括position：relative和CSS3中的transform都可以實(shí)現(xiàn)定位，但是由于他們?cè)谠瓉?lái)的普通流中還占著一個(gè)坑，所以很少用來(lái)布局啥的。transform是個(gè)很酷炫的東西，可以用平面的素材做出很多3D的效果，而且不需要js就可以做，非常好玩。此文已經(jīng)很長(zhǎng)，就不多說(shuō)了，以后會(huì)寫(xiě)一篇文章來(lái)專(zhuān)門(mén)說(shuō)說(shuō)她的故事。

原作者姓名：茄果
原出處：博客園
原文鏈接：這可能是史上最全的CSS自適應(yīng)布局總結(jié)教程 - 茄果 - 博客園