高級(jí)布局

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

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

一、文檔流(normal flow)

1.概念

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

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

2.BFC(Block formatting context)

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

3.BFC規(guī)則

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

二、浮動(dòng)布局

1.目的

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

2.基本語(yǔ)法

float:left | right

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

3.浮動(dòng)布局實(shí)例

.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.浮動(dòng)布局的問(wèn)題

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

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

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

5.清浮動(dòng)

清浮動(dòng)的對(duì)象：擁有浮動(dòng)子級(jí)的父級(jí)

這里只介紹四種清浮動(dòng)的方法

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

原理：在浮動(dòng)布局的情況下，讓父級(jí)獲得合適的高度。

三、流式布局

1.目的

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

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

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

四、定位布局

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

1.語(yǔ)法

position屬性指定一個(gè)元素的定位類型

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

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

2.相對(duì)定位

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

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

3.絕對(duì)定位

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

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

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

4.固定定位

完全脫離文檔流
參考系為文檔窗口，不隨頁(yè)面滾動(dòng)而改變位置

5.z-index

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

五、Flex布局

1.概念

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

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

2.容器屬性

1.flex-direction屬性 決定主軸的方向(即項(xiàng)目的排列方向)
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屬性的簡(jiǎn)寫形式，默認(rèn)為row nowrap
flex-flow:  ;

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

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

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

3.項(xiàng)目屬性

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

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

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

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

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

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

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

1.概念

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

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

2.頁(yè)面寬度

小于寬度

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1749.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Kylin_Mountain

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

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

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

閱讀 3096·2019-08-23 17:12
騰訊地圖WebService API 和 CORB誤會(huì)

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

資訊專欄INFORMATION COLUMN

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

高級(jí)布局

一、文檔流(normal flow)

1.概念

2.BFC(Block formatting context)

3.BFC規(guī)則

二、浮動(dòng)布局

1.目的

2.基本語(yǔ)法

3.浮動(dòng)布局實(shí)例

4.浮動(dòng)布局的問(wèn)題

5.清浮動(dòng)

三、流式布局

1.目的

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

四、定位布局

1.語(yǔ)法

2.相對(duì)定位

3.絕對(duì)定位

4.固定定位

5.z-index

五、Flex布局

1.概念

2.容器屬性

3.項(xiàng)目屬性

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

1.概念

2.頁(yè)面寬度

3.注

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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

一、文檔流(normal flow)

二、浮動(dòng)布局

三、流式布局

四、定位布局

五、Flex布局