CSS經(jīng)典布局

本文主要對(duì)一些常見(jiàn)的CSS布局問(wèn)題進(jìn)行總結(jié)萄喳，涉及三欄布局卒稳、負(fù)margin、清除浮動(dòng)取胎、居中布局展哭、Flex布局，等等....

基礎(chǔ)

一個(gè)界面友好的網(wǎng)站闻蛀，能幫助了解一些大概的CSS布局知識(shí)匪傍。

• 學(xué)習(xí)CSS布局

定位

定位是最基本的一個(gè)布局問(wèn)題，其定義一個(gè)元素相對(duì)于其他元素的位置觉痛，這個(gè)元素可以是父級(jí)元素役衡，也可以是瀏覽器窗口。

先從position屬性說(shuō)起薪棒，static手蝎、relative、absolute俐芯、fixed和sticky棵介。

• static(默認(rèn))：元素框正常生成。塊級(jí)元素生成一個(gè)矩形框吧史，作為文檔流的一部分邮辽；行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。

• relative：元素框相對(duì)于之前正常文檔流中的位置發(fā)生偏移吨述，并且原先的位置仍然被占據(jù)岩睁。發(fā)生偏移的時(shí)候，可能會(huì)覆蓋其他元素揣云。

• absolute：元素框不再占有文檔流位置捕儒，并且相對(duì)于包含塊進(jìn)行偏移(所謂的包含塊就是最近一級(jí)外層元素position不為static的元素。

• fixed：元素框不再占有文檔流位置邓夕，并且相對(duì)于視窗進(jìn)行定位.

• sticky: "fixed" OR "relative",在屏幕范圍內(nèi)時(shí)刘莹，當(dāng)作relative，當(dāng)該元素移出屏幕范圍（viewport）時(shí)翎迁，作為fixed栋猖。

三欄布局

三欄布局其實(shí)就是，兩邊的box寬度固定汪榔，中間的box寬度自適應(yīng)蒲拉。

<div class="container">
<div class="middle">中間欄
</div>
<div class="left">左邊欄
</div>
<div class="right">右邊欄
</div>
</div>

圣杯布局，包含三個(gè)box痴腌，左中右

• 中間寬度設(shè)為width：100%;,占一行雌团。

• 左右box使用負(fù)marginmargin-left，將它們提至于中間box同一行士聪。

• 左邊盒子margin-left:-100%;锦援。

• 右邊盒子margin-right:-右邊盒子的長(zhǎng)度px;。

• Container再預(yù)設(shè)左右padding:0 200px 0 220px;剥悟，為左右盒子留出位置灵寺。

• 使用position: relative;占居Padding兩邊的空白。

.container {
padding: 0 220px 0 200px;
}
.left, .middle, .right {
float: left;
position: relative;
min-height: 300px;
}
.middle {
width: 100%;
background-color: #fe9898;
}
.left {
width: 200px;
margin-left: -100%;
left: -200px;
background-color: #555;
}
.right {
width: 220px;
right: -220px;
margin-left: -220px;
background-color: blue;
}

清除浮動(dòng)

清除浮動(dòng)主要是為了解決高度塌陷的問(wèn)題

何謂高度塌陷呢区岗？

要解決這個(gè)問(wèn)題略板，需要先明晰兩個(gè)概念普通流和浮動(dòng)

1. 普通流（normal flow）：將窗體自上而下分成一行一行,并在每行中按從左至右的挨次排放元素,即為普通流/文檔流。內(nèi)聯(lián)元素不會(huì)獨(dú)占一行慈缔，而每個(gè)非浮動(dòng)塊級(jí)元素都獨(dú)有一行叮称。

2. 浮動(dòng)(float)：浮動(dòng)的框可以左右移動(dòng)，直至它的外邊緣遇到包含框或者另一個(gè)浮動(dòng)框的邊緣藐鹤。需要注意的是瓤檐，浮動(dòng)框不屬于普通流，當(dāng)一個(gè)元素浮動(dòng)之后娱节，不會(huì)影響到塊級(jí)框的布局而只會(huì)影響內(nèi)聯(lián)框（通常是文本）的排列挠蛉，文檔中的普通流就會(huì)表現(xiàn)得和浮動(dòng)框不存在一樣。

正是因?yàn)楦?dòng)的這種特性肄满，導(dǎo)致本屬于普通流中的元素浮動(dòng)之后碌秸，如果包含框內(nèi)部不存在其他普通流元素绍移，就會(huì)表現(xiàn)出高度為0（高度塌陷）悄窃。

