我們在編寫網(wǎng)頁代碼時，首先應(yīng)該做的就是設(shè)計好頁面的布局形式，然后再往里面填充內(nèi)容。網(wǎng)頁布局的好與壞，直接決定了網(wǎng)頁最終的展示效果。這里總結(jié)一下 WEB前端CSS部分的定位問題，同時這些問題也是對一些基礎(chǔ)的技術(shù)概念和思想的理解。對這些基本知識的掌握程度和深度決定了你的技術(shù)層級。

文檔流

文檔流就是HTML文檔內(nèi)所有元素按照一定規(guī)律排列并顯示的形式。

CSS文檔流大致可以分為3種：標(biāo)準(zhǔn)流，浮動流，定位流。

1，標(biāo)準(zhǔn)流

默認(rèn)情況下，HTML元素都在標(biāo)準(zhǔn)流中呈現(xiàn)和展示。我們之前把元素分為塊級元素，行內(nèi)元素，行內(nèi)塊級元素，他們的特性是塊級獨占一行，行內(nèi)和行內(nèi)塊級可以在一行內(nèi)共存，這些特性都是針對標(biāo)準(zhǔn)流的。總結(jié)一下就是，標(biāo)準(zhǔn)流中元素只能在水平或垂直方向上排版。如果元素是塊級元素, 那么就會垂直排版，如果元素是行內(nèi)元素/行內(nèi)塊級元素, 那么就會水平排版。

2，浮動流

浮動流只有一種排版方式, 就是水平排版。它只能設(shè)置某個元素在父元素內(nèi)左對齊或者右對齊。設(shè)置了浮動的元素，將脫離標(biāo)準(zhǔn)流，之后它將無視元素的display屬性，并且都被當(dāng)做塊級元素處理。

div{float:left;/*規(guī)定元素向左浮動*/ /*float:right;規(guī)定元素向右浮動*/ }

請注意，浮動float屬性沒有center取值，并且，如果設(shè)置了浮動屬性，那么你將不能通過使用margin:0 auto；屬性使元素居中。

3，定位流

標(biāo)準(zhǔn)流和浮動流都只能在水平或垂直方向布局元素，但現(xiàn)實是，我們可能需要在上下左右?guī)讉€方向上同時偏移元素，定位流正是為了解決這一問題而設(shè)計的。通過設(shè)置元素的position屬性，可以讓元素處于定位流中，并通過left、right、top、bottom屬性設(shè)置元素具體的偏移量。

定位流分為四種：

a) static 靜態(tài)定位，實際上所有元素默認(rèn)都是靜態(tài)定位的，即處于標(biāo)準(zhǔn)流中。

b) relative 相對定位，元素保留在標(biāo)準(zhǔn)流中所占用的位置，但實際是邊框及以內(nèi)的部分將顯示在偏移之后的位置。即雖然元素已經(jīng)不再原來的位置了，但之前所占用的空間并不會被釋放給其他標(biāo)準(zhǔn)流中的元素。

c) absolute 絕對定位，元素脫離標(biāo)準(zhǔn)流，瀏覽器把它視作塊級元素，不論定位之前它是何種元素，其他元素也將無視它。絕對定位的偏移量是相對于其有定位屬性的第一個祖先元素的。

d) fixed 固定定位，固定定位和絕對定位相似，但它的偏移量固定的相對于瀏覽器窗口。

浮動

當(dāng)某個元素浮動之后，相當(dāng)于從標(biāo)準(zhǔn)流中刪除了該元素，標(biāo)準(zhǔn)流中的元素將會無視浮動元素，并且可能被浮動元素覆蓋。

當(dāng)有多個元素浮動時，他們有以下特點：

a) 在相同方向上浮動的元素，先浮動的元素會顯示在前面。

.brother1{ float:left;?} .brother2{float:left;}/*brother1將顯示在brother2的左邊，如果都設(shè)置右浮動，那么brother1將顯示在brother2的右邊*/

b) 不同方向的浮動元素，會盡量去尋找并貼靠前面和它浮動方向相同的元素。如果前面沒有其他浮動元素，那么它將緊貼其父元素的邊界。

.son1{float:left;} .son2{ float:right; } .son3{float:left;} /*son1和son3會在父元素的左側(cè)顯示，并且son3緊跟在son1的后面。son2則在父元素的右側(cè)顯示，緊貼父元素上*/

c) 如果有未浮動的兄弟元素，那么元素在浮動之后，會根據(jù)它在標(biāo)準(zhǔn)流中的位置確定該在第幾行展示。

