建站
咨詢
售后
建站咨詢
新聞中心
我們?cè)诰帉懢W(wǎng)頁代碼時(shí)，首先應(yīng)該做的就是設(shè)計(jì)好頁面的布局形式，然后再往里面填充內(nèi)容。網(wǎng)頁布局的好與壞，直接決定了網(wǎng)頁最終的展示效果。PC端常見的網(wǎng)頁布局形式有兩列布局、三列布局等。在CSS中，我們通常使用浮動(dòng)(float)、定位(position)、顯示模式(display)相關(guān)屬性結(jié)合使用，以達(dá)到預(yù)期效果。
成都創(chuàng)新互聯(lián)公司主營(yíng)天山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,App定制開發(fā),天山h5小程序設(shè)計(jì)搭建,天山網(wǎng)站營(yíng)銷推廣歡迎天山等地區(qū)企業(yè)咨詢
一 文檔流
文檔流就是HTML文檔內(nèi)所有元素按照一定規(guī)律排列并顯示的形式。
CSS文檔流大致可以分為3種：標(biāo)準(zhǔn)流，浮動(dòng)流，定位流。
1，標(biāo)準(zhǔn)流
默認(rèn)情況下，HTML元素都在標(biāo)準(zhǔn)流中呈現(xiàn)和展示。我們之前把元素分為塊級(jí)元素，行內(nèi)元素，行內(nèi)塊級(jí)元素，他們的特性是塊級(jí)獨(dú)占一行，行內(nèi)和行內(nèi)塊級(jí)可以在一行內(nèi)共存，這些特性都是針對(duì)標(biāo)準(zhǔn)流的?？偨Y(jié)一下就是，標(biāo)準(zhǔn)流中元素只能在水平或垂直方向上排版。如果元素是塊級(jí)元素, 那么就會(huì)垂直排版，如果元素是行內(nèi)元素/行內(nèi)塊級(jí)元素, 那么就會(huì)水平排版。
2，浮動(dòng)流
浮動(dòng)流只有一種排版方式, 就是水平排版。 它只能設(shè)置某個(gè)元素在父元素內(nèi)左對(duì)齊或者右對(duì)齊。設(shè)置了浮動(dòng)的元素，將脫離標(biāo)準(zhǔn)流，之后它將無視元素的display屬性，并且都被當(dāng)做塊級(jí)元素處理。
1 div{
2 float:left;/*規(guī)定元素向左浮動(dòng)*/
3 /*float:right;規(guī)定元素向右浮動(dòng)*/
4 }請(qǐng)注意，浮動(dòng)float屬性沒有center取值，并且，如果設(shè)置了浮動(dòng)屬性，那么你將不能通過使用margin:0 auto；屬性使元素居中。
3，定位流
標(biāo)準(zhǔn)流和浮動(dòng)流都只能在水平或垂直方向布局元素，但現(xiàn)實(shí)是，我們可能需要在上下左右?guī)讉€(gè)方向上同時(shí)偏移元素，定位流正是為了解決這一問題而設(shè)計(jì)的。通過設(shè)置元素的position屬性，可以讓元素處于定為流中，并通過left、right、top、bottom屬性設(shè)置元素具體的偏移量。
定為流分為四種：
a) static 靜態(tài)定位，實(shí)際上所有元素默認(rèn)都是靜態(tài)定位的，即處于標(biāo)準(zhǔn)流中。
b) relative 相對(duì)定位，元素保留在標(biāo)準(zhǔn)流中所占用的位置，但實(shí)際是邊框及以內(nèi)的部分將顯示在偏移之后的位置。即雖然元素已經(jīng)不再原來的位置了，但之前所占用的空間并不會(huì)被釋放給其他標(biāo)準(zhǔn)流中的元素。
c) absolute 絕對(duì)定位，元素脫離標(biāo)準(zhǔn)流，瀏覽器把它視作塊級(jí)元素，不論定位之前它是何種元素，其他元素也將無視它。絕對(duì)定位的偏移量是相對(duì)于其有定位屬性的第一個(gè)祖先元素的。
d) fixed 固定定位，固定定位和絕對(duì)定位相似，但它的偏移量固定的相對(duì)于瀏覽器窗口。
二 浮動(dòng)
當(dāng)某個(gè)元素浮動(dòng)之后，相當(dāng)于從標(biāo)準(zhǔn)流中刪除了該元素，標(biāo)準(zhǔn)流中的元素將會(huì)無視浮動(dòng)元素，并且可能被浮動(dòng)元素覆蓋。
當(dāng)有多個(gè)元素浮動(dòng)時(shí)，他們有以下特點(diǎn)：
a) 在相同方向上浮動(dòng)的元素，先浮動(dòng)的元素會(huì)顯示在前面。
1 .brother1{
2 float:left;
3 }
4 .brother2{
5 float:left;
6 }
7 /*brother1將顯示在brother2的左邊，如果都設(shè)置右浮動(dòng)，那么brother1將顯示在brother2的右邊*/b) 不同方向的浮動(dòng)元素，會(huì)盡量去尋找并貼靠前面和它浮動(dòng)方向相同的元素。如果前面沒有其他浮動(dòng)元素，那么它將緊貼其父元素的邊界。
1 .son1{
2 float:left;
3 }
4 .son2{
5 float:right;
6 }
7 .son3{
8 float:left;
9 }
10 /*son1和son3會(huì)在父元素的左側(cè)顯示，并且son3緊跟在son1的后面。son2則在父元素的右側(cè)顯示，緊貼父元素上*/c) 如果有未浮動(dòng)的兄弟元素，那么元素在浮動(dòng)之后，會(huì)根據(jù)它在標(biāo)準(zhǔn)流中的位置確定該在第幾行展示。
1 .brother1{
2 background-color:red;
3 float:left;
4 }
5 .brother2{
6 background-color:blue;
7 }
8 .brother3{
9 background-color:yellow;
10 float:left;
11 }
12 /*最終效果是：brother1和brother2在第一行顯示，但brother1蓋住了brother2，brother3單獨(dú)在第二行顯示*/浮動(dòng)元素還有一個(gè)特點(diǎn)：浮動(dòng)元素不會(huì)擋住沒有浮動(dòng)元素中的文字, 沒有浮動(dòng)的文字會(huì)自動(dòng)給浮動(dòng)的元素讓位置。這才是設(shè)計(jì)浮動(dòng)的初衷。
元素浮動(dòng)后會(huì)帶來兩個(gè)問題，第一個(gè)是造成父元素的高度塌陷，padding和margin無效。第二個(gè)是被其他元素?zé)o視，出現(xiàn)元素相互覆蓋的現(xiàn)象。那么要怎樣才能消除浮動(dòng)對(duì)其他元素的影響呢？我們通過下面的方式清除浮動(dòng)帶來的影響。
a) 為父元素設(shè)置固定的高度（解決問題一）。
1 father{
2 heigth:100px;
3 }
4 son{
5 float:left;
6 }b) 為父元素設(shè)置浮動(dòng)（解決問題一）。
1 father{
2 float:left;
3 }
4 son{
5 float:left;
6 }c) 設(shè)置clear屬性。clear屬性的功能是使浮動(dòng)元素不去尋找相鄰的其他浮動(dòng)元素，從而消除浮動(dòng)元素對(duì)其他元素的影響（解決問題二）。
1 father::after{
2 content:'';
3 display:block;
4 height:0;
5 clear:both;
6 }
7 /*俗稱隔墻法，根據(jù)需要也可以設(shè)置在浮動(dòng)元素自身或其父元素上*/
8 son{
9 float:left;
10 }d) 為父元素設(shè)置overflow:hidden;屬性（解決問題二）。
1 father{
2 overflow:hidden;
3 }
4 /*原理是觸發(fā)BFC機(jī)制*/
5 son{
6 float:left;
7 }三 定位
1，相對(duì)定位
通過給元素設(shè)置position:relative;屬性設(shè)置元素相對(duì)定位。
1 .box{
2 position:relative;
3 top:50px;
4 left:50px;
5 }
6 /*box元素將在原來的位置向下和向右偏移50px，請(qǐng)注意：在定位流中，同一個(gè)方向上的定位屬性只能使用一次*/請(qǐng)注意在瀏覽器中的坐標(biāo)系和一般坐標(biāo)系并不相同。如果不清楚請(qǐng)看《CSS基礎(chǔ)》第4.3節(jié)。
在相對(duì)定位中，實(shí)際上元素并未脫離標(biāo)準(zhǔn)流，所以瀏覽器還是會(huì)區(qū)分它是否是塊級(jí)或其他類型的元素。另外，設(shè)置元素的margin屬性，實(shí)際上margin區(qū)域會(huì)出現(xiàn)在元素定位之前的位置。
2，絕對(duì)定位
通過給元素設(shè)置position:absolute;屬性設(shè)置元素絕對(duì)定位。
1 .box{
2 position:absolute;
3 top:50px;
4 left:50px;
5 }
6 /*box元素將相對(duì)于父元素的左頂點(diǎn)（坐標(biāo)原點(diǎn)）向下向右偏移50px*/如果沒有設(shè)置偏移量，默認(rèn)top和left偏移量為0。如果元素所有祖先元素都沒有定位屬性，那么元素將相對(duì)body元素偏移。
在使用絕對(duì)定位時(shí)有兩個(gè)注意點(diǎn)：第一個(gè)是如果網(wǎng)頁寬高較大時(shí)（大于瀏覽器可視區(qū)寬高），并且元素最終相對(duì)于body定位了，實(shí)際上它只是相對(duì)瀏覽器首屏的寬高進(jìn)行偏移，而不是整個(gè)網(wǎng)頁的寬高。第二個(gè)是絕對(duì)定位的元素會(huì)自動(dòng)忽略有定位屬性的祖先元素的padding屬性。
絕對(duì)定位一般和相對(duì)定位配合使用，父元素設(shè)置相對(duì)定位，但不設(shè)置偏移量（默認(rèn)為0），子元素設(shè)置絕對(duì)定位，這樣就可以把子元素的偏移控制在父元素之內(nèi)。
1 .father{
2 position:relative;
3 }
4 .son{
5 position:absolute;
6 left:50px;
7 top:50px;
8 }
9 /*子元素相對(duì)父元素進(jìn)行偏移，二父元素不受影響*/3，固定定位
元素的固定定位和背景圖片的關(guān)聯(lián)性相似，可以控制元素是否隨著滾動(dòng)條滾動(dòng)。
1 div{
2 position:fixed;
3 top:100px;
4 left:50px;
5 } 固定定位的元素相對(duì)于瀏覽器視口偏移，和絕對(duì)定位的元素一樣，它會(huì)脫離標(biāo)準(zhǔn)文檔流，并且瀏覽器把他們一致視作塊級(jí)元素。
4，z-index屬性
默認(rèn)情況下，所有元素都有一個(gè)z-index屬性，用于定義它們的覆蓋關(guān)系。
1 div{
2 z-index:999;
3 }通常情況下，元素的z-index屬性值都是0，并且定位流中的元素會(huì)覆蓋標(biāo)準(zhǔn)流中的元素，同在定位流中的元素，寫在后面的會(huì)覆蓋寫在前面的元素。
在定為流中，如果你想調(diào)整它們的覆蓋關(guān)系，你可以設(shè)置它們的z-index屬性，并且誰的值越大，顯示優(yōu)先級(jí)越高。
需要注意的是，如果定位元素的父元素也設(shè)置了z-index屬性，那么子元素的z-index屬性將失效，并且最終是根據(jù)父元素的z-index屬性來判斷覆蓋關(guān)系。
四 居中與flex
1，水平居中
如果元素是文本、圖片等行內(nèi)元素，在父元素中設(shè)置text-align:center即可實(shí)現(xiàn)行內(nèi)元素水平居中，如果子元素是不定寬塊級(jí)元素，將子元素的display設(shè)置為inline-block，使子元素變成行內(nèi)元素，可以實(shí)現(xiàn)塊級(jí)元素的水平居中。
1 p{
2 text-align:center;
3 /*文本圖片等水平居中*/
4 }
5 .father{
6 text-align:center;
7 }
8 .son{
9 display:inlin-block;
10 /*不定寬塊級(jí)元素，修改顯示模式，利用text-align屬性使其居中*/
11 }如果子元素是定寬塊級(jí)元素，又不想改變顯示模式，那么可以通過設(shè)置margin屬性實(shí)現(xiàn)水平居中。
1 div{
2 width:500px;
3 height:300px;
4 margin:0 auto;
5 /auto，讓瀏覽器決定/
6 }
2，垂直居中
首先，如果父元素高度一定，子元素是文本或圖片等高度由內(nèi)容撐開的行內(nèi)元素，可以使用line-height屬性讓其垂直居中。
1 .father{
2 height:100px;
3 }
4 .son{
5 font-size:20px;
6 line-height:100px;
7 }如果子元素是不定高度的塊級(jí)元素，我們則可以通過給父元素設(shè)置display:table-cell；和vertical-align:middle；屬性來解決。
1 .father{
2 height:100px;
3 display:table-cell;
4 vertical-align:middle;
5 }
6 .son{
7 display:block;
8 height:?;
9 }
10 /*這樣實(shí)現(xiàn)垂直居中的原理是：使父元素以表格的形式呈現(xiàn)，再利用vertical-align屬性在表格中是設(shè)置單元格內(nèi)容垂直對(duì)齊方式的特性，從而達(dá)到塊級(jí)元素垂直居中的效果。*/需要注意的是：設(shè)置了dispaly:table-cell屬性后，元素將忽略margin值。并且，如果你還設(shè)置了絕對(duì)定位或浮動(dòng)，該屬性與功能將被破壞。
如果子元素是定高的，那么你只需簡(jiǎn)單的使用margin屬性，即可達(dá)到讓元素垂直居中的目的。
1 .father{
2 height:200px;
3 }
4 .son{
5 height:100px;
6 margin-top:50px
7 }3，水平垂直居中
通過上面的方式組合使用，即可達(dá)到元素水平垂直都居中的效果。
1 .father{
2 width:800px;
3 height:600px;
4 text-align:center;
5 }
6 .son{
7 width:600px;
8 heigth:400px;
9 margin:100px auto;
10 }或者使用絕對(duì)定位+相對(duì)定位。
1 .father{
2 width:600px;
3 height:800px;
4 position:relative;
5 }
6 .son{
7 width:400px;
8 height:600px;
9 position:absolute;
10 top:100px;
11 left:100px;
12 }
4，flex
flex即彈性布局，用來為盒狀模型提供最大的靈活性。需要注意的是，元素使用flex布局后，float，clear和vertical-align屬性將失效。flex是display(顯示模式)屬性的一個(gè)可選值，而不是position(定位)。
1 .box{
2 display:flex;
3 /*為塊級(jí)元素設(shè)置彈性布局*/
4 }
5 .inline-box{
6 display:inline-box;
7 /*為行內(nèi)元素設(shè)置彈性布局*/
8 }設(shè)置了彈性布局的盒子我們稱為彈性盒子（flex box），或者把它稱作容器（container）。如果把一個(gè)彈性盒子看成一個(gè)完整的工程（project），那么我們可以把彈性盒子內(nèi)部的元素看做是單個(gè)的模塊項(xiàng)目（module item），這些模塊都會(huì)遵守彈性盒子的規(guī)范，通過設(shè)置一些屬性，自動(dòng)的調(diào)整自身的大小以適應(yīng)彈性盒子中可用空間的變化。
彈性盒子中默認(rèn)有兩根軸線，水平方向的主軸，垂直方向的縱軸（交叉軸）。軸線與盒子邊框的交點(diǎn)是開始位置和結(jié)束位置。
容器屬性：
1 .box{
2 display:flex;
3 flex-direction:row;
4 /*該屬性決定主軸的方向，即項(xiàng)目排列的方向。row，默認(rèn)值，橫向從左至右；colum，縱向從上至下展示項(xiàng)；row-reverse和row方向相反，colum-reverse和colum方向相反*/
5 flex-wrap:nowrap;
6 /*該屬性定義如果一條軸線排不下，如何換行。nowrap，默認(rèn)值，不換行；wrap,換行*/
7 justify-content:flex-start;
8 /*該屬性定義項(xiàng)目在主軸上的對(duì)齊方式。flex-start，默認(rèn)值，開始對(duì)齊（例如上面設(shè)置了橫向從左至右排列項(xiàng)目，則這里表示左對(duì)齊，如果上面設(shè)置row-reverse，則這里表示右對(duì)齊），該屬性還有幾個(gè)可選值：flex-end，結(jié)束對(duì)齊；center，居中對(duì)齊；space-between，兩端對(duì)齊；space-around，項(xiàng)目間隔相等*/
9 align-items:stretch;
10 /*該屬性定義項(xiàng)目在交叉軸上的對(duì)齊方式。stretch，默認(rèn)值，如果項(xiàng)目沒有具體高度，將占滿整個(gè)容器；center，項(xiàng)目中線對(duì)齊；flex-start，開始對(duì)齊；flex-end，結(jié)束對(duì)齊；baseline，各項(xiàng)目的第一行文字基線對(duì)齊*/
11 }要想項(xiàng)目自動(dòng)的調(diào)整自身的大小以適應(yīng)彈性盒子中可用空間的變化，還需要依賴項(xiàng)目自身的一些屬性。
1 .item{
2 order:1;
3 /*設(shè)置項(xiàng)目排列的先后順序，數(shù)字越大越靠后，如果沒收設(shè)置，則誰寫在前面誰就排在前面。*/
4 flex-grow:1;
5 /*定義可以放大的比例，默認(rèn)是0，表示不放大，1表示放大1倍，2表示放大2倍，以此類推。如果所有項(xiàng)目都設(shè)置成相同數(shù)字，那么容器的可用空間會(huì)被項(xiàng)目等分。*/
6 flex-shrink:1；
7 /*定義可以縮小的比例，默認(rèn)是1，表示可以縮小1倍，2表示縮小2倍，以此類推。0表示不縮小。如果所有項(xiàng)目都設(shè)置成相同數(shù)字，那么容器的可用空間會(huì)被項(xiàng)目等分。*/
8 flex-basis:auto;
9 /*定義項(xiàng)目占用主軸的長(zhǎng)度，可以是width或height屬性一樣的值。比如百分比，px，em等。兩個(gè)特殊值：auto（默認(rèn)的）表示占用盒子本來的大??；0則表示只占項(xiàng)目?jī)?nèi)容區(qū)域的大?。ǎ?/
10 }縮放和尺寸可以使用縮寫形式。
1 .item{
2 flex:1 1 auto;
3 /*分別表示flex-grow,flex-shrink,flex-basis*/
4 }采用縮寫形式時(shí)需要注意，如果只有一個(gè)數(shù)字值，則代表flex-grow；如果只有一個(gè)寬度值（有單位的），則代表flex-basis；如果值有兩個(gè)值，那么第一個(gè)必須是數(shù)字，代表flex-grow，第二個(gè)可以是數(shù)字或?qū)挾龋直泶韋lex-shrink或flex-basis。
五 兩列布局
左側(cè)定寬右側(cè)自適應(yīng)寬度的兩列布局常用方式有下面幾種：
1，左邊脫離標(biāo)準(zhǔn)流，右邊使用margin屬性使其偏移
1 .left{
2 width:200px;
3 float:left;
4 /*
5 position:absolute;
6 left:0;
7 */
8 }
9 .right{
10 margin-left:200px
11 }2，calc()
1 .left{
2 width:200px;
3 display:inline-block;
4 }
5 .right{
6 display:inline-block;
7 width:calc(100% - 200px);
8 }
9 /*另一種形式是，左右均浮動(dòng)，然后利用calc()動(dòng)態(tài)計(jì)算右邊的寬度*/3，float+BFC
1 .left{
2 width:200px;
3 float:left;
4 }
5 .right{
6 overflow: auto;
7 }
8 /*左側(cè)浮動(dòng)，但是右側(cè)盒子通過overflow: auto;形成BFC，使右側(cè)盒子不會(huì)無視浮動(dòng)的元素*/4，flex
1 .wrap{
2 display:flex;
3 aligin:items:flex-start;
4 }
5 .left{
6 width:50px;
7 flex:0 0 auto;
8 }
9 .right{
10 flex:1 1 auto;
11 }六 三列布局
一般的3列布局要求是：中間自適應(yīng)寬度，左右兩邊定寬。滿足這種要求的布局我們一般有兩種方式，圣杯布局和雙飛翼布局。
1，圣杯布局
HTML部分：
1
2 center
3 left
4 right
5 CSS部分：
1 .wrap{
2 width: 50%;
3 height:400px;
4 margin:50px auto;
5 position: relative;
6 }
7 .wrap .center{
8 width: 100%;
9 height:400px;
10 float: left;
11 }
12 .wrap .left{
13 width:100px;
14 height: 400px;
15 float: left;
16 margin-left: -100%;
17 position: relative;
18 left:-100px;
19 }
20 .wrap .right{
21 height: 400px;
22 width:100px;
23 float: right;
24 margin-left: -100%;
25 position: relative;
26 right:-100px;
27 }原理：左中右三塊均設(shè)置浮動(dòng)，center寬度100%，left和right通過設(shè)置負(fù)margin值， 使其和center處于同一行，然后利用相對(duì)定位讓其分布于center的兩邊。
2，雙飛翼布局
HTML部分：
1
2
3
4
5 left
6 right
7 CSS部分：
1 .wrap{
2 width: 50%;
3 height:400px;
4 margin:50px auto;
5 }
6 .wrap .center{
7 width: 100%;
8 height:300px;
9 float: left;
10 }
11 .wrap .center .content{
12 margin:0 100px;
13 }
14 .wrap .left{
15 width: 100px;
16 height:300px;
17 float: left;
18 margin-left: -100%;
19 }
20 .wrap .right{
21 width: 100px;
22 height:300px;
23 float: right;
24 margin-left: -100%;
25 }原理：左中右三塊均設(shè)置浮動(dòng)，center寬度100%，left和right通過設(shè)置負(fù)margin值，使其和center處于同一行，此時(shí)left和right實(shí)際上遮住了部分center，所以center中的content需要設(shè)置margin。
圣杯布局和雙飛翼布局的區(qū)別：除了HTML代碼結(jié)構(gòu)不同外，圣杯布局的center寬度即為內(nèi)容區(qū)寬度，left和right靠在其兩邊。雙飛翼布局的center寬度等于內(nèi)容區(qū)寬度加left和right寬度。因?yàn)樗膌eft和right實(shí)際上占用（遮?。┝薱enter的空間，所以需要在center中新增一個(gè).content的div，并設(shè)置它的margin，以便空出left和right的位置。
圣杯布局和雙飛翼布局的好處是，center區(qū)域可以優(yōu)先于左右兩邊被瀏覽器渲染。不過現(xiàn)代瀏覽器普遍性能良好，這點(diǎn)優(yōu)先根本不易被用戶察覺到。
3，calc()
通過calc()函數(shù)我們也可以輕松滿足兩邊定寬，中間自適應(yīng)的要求。
HTML部分：
1
2 left
3 left
4 center
5 CSS部分：
1 .wrap{
2 width:80%;
3 margin: 0 auto;
4 background-color: #ccc;
5 /*position: relative;*/
6 }
7
8 .wrap .center{
9 background-color: blue;
10 margin-left:200px;
11 width:calc(100% - 400px);
12 }
13 .wrap .left{
14 background-color: red;
15 width:200px;
16 float:left;
17 /*position: absolute;
18 left: 0;
19 top:0;*/
20 }
21 .wrap .right{
22 background-color: yellow;
23 width:200px;
24 float:right;
25 /*position: absolute;
26 right: 0;
27 top:0;*/
28 }
29 /*通過浮動(dòng)和定位都可以實(shí)現(xiàn)兩邊固定的效果,需要注意的是，使用浮動(dòng)需要把center區(qū)域放到left和right之后，原因請(qǐng)往上看浮動(dòng)的第三個(gè)特征*/4，flex布局
HTML部分同calc()。
CSS部分：
1 .wrap{
2 width:80%;
3 margin: 0 auto;
4 background-color: #ccc;
5 display: flex;
6 flex-direction: row;
7 flex-wrap: nowrap;
8 }
9
10 .center{
11 background-color: blue;
12 flex:1 0 auto;
13 order:1;
14 }
15 .left{
16 background-color: red;
17 width:200px;
18 flex:0 0 auto;
19 order:0;
20 }
21 .right{
22 background-color: yellow;
23 width:200px;
24 flex:0 0 auto;
25 order:2;
26 }網(wǎng)頁標(biāo)題：CSS定位與布局
瀏覽地址：http://fisionsoft.com.cn/article/gcphdh.html
