一.水平居中
子元素為行內(nèi)元素還是塊狀元素岂却，寬度一定還是寬度未定颤陶，采取的布局方案不同挣郭。
子元素為
- 行內(nèi)元素：對(duì)父元素設(shè)置
text-align:center; - 定寬塊狀元素: 設(shè)置左右
margin: 0 auto; - 不定寬塊狀元素: 設(shè)置子元素為
display: inline-block,然后在父元素上設(shè)置text-align:center; - 通用方案: flex布局露氮，對(duì)父元素設(shè)置
display:flex;justify-content:center;
注意:內(nèi)聯(lián)元素 ,塊級(jí)元素和行內(nèi)塊元素的區(qū)別:
塊級(jí)元素的特點(diǎn)：
（1）總是從新行開始
（2）高度须揣，行高葛虐、外邊距以及內(nèi)邊距都可以控制溜腐。
（3）寬度默認(rèn)是容器的100%
（4）可以容納內(nèi)聯(lián)元素和其他塊元素译株。
行內(nèi)元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素在一行上。
（2）高挺益、寬無效歉糜，但水平方向的padding和margin可以設(shè)置，垂直方向的無效望众。
（3）默認(rèn)寬度就是它本身內(nèi)容的寬度匪补。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素。
行內(nèi)塊元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會(huì)有空白縫隙烂翰。
（2）默認(rèn)寬度就是它本身內(nèi)容的寬度夯缺。
（3）高度，行高甘耿、外邊距以及內(nèi)邊距都可以控制喳逛。
二.垂直居中
垂直居中對(duì)于子元素是單行內(nèi)聯(lián)文本、多行內(nèi)聯(lián)文本以及塊狀元素采用的方案是不同的棵里。
- 父元素一定润文，子元素為單行內(nèi)聯(lián)文本：設(shè)置父元素的height等于行高line-height
<div class="parent">
<span class="child">
12234
</span>
</div>
.parent{
height: 50px;
line-height: 50px;
}
- 父元素一定，子元素為多行內(nèi)聯(lián)文本：設(shè)置父元素的display:table-cell或inline-block殿怜，再設(shè)置vertical-align:middle;
<div class="parent">
<span class="child">
12234 <br>
2345
</span>
</div>
.parent{
height: 100px;
display: table-cell;
vertical-align:middle;
}
塊狀元素:設(shè)置子元素position:absolute 并設(shè)置top典蝌、bottom為0，父元素要設(shè)置定位為static以外的值头谜，margin:auto;
通用方案: flex布局骏掀，給父元素設(shè)置{display:flex; align-items:center;}。
注意:
vertical-align 不影響塊級(jí)元素中的內(nèi)容對(duì)齊，它只針對(duì)于 行內(nèi)元素或者行內(nèi)塊元素截驮，特別是行內(nèi)塊元素笑陈， 通常用來控制圖片/表單與文字的對(duì)齊。
一個(gè)問題:
圖片或者表單等行內(nèi)塊元素葵袭，他的底線會(huì)和父級(jí)盒子的基線對(duì)齊涵妥。這樣會(huì)造成一個(gè)問題，就是圖片底側(cè)會(huì)有一個(gè)空白縫隙,怎么解決?
- 給img vertical-align:middle | top等等坡锡。 讓圖片不要和基線對(duì)齊
- 給img vertical-align:middle | top等等蓬网。 讓圖片不要和基線對(duì)齊
.parent{
border: 1px solid red;
}
img{
/* vertical-align: bottom; */
display: block;
}
三.css布局
單列布局
1.上中下等寬布局
<div id="container">
<div id="header">頭部</div>
<div id="content">內(nèi)容</div>
<div id="footer">尾部</div>
</div>
body{margin: 0;}
#container{
height: 100%;
/* width: 960px; */
/*設(shè)置width當(dāng)瀏覽器窗口寬度小于960px時(shí)，單列布局不會(huì)自適應(yīng)鹉勒。*/
max-width: 960px;
margin: 0 auto;
}
#header{
height: 20%;
background-color: red;
}
#footer{
height: 20%;
background-color: yellow;
}
#content{
height: 60%;
background-color: green;
}
2.上下瀏覽器寬度,中間內(nèi)容寬度
<div id="container">
<div id="header">
<div class="layout">頭部</div>
</div>
<div id="content" class="layout">內(nèi)容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
</div>
#container{
height: 100%;
}
#header{
background-color: yellow;
height: 20%;
}
#content{
background-color: green;
height: 60%;
}
#footer{
background-color: red;
height: 20%;
}
.layout{
/*width: 960px;*/
max-width: 960px;/*當(dāng)瀏覽器寬度小于960px時(shí),效果與第一種方法相同*/
margin: 0 auto;
}
二三列布局
1.float+margin
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="content"></div>
</div>
div{height: 100%;}
#left{
width: 100px;
float: left;
background-color: red;
}
#right{
width: 100px;
float: right;
background-color: yellow;
}
#content{
margin: 0 100px;/* 或者換成overflow: hidden; 觸發(fā)了BFC使重新計(jì)算寬度帆锋，就不需要寫margin了*/
background-color: green;
}
DOM順序固定！
效果：（缺點(diǎn)：先寫兩側(cè)欄禽额，再寫主面板锯厢，更換后則側(cè)欄會(huì)被擠到下一列，渲染時(shí)先渲染了側(cè)邊欄脯倒，而不是比較重要的主面板.实辑。）
2.絕對(duì)定位法
<div id="container">
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
</div>
div{height: 100%;}
#left,#right{
position: absolute;
top: 0;
width: 100px;
}
#left{
left: 0;
background-color: red;
}
#right{
right: 0;
background-color: yellow;
}
#content{
margin: 0 100px;/* overflow: hidden; */
background-color: green;
}
DOM順序可以隨意調(diào)整！
缺點(diǎn)在于：如果中間欄含有最小寬度限制盔憨，或是含有寬度的內(nèi)部元素，當(dāng)瀏覽器寬度小到一定程度讯沈，會(huì)發(fā)生層重疊的情況郁岩。
3.margin負(fù)值法（圣杯布局）
<div id="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.main {
float: left;
width: 100%;
}
.left {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -190px;
}
.right {
float: left;
width: 230px;
margin-left: -230px;
position: relative;
right: -230px;
}
#container {
padding: 0 230px 0 190px;
}
DOM元素的書寫順序不得更改。
主面板部分優(yōu)先渲染（一般主面板會(huì)比側(cè)欄內(nèi)容重要）缺狠。
當(dāng)面板的main內(nèi)容部分比兩邊的子面板寬度小的時(shí)候问慎，布局就會(huì)亂掉。
4.margin負(fù)值法（雙飛翼法）
<div class="main-wrap">
<div class="main">#main</div>
</div>
<div class="sub"></div>
<div class="extra"></div>
.main-wrap {
float: left;
width: 100%;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
}
.main {
margin: 0 230px 0 190px;
}
主面板部分優(yōu)先渲染（一般主面板會(huì)比側(cè)欄內(nèi)容重要）挤茄。
圣杯采用的是padding如叼，而雙飛翼采用的margin，解決了圣杯布局main的最小寬度不能小于左側(cè)欄的缺點(diǎn)穷劈。
雙飛翼布局不用設(shè)置相對(duì)布局笼恰，以及對(duì)應(yīng)的left和right值。