.brother1{???background-color:red;??float:left;?}.brother2{????background-color:blue;?}?.brother3{???background-color:yellow;???float:left; } /*最終效果是：brother1和brother2在第一行顯示，但brother1蓋住了brother2，brother3單獨在第二行顯示*/

浮動元素還有一個特點：浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置。這才是設(shè)計浮動的初衷。

元素浮動后會帶來兩個問題，第一個是造成父元素的高度塌陷，padding和margin無效。第二個是被其他元素?zé)o視，出現(xiàn)元素相互覆蓋的現(xiàn)象。那么要怎樣才能消除浮動對其他元素的影響呢？我們通過下面的方式清除浮動帶來的影響。

a) 為父元素設(shè)置固定的高度(解決問題一)。

father{?heigth:100px;?}?son{??float:left;}

b) 為父元素設(shè)置浮動(解決問題一)。

father{????float:left;}?son{????float:left; }

c) 設(shè)置clear屬性。clear屬性的功能是使浮動元素不去尋找相鄰的其他浮動元素，從而消除浮動元素對其他元素的影響(解決問題二)。

father::after{content:'';display:block;height:0;clear:both; } ?/*俗稱隔墻法，根據(jù)需要也可以設(shè)置在浮動元素自身或其父元素上*/ ?son{??float:left;??}

d) 為父元素設(shè)置overflow:hidden;屬性(解決問題二)。

father{ overflow:hidden;} /*原理是觸發(fā)BFC機(jī)制*/son{ float:left; }

定位

1，相對定位

通過給元素設(shè)置position:relative;屬性設(shè)置元素相對定位。

.box{ position:relative; top:50px; left:50px; } /*box元素將在原來的位置向下和向右偏移50px，請注意：在定位流中，同一個方向上的定位屬性只能使用一次*/

請注意在瀏覽器中的坐標(biāo)系和一般坐標(biāo)系并不相同。

在相對定位中，實際上元素并未脫離標(biāo)準(zhǔn)流，所以瀏覽器還是會區(qū)分它是否是塊級或其他類型的元素。另外，設(shè)置元素的margin屬性，實際上margin區(qū)域會出現(xiàn)在元素定位之前的位置。

2，絕對定位

通過給元素設(shè)置position:absolute;屬性設(shè)置元素絕對定位。

.box{position:absolute;top:50px;left:50px;?}/*box元素將相對于父元素的左頂點(坐標(biāo)原點)向下向右偏移50px*/

如果沒有設(shè)置偏移量，默認(rèn)top和left偏移量為0。如果元素所有祖先元素都沒有定位屬性，那么元素將相對body元素偏移。

在使用絕對定位時有兩個注意點：第一個是如果網(wǎng)頁寬高較大時(大于瀏覽器可視區(qū)寬高)，并且元素最終相對于body定位了，實際上它只是相對瀏覽器首屏的寬高進(jìn)行偏移，而不是整個網(wǎng)頁的寬高。第二個是絕對定位的元素會自動忽略有定位屬性的祖先元素的padding屬性。

絕對定位一般和相對定位配合使用，父元素設(shè)置相對定位，但不設(shè)置偏移量(默認(rèn)為0)，子元素設(shè)置絕對定位，這樣就可以把子元素的偏移控制在父元素之內(nèi)。

.father{ position:relative;}.son{ position:absolute; left:50px; top:50px;}/*子元素相對父元素進(jìn)行偏移，二父元素不受影響*/

3，固定定位

元素的固定定位和背景圖片的關(guān)聯(lián)性相似，可以控制元素是否隨著滾動條滾動。

div{position:fixed;top:100px;left:50px;}

固定定位的元素相對于瀏覽器視口偏移，和絕對定位的元素一樣，它會脫離標(biāo)準(zhǔn)文檔流，并且瀏覽器把他們一致視作塊級元素。

4，z-index屬性

默認(rèn)情況下，所有元素都有一個z-index屬性，用于定義它們的覆蓋關(guān)系。

div{z-index:999;}/*Z-Index 只在設(shè)置了 position 屬性(非 static)的元素上生效；父元素的 Z-Index 比子元素先生效；*/

通常情況下，元素的z-index屬性值都是0，并且定位流中的元素會覆蓋標(biāo)準(zhǔn)流中的元素，同在定位流中的元素，寫在后面的會覆蓋寫在前面的元素。

