前端·CSS佈局基礎
知識點1：重置樣式
因不同瀏覽器對標籤的解析各不相同，重置css樣式可以讓標籤在不同瀏覽器下產生相同的效果，減少預設樣式可能帶來的問題。
通常將重置樣式寫在reset。css中，如
：
/*去掉邊界與修改預設字型*/
body
，
div
，
dl
，
dt
，
ul
，
li
，
h1
，
h2
，
h3
，
h4
，
h5
，
h6
，
input
，
form
，
a
，
p
，
textarea
{
margin
：
0
；
padding
：
0
；
font-family
：
“Helvetica Neue”
，
Helvetica
，
Arial
，
sans-serif
；
}
/*去掉列表前面的小點*/
ul
，
ol
，
li
{
list-style
：
none
；
}
/*去掉超連結下劃線*/
a
{
text-decoration
：
none
；
}
/*去掉圖片邊框*/
img
{
border
：
none
；
}
/*清除浮動*/
。
clearfloat
{
zoom
：
1
；
}
。
clearfloat
：
after
{
display
：
block
；
clear
：
both
；
content
：
“”
；
visibility
：
hidden
；
height
：
0
；
}
知識點2：元素水平居中
1。對於行內元素：對父元素設定text-align：center；
2。對於定寬塊級元素：設定左右margin為auto；
3。對於不定寬塊級元素：設定position：absolute， left：50%， transform：translate（-50%， 0）；
4。flex佈局，justify-content：center；
知識點3：元素垂直居中
1。對於行內元素：設定父元素的line-height為父元素高度；
2。對於定高塊級元素：設定margin-top或margin-bottom為（父元素高度-子元素高度）/2；
3。對於不定高塊級元素：設定position：absolute， top：50%，transform：translate（0， -50%）；
4。flex佈局，align-items：center；
知識點4：兩欄佈局
（假定左側固定寬度，右側自適應）
方法1：雙inline-block。將左右兩個div均設為display：inline-block；，用vertical-align：top；來實現頂端對齊，對父容器設定font-size：0；來消除div間的空格；
方法2：雙float。將左右兩個div均設為float：left；（或者另一個為right）。由於應用了浮動，父元素需要清除浮動；
方法3：左float+右margin-left。左div設為float：left；，右div的margin-left設為左div的寬度。注意清除浮動；
方法4：左absolute+右 margin-left。左div設為position：absolute；，右div的margin-left設為左div的寬度。需修改父容器position為relative。
知識點5：三欄佈局
（假定左右兩側為固定寬度，中間寬度自適應）
方法1：自身浮動法。左div左浮動，右div右浮動，中div的左右margin分別設為左右div的寬度。需要在html中將中div放最後；
方法2：絕對定位法。左div絕對定位於左上角，右div絕對定位於右上角，中div的左右margin分別設為左右div的寬度；
方法3：margin負值法。三欄均向左浮動，左div設margin-left：-100%，右div設margin-left為負的自身寬度，中div設width：100%。需要在html中將中div放最前。
知識點6：聖盃佈局
定義：
1。 header和footer佔螢幕全部寬度，高度固定；
2。 中間contaier部分是一個三欄佈局，left和right寬度固定，middle寬度自適應。
實現：
1。header和footer設width：100%；
2。中間的三欄佈局用margin負值法來實現。會發現中間欄被左右兩欄各覆蓋了一部分內容；
3。給container設定padding-left和padding-right分別為左欄和右欄的寬度；
4。將左右兩欄設定為相對定位，並將左欄left設為負左欄寬度，右欄right設為負右欄寬度。
參考：
<！DOCTYPE html>
<
html
lang
=
“en”
>
<
head
>
<
meta
charset
=
“UTF-8”
>
<
title
>
聖盃佈局
title
>
<
style
type
=
“text/css”
>
body
{
margin
：
0
；
padding
：
0
；
}
header
，
footer
{
height
：
100
px
；
width
：
100
%
；
background-color
：
#bbbbbb
；
}
。
container
{
height
：
300
px
；
padding-left
：
200
px
；
padding-right
：
300
px
；
}
。
container
div
{
float
：
left
；
position
：
relative
；
}
。
left
{
width
：
200
px
；
height
：
300
px
；
background-color
：
#DC698A
；
margin-left
：
-100
%
；
left
：
-200
px
；
}
。
middle
{
width
：
100
%
；
height
：
300
px
；
background-color
：
#3EACDD
；
}
。
right
{
width
：
300
px
；
height
：
300
px
；
background-color
：
#8CB08B
；
margin-left
：
-300
px
；
right
：
-300
px
；
}
style
>
head
>
<
body
>
<
header
>
頭部
header
>
<
div
class
=
“container”
>
<
div
class
=
“middle”
>
中間欄
div
>
<
div
class
=
“left”
>
左欄
div
>
<
div
class
=
“right”
>
右欄
div
>
div
>
<
footer
>
底部
footer
>
body
>
html
>
知識點7：雙飛翼佈局
定義：雙飛翼佈局和聖盃佈局的區別在於如何處理中間欄被遮擋的問題。
實現：中間欄中再放置一個div用於顯示內容，其margin-left設為左邊欄寬度，margin-right設為右邊欄寬度。
其他：聖盃佈局和雙飛翼佈局都使得中間欄在DOM結構上優先，以便先行渲染。
知識點8：彈性佈局flex
彈性佈局flex是2009年W3C提出的一種新佈局，可以簡便、響應式地實現各種頁面佈局，較新版本瀏覽器均支援flex。
只需設定display：flex即可將某元素設為flex容器，其所有子元素自動成為容器成員，稱為flex項。flex項沿著兩個軸main axis（主軸）和cross axis（交叉軸）來佈局。
彈性佈局有以下特點：
1。彈性佈局的專案（item）預設沒有間隔；
2。彈性佈局預設不改變專案的寬度；
3。彈性佈局預設改變專案的高度。如果專案沒有顯式指定高度，就將佔據容器的所有高度；
4。彈性佈局將使得子元素的float、clear和vertical-align屬性失效。
容器屬性有：
1。flex-direction：指定主軸方向。預設為row（從左到右排成一排），其他值有column（從上到下排成一排）、row-reverse和column-reverse；
2。flex-wrap：當專案在一條軸線上排不下時如何換行。預設為nowrap（不換行），其他值有wrap（換行）、wrap-reverse（換行且第一行在下方）；
3。justify-content：控制flex項在主軸上的對齊方式。預設為flex-start（開始處對齊），其他值有flex-end（結束處對齊）、center（在主軸居中）、space-around（沿著主軸均勻分佈，並在兩端都留有一點空間）、space-between（均勻分佈但不會在兩端留下空間）；
4。align-items：控制flex項在交叉軸上的對齊方式。預設為stretch（所有flex項沿著交叉軸方向拉伸以填充父容器），其他值有center（保持原有高度但會在交叉軸居中）、flex-start（頂邊對齊且不拉伸）、flex-end（底邊對齊且不拉伸）、center（居中且不拉伸）。
專案屬性有：
1。order：改變flex項的位置而不影響到dom樹裡元素的順序。預設為0，order大的項在顯示順序中更靠後；
2。flex-grow：放大比例，預設為0（不拉伸寬度），如果所有專案都為1，則它們將等分剩餘空間（如果有的話）；
3。flex-shrink：縮小比例，預設為1（如果空間不足，專案將縮小），如果一個專案為0而其他專案為1，則空間不足時前者不縮小；
4。flex-basis：指定專案最小值，剩餘的可用空間將根據分配比例共享。預設為auto（專案本來大小）；
5。flex是上述三個值的縮寫，預設為0 1 auto；
6。align-self：用於單獨對專案設定對齊方式，可覆蓋align-items。預設繼承父元素align-items，沒有父元素則為stretch（高度自動拉伸），其他值同樣有flex-start、flex-end、center。
應用案例：使用flex實現三欄佈局
#
container
{
display
：
flex
；
}
#
center
{
flex
：
1
；
}
#
left
{
flex
：
0
0
200
px
；
order
：
-1
；
}
#
right
{
flex
：
0
0
150
px
；
}
知識點9：塊級格式化上下文BFC
BFC全稱“Block Formatting Context”， 即“塊級格式化上下文”。BFC可以看作是隔離了的獨立容器（渲染區域），容器裡面的元素不會在佈局上影響到外面的元素，相當於建立了一個隱形的邊界。
觸發BFC的常見條件有：float值不為none；overflow值不為visible；display值為inline-block、flex等；position值為absolute或fixed。
BFC應用1：自適應兩欄佈局。利用BFC渲染規則：BFC的區域不會與float box重疊。實現方法：左div左浮動，右div設定overflow：hidden。
BFC應用2：清除浮動。利用BFC渲染規則：計算BFC高度時，浮動元素也參與計算。實現方法：父div設定overflow：hidden。