方法

1）添加額外標(biāo)簽

通過(guò)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽讥电，例如<div style="clear:both"></div>，亦或是<br clear="all" />,但缺點(diǎn)是添加了無(wú)意義的標(biāo)簽轧抗。

2）父元素也設(shè)置浮動(dòng)

3）使用:after偽元素

.box:after {
display: block;
content: "";
clear: both;
height: 0;
visibility: hidden;
overflow: hidden;
}

其效果相當(dāng)于直接在div.box上添加一個(gè)寬高為0的clear：both的div元素.

BFC??

負(fù)margin

1.作用于static元素上的負(fù)margin

none

Static元素是沒(méi)有設(shè)定成浮動(dòng)的元素恩敌，
當(dāng)static元素的margin-top/margin-left被賦予負(fù)值時(shí)，元素將被拉進(jìn)指定的方向横媚，例如：

/* 元素向上移動(dòng)10px */
#mydiv1 {
margin-top: -10px;
}

但如果你設(shè)置margin-bottom/right為負(fù)數(shù)纠炮，元素并不會(huì)如你所想的那樣向下/右移動(dòng)，而是將后續(xù)的元素拖拉進(jìn)來(lái)灯蝴，覆蓋本來(lái)的元素恢口。

/*
*mydiv1后續(xù)的元素向上移動(dòng)10px，mydiv1本身并不會(huì)動(dòng)
*/
#mydiv1 {
margin-bottom: -10px;
}

如果沒(méi)有設(shè)定width屬性穷躁，設(shè)定負(fù)margin-left/right會(huì)將元素拖向?qū)?yīng)的方向耕肩，并增加寬度，此時(shí)的margin的作用就像padding一樣问潭。

2.作用于浮動(dòng)元素上的負(fù)margin

定義三個(gè)box

<div class="container">
<div class="fl box1">box1</div>
<div class="fl box2">box2</div>
<div class="fl box3">box3</div>
</div>

.fl {
float: left;
width: 100px;
height: 100px;
}
.box1{background-color: rgba(33, 114, 214, 0.8);}
.box2{background-color: rgba(255, 82, 0, 0.8);}
.box3{background-color: rgba(90, 243, 151, 0.8);}

none

• 給所有的box都加上margin-left:-25px;

none

• 只給box3加上margin-left:-200px;

none

居中布局

• Centering in CSS:A Complete Guide:全面介紹各種情況下的居中布局猿诸，但是是全英的。

主體內(nèi)容：

• 水平居中

• 行內(nèi)元素(inline)：text-align:center;

• 塊級(jí)元素(block)：設(shè)置寬度且margin-left和margin-right為auto

• 多個(gè)塊級(jí)元素：父元素設(shè)為text-align:center;狡忙，子元素設(shè)為display:inline-block;或用flex布局

• 垂直居中

• 行內(nèi)元素(inline)

• 單行梳虽，設(shè)置上下padding相等，或設(shè)置height和line-height相等

• 多行灾茁，設(shè)置上下padding相等窜觉，或設(shè)置display:tabel-cell和vertical-align:middle,或使用flex布局

• 塊級(jí)元素(block)，父元素需設(shè)相對(duì)布局relative

• 已知高度：子元素使用絕對(duì)布局top:50%北专，再用負(fù)的margin-top向上拉

• 未知高度：子元素使用絕對(duì)布局禀挫，top:50%;transform:tranlateY(-50%);

• 水平垂直居中

• To be continued...

Flex布局

Flex布局，官稱(chēng) CSS Flexible Box逗余，是CSS3中的一種新的布局方式特咆。Flexbox可以控制未知容器元素的對(duì)齊方式，排列方向录粱，排列順序等腻格，甚至是在未知大小的容器。其主要特點(diǎn)是能夠修改Flex容器內(nèi)子元素(flex item)的寬度或高度啥繁。

FLex 模塊

Flex布局主要由父容器和它的子元素直接構(gòu)成菜职，，其中父元素稱(chēng)為Flex Container旗闽，子元素稱(chēng)為Flex Item酬核。