在定位流中，如果你想調(diào)整它們的覆蓋關(guān)系，你可以設(shè)置它們的z-index屬性，并且誰的值越大，顯示優(yōu)先級越高。

需要注意的是，如果定位元素的父元素也設(shè)置了z-index屬性，那么子元素的z-index屬性將失效，并且最終是根據(jù)父元素的z-index屬性來判斷覆蓋關(guān)系。

居中與flex

1，水平居中

如果元素是文本、圖片等行內(nèi)元素，在父元素中設(shè)置text-align:center即可實現(xiàn)行內(nèi)元素水平居中，如果子元素是不定寬塊級元素，將子元素的display設(shè)置為inline-block，使子元素變成行內(nèi)元素，可以實現(xiàn)塊級元素的水平居中。

p{ text-align:center; /*文本圖片等水平居中*/}.father{ text-align:center;}.son{ display:inlin-block; /*不定寬塊級元素，修改顯示模式，利用text-align屬性使其居中*/}

如果子元素是定寬塊級元素，又不想改變顯示模式，那么可以通過設(shè)置margin屬性實現(xiàn)水平居中。

div{ width:500px; height:300px; margin:0 auto; /*auto，讓瀏覽器決定*/}

2，垂直居中

首先，如果父元素高度一定，子元素是文本或圖片等高度由內(nèi)容撐開的行內(nèi)元素，可以使用line-height屬性讓其垂直居中。

.father{ height:100px;}.son{ font-size:20px; line-height:100px;}

如果子元素是不定高度的塊級元素，我們則可以通過給父元素設(shè)置display:table-cell；和vertical-align:middle；屬性來解決。

.father{ height:100px; display:table-cell; vertical-align:middle;}.son{ display:block; height:?;}/*這樣實現(xiàn)垂直居中的原理是：使父元素以表格的形式呈現(xiàn)，再利用vertical-align屬性在表格中是設(shè)置單元格內(nèi)容垂直對齊方式的特性，從而達(dá)到塊級元素垂直居中的效果。*/

需要注意的是：設(shè)置了dispaly:table-cell屬性后，元素將忽略margin值。并且，如果你還設(shè)置了絕對定位或浮動，該屬性功能將被破壞。

如果子元素是定高的，那么你只需簡單的使用margin屬性，即可達(dá)到讓元素垂直居中的目的。

