本文作者：IMWeb chenxd1996 原文出處：IMWeb社區

0. 前言

作為一個(gè)不喜歡寫(xiě)樣式的前端，遇到了直接對外的活動(dòng)頁(yè)面的需求，一下炸出一堆問(wèn)題：

單位亂用，rem、vh、vw、px亂用甚至混在一起用
html冗余，有時(shí)候一個(gè)div只是為了取margin
一個(gè)頁(yè)面用多種布局方案，flex、float、relative+top、absolute+top、margin，自己坑自己
各種隨意，不嚴格按照視覺(jué)稿理論倒是熟悉，但用起來(lái)還是一塌糊涂。于是，回頭自我救贖一波，好好復習基礎。flex、grid后面不多作研究，尤其是grid這種一兩行就可以搞定很多復雜樣式。如果我們不知道新技術(shù)是為了什么而來(lái)的，解決什么痛點(diǎn)，沒(méi)有體驗一下刀耕火種的時(shí)代，又沒(méi)有一個(gè)良好的團隊合作能力，做起項目來(lái)還真的不一定是“寫(xiě)頁(yè)面太簡(jiǎn)單了”這種事情。

1. 一些實(shí)踐方案深入淺出

1.1 padding

看到百度的頂部，你會(huì )想到什么方案呢？

我們看百度搜索的頂部，頂部的#head（搜索框這一行都是）是fixed的，緊接著(zhù)的那個(gè)div是一個(gè)tab。當然fixed脫離文本流，就用padding把自己的主要內容頂到下面去，不然內容就直接置頂了。

沒(méi)錯，就是很簡(jiǎn)單的一個(gè)css，實(shí)現的方法有很多。然后我們再看一下這個(gè)視覺(jué)效果要怎么實(shí)現：

img+脫離文本流的方法?雙div+定位？

其實(shí)，一個(gè)div+padding馬上解決，div背景100%然后center+padding-top，div里面的文字就自然到下面去了，然后定位定準就好了。另外，文字換成偽元素也可以。

控制寬高比

一些人也知道，padding的百分比相對于width，那么這樣就可以實(shí)現了一個(gè)等比例的盒子，然后隨便縮放都可以了。比如做一個(gè)正方形，邊長(cháng)是屏幕寬度一半：

