高級布局

Kylin_Mountain 發(fā)布于2019-04-23 13:20 / 3536人閱讀

摘要：不完全脫離文檔流浮動后的結(jié)果當(dāng)目標(biāo)標(biāo)簽的內(nèi)部有浮動的子級，目標(biāo)標(biāo)簽的兄弟標(biāo)簽的布局會出現(xiàn)顯示異常在不做清浮動的情況下，父級不會獲取子級的高度。

一、文檔流(normal flow)

1.概念

將窗體自上而下分成一行一行，塊級元素從上至下，行內(nèi)元素在每行中從左至右順序排放元素

本質(zhì)為normal flow(普通流，常規(guī)流)，文檔流就是一個連續(xù)具有邏輯上下的頁面整體，也可以片面的說，出現(xiàn)在頁面中的顯示內(nèi)容都可以理解為在文檔流中。

2.BFC(Block formatting context)

塊級格式化上下文，它是一個獨(dú)立的渲染區(qū)域，只有Block-level box參與，它規(guī)定了內(nèi)部的Block-level box如何布局，并且這個區(qū)域與外部毫不相干。

3.BFC規(guī)則

內(nèi)部的Box會在垂直方向，一個接一個的放置
根據(jù)BFC布局方向，Box自身的水平方向位置，由margin左或右控制，相鄰Box的margin會疊加
Box的垂直位置，由margin-top控制位置，相鄰Box會發(fā)生重疊(margin塌陷)
同一容器(區(qū)域)中，box相互影響，不對對區(qū)域外產(chǎn)生影響。

二、浮動布局

1.目的

讓block同行顯示(1.在父級規(guī)定的寬度中，2.不完全脫離文檔流)

2.基本語法

float:left | right

float：left--->設(shè)置BFC橫向布局規(guī)則為從左至右，且block box同行顯示之間沒有間隔
float：right--->BFC規(guī)則為從右至左，且block box同行顯示之間沒有間隔

3.浮動布局實例

.box{
    width: 1000px;
    margin: 0 auto;
}
div div{
    font: 900 30px/100px "STSong";
    text-align: center;
    width: 200px;
    height: 100px;
    background-color: green;
    float: left;
    color: white;
}
.b6{
    width: 600px;
    background-color: yellow;
}
.b7{
    width: 400px;
    height: 200px;
    background-color: yellowgreen;
    float: right;
}
.b8{
    width: 300px;
    height: 150px;
    background-color: brown;
    float: left;
}
.b9{
    width: 300px;
    height: 150px;
    background-color: black;
    float: left;
}
.b10{
    width: 400px;
    height: 150px;
    background-color: cyan;
    float: right;
}
.b11{
    width: 600px;

    background-color: red;
    float: left;
}
.b12{
    width: 1000px;
    background-color: blue;
}

效果圖：

4.浮動布局的問題

通常文檔流中，子標(biāo)簽在父級標(biāo)簽未設(shè)置高度的情況下，會撐開父級的高度，父級的高度決定于邏輯最后位置的子級的低端。

脫離文檔流后的子級標(biāo)簽，不再撐開父級高度。

不完全脫離文檔流(浮動后的結(jié)果)：當(dāng)目標(biāo)標(biāo)簽的內(nèi)部有浮動的子級，目標(biāo)標(biāo)簽的兄弟標(biāo)簽的布局會出現(xiàn)顯示異常！在不做清浮動的情況下，父級不會獲取子級的高度。

5.清浮動

清浮動的對象：擁有浮動子級的父級

這里只介紹四種清浮動的方法

1.浮動的父級設(shè)置高度
super {
    height: npx;
}
2.浮動的父級設(shè)置overflow
super {
    overflow: hidden;
}
3.浮動的父級兄弟設(shè)置clear
brother {
    clear: left | right | both;
}
4.浮動的父級偽類清浮動
super:after {
    content: "";
    display: block;
    clear: left | right | both;
}

原理：在浮動布局的情況下，讓父級獲得合適的高度。

三、流式布局

1.目的

讓布局脫離固定值限制，可以根據(jù)頁面情況的改變發(fā)生相應(yīng)的變化

2.相關(guān)設(shè)置

百分比設(shè)置 %  參考為最近的父級
窗口設(shè)置 vw | vh    50vw代表占據(jù)窗口寬度50%
字體控制 em rem     em為最近設(shè)置字體大小的父級規(guī)定的字體大小 rem為html字體大小

四、定位布局

可以根據(jù)需求給相應(yīng)的塊設(shè)定相應(yīng)設(shè)置。

1.語法

position屬性指定一個元素的定位類型

值	描述
relative	相對定位
absolute	絕對定位
fixed	固定定位
static	默認(rèn)，沒有定位

設(shè)置完定位類型就可以設(shè)置top,bottom,left,right四個屬性進(jìn)行布局。，如果同時設(shè)置了top和bottom，top生效，同時設(shè)置了left和right，left生效。簡單說就是 左右取左，上下取上

2.相對定位

未脫離文檔流
以自身原有位置作為參考坐標(biāo)系
方位布局只改變盒子顯示區(qū)域，不會改變盒子原有位置(相當(dāng)于靈魂出竅)
left=-right，top=-bottom。

優(yōu)點(diǎn)：父級不會脫離文檔流，滿足所有的盒模型布局

3.絕對定位

完全脫離文檔流，不在文檔流中占位，不會撐開父級高度，不會影響兄弟布局，顯示層也永遠(yuǎn)高于文檔流
以最近定位父級作為參考坐標(biāo)系，沒有就找html