.father{ height:200px;}.son{ height:100px; margin-top:50px

3，水平垂直居中

通過上面的方式組合使用，即可達(dá)到元素水平垂直都居中的效果。

.father{ width:800px; height:600px; text-align:center;}.son{ width:600px; heigth:400px; margin:100px auto;}

或者使用絕對定位+相對定位。

.father{ width:600px; height:800px; position:relative;}.son{ width:400px; height:600px; position:absolute; top:100px; left:100px;}

4，flex

flex即彈性布局，用來為盒狀模型提供最大的靈活性。需要注意的是，元素使用flex布局后，float，clear和vertical-align屬性將失效。flex是display(顯示模式)屬性的一個可選值，而不是position(定位)。

.box{ display:flex; /*為塊級元素設(shè)置彈性布局*/}.inline-box{ display:inline-box; /*為行內(nèi)元素設(shè)置彈性布局*/}

設(shè)置了彈性布局的盒子我們稱為彈性盒子(flex box)，或者把它稱作容器(container)。如果把一個彈性盒子看成一個完整的工程(project)，那么我們可以把彈性盒子內(nèi)部的元素看做是單個的模塊項目(module item)，這些模塊都會遵守彈性盒子的規(guī)范，通過設(shè)置一些屬性，自動的調(diào)整自身的大小以適應(yīng)彈性盒子中可用空間的變化。

彈性盒子中默認(rèn)有兩根軸線，水平方向的主軸，垂直方向的縱軸(交叉軸)。軸線與盒子邊框的交點是開始位置和結(jié)束位置。

容器屬性：

.box{ display:flex; flex-direction:row; /*該屬性決定主軸的方向，即項目排列的方向。row，默認(rèn)值，橫向從左至右；colum，縱向從上至下展示項；row-reverse和row方向相反，colum-reverse和colum方向相反*/ flex-wrap:nowrap; /*該屬性定義如果一條軸線排不下，如何換行。nowrap，默認(rèn)值，不換行；wrap,換行*/ justify-content:flex-start; /*該屬性定義項目在主軸上的對齊方式。flex-start，默認(rèn)值，開始對齊(例如上面設(shè)置了橫向從左至右排列項目，則這里表示左對齊，如果上面設(shè)置row-reverse，則這里表示右對齊)，該屬性還有幾個可選值：flex-end，結(jié)束對齊；center，居中對齊；space-between，兩端對齊；space-around，項目間隔相等*/ align-items:stretch; /*該屬性定義項目在交叉軸上的對齊方式。stretch，默認(rèn)值，如果項目沒有具體高度，將占滿整個容器；center，項目中線對齊；flex-start，開始對齊；flex-end，結(jié)束對齊；baseline，各項目的第一行文字基線對齊*/}

要想項目自動的調(diào)整自身的大小以適應(yīng)彈性盒子中可用空間的變化，還需要依賴項目自身的一些屬性。

.item{ order:1; /*設(shè)置項目排列的先后順序，數(shù)字越大越靠后，如果沒收設(shè)置，則誰寫在前面誰就排在前面。*/ flex-grow:1; /*定義可以放大的比例，默認(rèn)是0，表示不放大，1表示放大1倍，2表示放大2倍，以此類推。如果所有項目都設(shè)置成相同數(shù)字，那么容器的可用空間會被項目等分。*/ flex-shrink:1； /*定義可以縮小的比例，默認(rèn)是1，表示可以縮小1倍，2表示縮小2倍，以此類推。0表示不縮小。如果所有項目都設(shè)置成相同數(shù)字，那么容器的可用空間會被項目等分。*/ flex-basis:auto; /*定義項目占用主軸的長度，可以是width或height屬性一樣的值。比如百分比，px，em等。兩個特殊值：auto(默認(rèn)的)表示占用盒子本來的大小；0則表示只占項目內(nèi)容區(qū)域的大小()*/}

縮放和尺寸可以使用縮寫形式。

.item{flex:1 1 auto;/*分別表示flex-grow,flex-shrink,flex-basis*/ }

采用縮寫形式時需要注意，如果只有一個數(shù)字值，則代表flex-grow；如果只有一個寬度值(有單位的)，則代表flex-basis；如果值有兩個值，那么第一個必須是數(shù)字，代表flex-grow，第二個可以是數(shù)字或?qū)挾?#xff0c;分表代表flex-shrink或flex-basis。

兩列布局

左側(cè)定寬右側(cè)自適應(yīng)寬度的兩列布局常用方式有下面幾種：

1，左邊脫離標(biāo)準(zhǔn)流，右邊使用margin屬性使其偏移

.left{ width:200px; float:left; /* position:absolute; left:0; */}.right{ margin-left:200px}

2，calc()

.left{ width:200px; display:inline-block;}.right{ display:inline-block; width:calc(100% - 200px);}/*另一種形式是，左右均浮動，然后利用calc()動態(tài)計算右邊的寬度*/

3，float+BFC

.left{ width:200px; float:left;}.right{ overflow: auto;}/*左側(cè)浮動，但是右側(cè)盒子通過overflow: auto;形成BFC，使右側(cè)盒子不會無視浮動的元素*/

4，flex

.wrap{ display:flex; aligin:items:flex-start;}.left{ width:50px; flex:0 0 auto;}.right{ flex:1 1 auto;}

三列布局

一般的3列布局要求是：中間自適應(yīng)寬度，左右兩邊定寬。滿足這種要求的布局我們一般有兩種方式，圣杯布局和雙飛翼布局。

1，圣杯布局

HTML部分：

class='wrap'>class="center">centerclass="left">leftclass="right">right

CSS部分：

.wrap{ width: 50%; height:400px; margin:50px auto; position: relative;}.wrap .center{ width: 100%; height:400px; float: left;}.wrap .left{ width:100px; height: 400px; float: left; margin-left: -100%; position: relative; left:-100px;}.wrap .right{ height: 400px; width:100px; float: right; margin-left: -100%; position: relative; right:-100px;}

原理：左中右三塊均設(shè)置浮動，center寬度100%，left和right通過設(shè)置負(fù)margin值， 使其和center處于同一行，然后利用相對定位讓其分布于center的兩邊。

2，雙飛翼布局

HTML部分：

class='wrap'>class="center">class="content">class="left">leftclass="right">right

CSS部分：

.wrap{ width: 50%; height:400px; margin:50px auto;}.wrap .center{ width: 100%; height:300px; float: left;}.wrap .center .content{ margin:0 100px;}.wrap .left{ width: 100px; height:300px; float: left; margin-left: -100%;}.wrap .right{ width: 100px; height:300px; float: right; margin-left: -100%;}