.scale50 {  background: #aaa;  width: 50%;  height: 0;  text-align: center;  padding-top: 50%;}

很多時(shí)候，我們需要什么4:3，16:9的圖片，就可以用這樣的方法解決了。

1.2 margin

再看看百度的右邊欄

對于這個(gè)欄的左邊部分，用margin還是padding呢？這個(gè)情況當然是padding，因為有一個(gè)邊線(xiàn)??。對于這個(gè)欄的上面，是padding還是margin呢？實(shí)際上，在這個(gè)情況下都是一樣的，但是有一個(gè)潛在問(wèn)題：如果有兩行，而且垂直方向還有其他盒子的margin，那么就會(huì )發(fā)生垂直方向的margin坍塌（取較大值）;或者當有父盒子包裹，他的margin會(huì )走到外面影響外面。這時(shí)候，又要加上轉化為bfc的代碼。

case1:
case2:

還敢亂來(lái)居中嗎

比如，有一個(gè)設計稿是這樣的：

可能看起來(lái)是居中，然后很快寫(xiě)出來(lái)子絕父相的萬(wàn)金油居中。然后設計突然走過(guò)來(lái)說(shuō)，怎么總是感覺(jué)有點(diǎn)不對啊，于是看一下下半部分：

真的不是居中啊，水平方向的也是。那么，這時(shí)候，寫(xiě)死margin不就搞定了，保證視覺(jué)不來(lái)找你。

??...許多天后，測試說(shuō)，某某手機視覺(jué)就出問(wèn)題了。當然，寫(xiě)死px肯定藥丸啊，所以移動(dòng)端就是要用rem解決。我這里一個(gè)rem等于50px，那換算一下，圖上第一個(gè)div（綠色的鉤）的margin就是176 148 0 151，換成rem是3.52 2.96 0 3.02，后面的樣式問(wèn)題只要不是橫屏或者ipad的（無(wú)視覺(jué)稿的前提）都不是你的鍋了。

負的margin

正的就是撐開(kāi)整個(gè)margin-box，那負的我們就可以想象出來(lái)，吃掉這個(gè)margin-box。一般的情況下，就是平移。如果加上了float就神奇了，還能跨行平移。雙飛翼和圣杯布局其中一部分就是利用這個(gè)原理

前面都是廢話(huà)，不就是一個(gè)盒子模型嘛。沒(méi)錯，盒子模型，誰(shuí)都知道，但是用起來(lái)誰(shuí)用的好，這就難說(shuō)了

2. 開(kāi)始試試水

接下來(lái)，準備用n種方法實(shí)現三列布局，中間自適應，兩邊固定寬度

絕對定位

html:

 <div class="container">   <div class="m">中間</div>  <div class="l">左邊</div>  <div class="r">右邊</div> </div>

css:

.container{  position: relative;  height: 100px;}.l, .m, .r {  height: 100px;  position: absolute;}.l {  background: #f00;  width: 100px;}.m {  background: #0f0;  width: calc(100% - 150px);  margin: 0 50px 0 100px;}.r {  background: #00f;  width: 50px;  right: 0;}

分析：不論順序，流式布局，中間先加載，但用了calc

"calc?! 避免recalculate啊"

這時(shí)候，去吧，ie盒模型：

.m {  background: #0f0;  width: 100%;  box-sizing: border-box;  padding: 0 50px 0 100px;}

看一下對比：

圣杯與雙飛翼布局

還是一樣的html

.container {  height: 100px;  width: 100%;  padding: 0 50px 0 100px;}.m, .l, .r {  height: 100px;  float:left;}.m {  background: #f00;  width: 100%;}.l {  background: #0f0;  width: 100px;  margin-left: -100%;  position: relative;  left: -100px;}.r {  background: #00f;  width: 50px;  margin-right: -50px;}

很多人說(shuō)這個(gè)難懂，其實(shí)我們可以一步步來(lái)：先放好容器設好寬高背景，三個(gè)div是mlr順序。然后float，顯然m自己占一行，其他兩個(gè)占一行。

接著(zhù)，用到負margin，先把左邊到移動(dòng)一行，即是-100%，右邊就移動(dòng)一個(gè)身位-50px就ok，現在已經(jīng)是視覺(jué)上的3列。最后，中間部分開(kāi)頭被遮住，而且占了100%行寬。那么我們只能用容器的padding或者自己的margin壓自己。

如果是用容器padding，將左右兩邊騰出來(lái)，剛剛好放下lr兩個(gè)div。最后，l和r還是在m里面，所以還要移一下，relative就好。這就是圣杯布局

如果是用自己的margin壓自己，那么就需要多一個(gè)div包住自己。前面步驟一樣，包住自己的div占滿(mǎn)一行，但是自身有margin，完美解決。這就是雙飛翼布局。圖示和上圖基本一模一樣，只是最外那層不是container而是m，真正的展示出來(lái)的中間部分是m里面的div，另外，l和r也不用relative了。

<div class="m">  <div class="margin-setting">  中間  </div></div>

這是傳統css+div的一套比較好的解決方案，不過(guò)我們愁的是高的問(wèn)題了，需要自己設

float+calc

  <div class="container">    <div class="l">左邊</div>    <div class="m">這是中間內容</div>    <div class="r">右邊</div>  </div>

這次的html不能調換順序寫(xiě)了

.container {  height: 100px;  width: 100%;}.m, .l, .r {  height: 100px;  float: left;}.m {  background: #f00;  width: calc(100% - 150px);}.l {  background: #0f0;  width: 100px;}.r {  background: #00f;  width: 50px;}

類(lèi)似于前面的absolute方案，calc可以用ie盒子替代

行內元素

是不是遇到過(guò)行內元素總是有間隔的問(wèn)題，html加注釋就可以去掉分隔符，當然這里要實(shí)現3列布局：

  <div class="l">左邊</div><!--  --><div class="m">中間</div><!--  --><div class="r">右邊</div>

css：

.l, .m, .r {  height: 100px;  display: inline-block;}.l {  background: #f00;  width: 50px;}.m {  background: #0f0;  width: calc(100% - 150px);}.r {  background: #00f;  width: 100px;}

特點(diǎn)：樣式及其脆弱，內容換行馬上崩了，只能在沒(méi)文字的情況好一點(diǎn)。calc還是一樣的方法，ie盒子完美解決

兩個(gè)div實(shí)現三列

  <div class="container" l="左邊">中間</div>  <div class="r">右邊</div>

左邊的內容用attr抓

.container {  float: left;  height: 100px;  background: #f00;}.container::before {  content: attr(l);  display: block;  width: 100px;  float: left;  height: 100px;  background: #0f0;}.r {  height: 100px;  width: 50px;  float: left;  background: #00f;  margin-right: -100%;}

用content做的內容，注定了左邊不能再放html元素了

flex與grid

html還是按順序：

<div class="container">    <div class="l">左邊</div>    <div class="m">這是中間內容    </div>    <div class="r">右邊</div></div>

大家都知道的flex實(shí)現：

.container {  display: flex;  height: 100px;}.l {  background: #f00;  min-width: 100px;}.m {  background: #0f0;}.r {  background: #00f;  min-width: 50px;}

不過(guò)，我更看好grid，符合程序員思維，一個(gè)配置，兩行代碼，基本搞定大部分場(chǎng)景

.container {  display: grid;  grid-template-columns: 100px auto 50px;  grid-template-rows: 100px;}.container div:nth-of-type(1) {  background: #f00;}.container div:nth-of-type(2) {  background: #0f0;}.container div:nth-of-type(3) {  background: #00f;}

一個(gè)div實(shí)現