none

有關(guān)Flex模塊更詳細(xì)的信息 英語(yǔ)警告

使用方法

使用Flex布局只需在父容器元素上設(shè)置display屬性：

.container {
display: -webkit-flex; /* Safari */
display: flex;
}

如果想設(shè)置為一個(gè)內(nèi)聯(lián)元素時(shí)：

.container {
display: -webkit-inline-flex; /* Safari */
display: inline-flex;
}

注意:屬性只要設(shè)置在父容器上蜜另，其所有子元素將自動(dòng)成為Flex項(xiàng)目(item)。

Flex容器屬性

• flex-direction

這個(gè)屬性主要設(shè)置flex容器的主軸方向嫡意，指定flex項(xiàng)目在flex容器中的排列方式举瑰。flex容器的主軸方向主要有水平和縱向兩種.

flex-container {
flex-direction: row;
flex-direction: row-reverse;/*反向*/
}

none

none

flex-direction:column;縱向排列，同理蔬螟。

但注意此迅，其默認(rèn)值為row.

• flex-wrap

flex項(xiàng)目在flex容器中默認(rèn)是只顯示一行。如果希望控制flex項(xiàng)目在flex容器中按一行或多行排列旧巾，可以使用flex-wrap耸序。

.flex-container {
flex-wrap: nowrap;
}

Flex項(xiàng)目在flex容器中默認(rèn)顯示一行，項(xiàng)目寬度將自動(dòng)縮減來(lái)適應(yīng)容器.

none

.flex-container {
flex-wrap: wrap;
}

使用wrap屬性鲁猩，item將從左到右由上到下在container中顯示坎怪。

none

• justify-content

該屬性是flex-direction和flex-wrap的簡(jiǎn)寫(xiě)，默認(rèn)是flex-flow: row nowrap;廓握。

• flex-flow

flex-flow指定flex項(xiàng)目在flex容器中沿主軸在當(dāng)前行的對(duì)齊方式

.flex-container {
justify-content: flex-start;/*向左靠齊*/
justify-content: flex-end;/*向右靠齊*/
}

.flex-container {
justify-content: center;/*居中*/
}

none

Flexitem之間間距相對(duì)搅窿，第一個(gè)item和最后一個(gè)item向container的邊緣對(duì)齊。

.flex-container {
justify-content: space-between;
}

none

.flex-container {
justify-content: space-around;
}

Flexitem前后間距相等

none

默認(rèn)：flex-start

• algin-items

Flex項(xiàng)目在容器側(cè)軸對(duì)齊方式疾棵，類(lèi)似于justify-content戈钢，只不過(guò)不是水平方向，而是縱向是尔。這個(gè)屬性可以設(shè)置所有flex項(xiàng)目對(duì)齊方式殉了，并且包括匿名元素.

屬性值：

• stretch(沿側(cè)軸高度填滿容器)

• flex-start

• flex-end

• center

• baseline（按文本基線在側(cè)軸上排列）

Flex項(xiàng)目屬性

• order

order屬性是用來(lái)控制flex容器中flex項(xiàng)目的排列順序。默認(rèn)情況flex項(xiàng)目在flex容器的順序是flex項(xiàng)目出現(xiàn)的順序拟枚。

none

• flex-glow

這個(gè)屬性用來(lái)指定 flex項(xiàng)目的放大比例薪铜，其決定了flex項(xiàng)目相對(duì)flex容器自由空間進(jìn)行放大.

none

• flex-basis

用來(lái)指定flexitem的大小。

none

• align-self

這個(gè)屬性用來(lái)指定flexitem自身的對(duì)齊方式：

.flex-item {
-webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

none

Flex項(xiàng)目中的無(wú)效屬性

float恩溅，clear和vertical-align屬性應(yīng)用在flex項(xiàng)目上將會(huì)無(wú)效和無(wú)法將其out-of-flow.

參考文獻(xiàn)

• CSS布局說(shuō)——可能是最全的

• CSS 布局經(jīng)典問(wèn)題初步整理

• margin為負(fù)值產(chǎn)生的影響和常見(jiàn)布局應(yīng)用

• 負(fù)margin用法權(quán)威指南

• 圖解CSS3 Flexbox屬性

• ......太多 不列了