原理：左中右三塊均設(shè)置浮動，center寬度100%，left和right通過設(shè)置負(fù)margin值，使其和center處于同一行，此時left和right實際上遮住了部分center，所以center中的content需要設(shè)置margin。

圣杯布局和雙飛翼布局的區(qū)別：除了HTML代碼結(jié)構(gòu)不同外，圣杯布局的center寬度即為內(nèi)容區(qū)寬度，left和right靠在其兩邊。雙飛翼布局的center寬度等于內(nèi)容區(qū)寬度加left和right寬度。因為它的left和right實際上占用(遮住)了center的空間，所以需要在center中新增一個.content的div，并設(shè)置它的margin，以便空出left和right的位置。

圣杯布局和雙飛翼布局的好處是，center區(qū)域可以優(yōu)先于左右兩邊被瀏覽器渲染。不過現(xiàn)代瀏覽器普遍性能良好，這點優(yōu)先根本不易被用戶察覺到。

3，calc()

通過calc()函數(shù)我們也可以輕松滿足兩邊定寬，中間自適應(yīng)的要求。

HTML部分：

class="wrap">class="left">leftclass="right">leftclass="center">center

CSS部分：

.wrap{ width:80%; margin: 0 auto; background-color: #ccc; /*position: relative;*/ } .wrap .center{ background-color: blue; margin-left:200px; width:calc(100% - 400px);}.wrap .left{ background-color: red; width:200px; float:left; /*position: absolute; left: 0; top:0;*/}.wrap .right{ background-color: yellow; width:200px; float:right; /*position: absolute; right: 0; top:0;*/}/*通過浮動和定位都可以實現(xiàn)兩邊固定的效果,需要注意的是，使用浮動需要把center區(qū)域放到left和right之后，原因請往上看浮動的第三個特征*/

4，flex布局

HTML部分同calc()。

CSS部分：

.wrap{ width:80%; margin: 0 auto; background-color: #ccc; display: flex; flex-direction: row; flex-wrap: nowrap;}.center{ background-color: blue; flex:1 0 auto; order:1;}.left{ background-color: red; width:200px; flex:0 0 auto; order:0;}.right{ background-color: yellow; width:200px; flex:0 0 auto; order:2;}

----- CSS小知識點 -----

用純 CSS 創(chuàng)建一個三角形的原理是什么？

border-top:solid 100px red;border-left:solid 100px green;border-right:solid 100px orange;border-bottom:solid 100px blue;width: 0;height: 0;

彈性布局

彈性父容器：display:flex;

彈性元素：父容器的直接子元素，并且沒有脫離文檔流(非 absolute 屬性)。

指定彈性容器內(nèi)元素排列方向：flex-direction:row | row-reverse | column | column-reverse

指定彈性容器內(nèi)元素?fù)Q行方式：flex-wrap:no-wrap | wrap | wrap-reverse

指定彈性容器內(nèi)元素排隊和換行方式：flex-flow:

指定彈性元素的排列權(quán)重(重的在后邊)：order:

設(shè)置元素空余空間分配權(quán)重：flex-grow:

設(shè)置元素超出分配空間權(quán)重：flex-shrink:

設(shè)置元素在主軸方向的基礎(chǔ)長度：flex-basis:

設(shè)置元素在主軸方向的彈性：flex:

指定彈性容器內(nèi)元素的間隔方式：justify-content:flex-start | flex-end | center | space-between | space-arount

指定彈性容器內(nèi)元素輔軸對齊方式：align-items:flex-start | flex-end | center | stretch | baseline

設(shè)置元素在主軸方向的對齊方式：align-self:flex-start | flex-end | center | stretch | baseline

指定彈性容器內(nèi)元素的輔軸上行的對齊方式：align-content:flex-start | flex-end | center | space-between | space-arount | stretch

您可能感興趣：

【前端小白進(jìn)階】CSS生成工具，網(wǎng)頁提示箭頭

前端開發(fā)常用css動畫代碼(自己收藏用)

基于CSS3白色質(zhì)感3D按鈕特效源碼

css3剪裁GIF背景圖片動畫源碼庫

【UI特效】CSS3圖片模糊切換效果

前端開發(fā)，CSS3動畫代碼高頻知識點

總結(jié)

以上是生活随笔為你收集整理的使用绝对定位时浏览器大小改变排版会乱_HTML amp; CSS页面布局之定位的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。