優(yōu)點(diǎn)：如果自身已經(jīng)采用絕對定位布局，那么子級一定參考自身進(jìn)行定位。

注：如果父級只是輔助子級進(jìn)行絕對定位,那么一定優(yōu)選相對定位,因為絕對定位會產(chǎn)生新的BFC,導(dǎo)致盒模型布局會受影響

4.固定定位

完全脫離文檔流
參考系為文檔窗口，不隨頁面滾動而改變位置

5.z-index

脫離文檔流的標(biāo)簽，具有z-index屬性，可以用來控制顯示層次的優(yōu)先級，值為任意正整數(shù)

五、Flex布局

1.概念

Flex是Flexible Box的縮寫，意為“彈性布局”，用來為盒狀模型提供最大靈活性。

采用Flex布局的元素，稱為Flex容器(flex container)，簡稱“容器”。它的所有子元素自動成為容器成員，稱為flex項目(flex item),簡稱“項目”。
水平為主軸(main axis),主軸開始的位置叫做main start，結(jié)束位置叫做main end。
垂直為交叉軸(cross axis),交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end
項目默認(rèn)沿主軸排列。單個項目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size

2.容器屬性

1.flex-direction屬性 決定主軸的方向(即項目的排列方向)
flex-direction: row | row-reverse | column | column-reverse;
-- row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
-- row-reverse：主軸為水平方向，起點(diǎn)在右端。
-- column：主軸為垂直方向，起點(diǎn)在上沿。
-- column-reverse：主軸為垂直方向，起點(diǎn)在下沿。

2.flex-wrap屬性 定義一條軸線排不下的情況下如何換行
flex-wrap: nowrap | wrap | wrap-reverse;
-- nowrap（默認(rèn)）：不換行。
-- wrap：換行，第一行在上方。
-- wrap-reverse：換行，第一行在下方。

3.flex-flow屬性 是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)為row nowrap
flex-flow:  ;

4.justify-content屬性 定義了項目在主軸上的對齊方式。
justify-content: flex-start | flex-end | center | space-between | space-around;

5.align-items屬性 定義項目在交叉軸上如何對齊
align-items: flex-start | flex-end | center | baseline | stretch;

6.align-content屬性 定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

3.項目屬性

1.order 屬性 定義項目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
order: ;

2.flex-grow 屬性 定義項目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
flex-grow: ; /* default 0 */

3.flex-shrink 屬性 定義了項目的縮小比例，默認(rèn)為1，即如果空間不足，該項目將縮小。
flex-shrink: ; /* default 1 */

4.flex-basis 屬性 定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。
flex-basis:  | auto; /* default auto */

5.flex 屬性 是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個屬性可選。
flex:   

6.align-self 屬性 允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;

六、響應(yīng)式布局

1.概念

響應(yīng)式布局就是一個網(wǎng)站能夠兼容多個終端。

原則：采用響應(yīng)式布局的樣式塊，基本樣式塊只做共性設(shè)置，需要根據(jù)頁面尺寸進(jìn)行適應(yīng)變化的樣式均有響應(yīng)式布局處理

2.頁面寬度

小于寬度

@media only screen and (max-width: ) {
    selector {
        
    }
}

大于寬度小于寬度

@media only screen and (min-width: ) and (max-width: ) {
    selector {
        
    }
}

大于寬度

@media only screen and (min-width: ) {
    selector {
        
    }
}

3.注

在響應(yīng)式布局內(nèi)，css語法同正常樣式表語法一樣
響應(yīng)式布局之間存在不同屏幕尺寸的限制，使用樣式相互不影響。滿足當(dāng)前屏幕尺寸時，該樣式塊起作用，不滿足時則失效
當(dāng)響應(yīng)式布局中樣式快起作用時，會與正常樣式快設(shè)置一起協(xié)同布局，遵循選擇器的優(yōu)先級規(guī)則

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1749.html

發(fā)表評論

登陸后可評論

0條評論

Kylin_Mountain

男|高級講師

我要關(guān)注我要私信

TA的文章

linux系統(tǒng)之centos7系統(tǒng)重啟/查看/自動啟動SSH等操作命令

閱讀 2410·2021-09-26 10:21
一起用Python做個自動化彈鋼琴腳本，我竟然彈出了《天空之城》！

閱讀 2923·2021-09-08 09:36
vue+elementUi 實現(xiàn)密碼顯示/隱藏+小圖標(biāo)變化（js一共三行代碼，其中一行為了美觀）

閱讀 3130·2019-08-30 15:56
FlexBox彈性盒子計算規(guī)則

閱讀 1019·2019-08-30 12:57
小而美的顏色選擇器：xy-color-picker

閱讀 1015·2019-08-26 10:39
POST 請求的三種常見數(shù)據(jù)提交格式

閱讀 3620·2019-08-23 18:11
3d中獲取對象包圍盒位置的常用方法

閱讀 3166·2019-08-23 17:12
騰訊地圖WebService API 和 CORB誤會

閱讀 1214·2019-08-23 12:18

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

高級布局

一、文檔流(normal flow)

1.概念

2.BFC(Block formatting context)

3.BFC規(guī)則

二、浮動布局

1.目的

2.基本語法

3.浮動布局實例

4.浮動布局的問題

5.清浮動

三、流式布局

1.目的

2.相關(guān)設(shè)置

四、定位布局

1.語法

2.相對定位

3.絕對定位

4.固定定位

5.z-index

五、Flex布局

1.概念

2.容器屬性

3.項目屬性

六、響應(yīng)式布局

1.概念

2.頁面寬度

3.注

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

一、文檔流(normal flow)

三、流式布局

五、Flex布局

六、響應(yīng)式布局