1、盒子模型

? ? ? ? 盒子模型就是我們?cè)陧?yè)面設(shè)計(jì)中經(jīng)常用到的一種思維模型。在CSS中，一個(gè)獨(dú)立的盒子模型由內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）4個(gè)部分組成，如圖所示：

? ? ? ? 此外，對(duì)padding、border和margin可以進(jìn)一步細(xì)化為上、下、左、右4個(gè)部分，在CSS中可以分別進(jìn)行設(shè)置，如圖所示：

圖中個(gè)元素的含義如下：

????????width和height? ? ? ? 內(nèi)容的寬度和高度

? ? ? ? padding-top(-right、-bottom、-left)上內(nèi)邊距（右內(nèi)邊距、底內(nèi)邊距、左內(nèi)邊距）

? ? ? ? border-top(-right、-bottom、-left)上邊框（右邊框、底邊框、左邊框）

? ? ? ? margin-top(-right、-bottom、-left)上外邊距（右外邊距、底外邊距、左外邊距）

2、塊級(jí)元素與行內(nèi)元素

? ? ? ? 元素按顯示方式分為塊級(jí)元素、行內(nèi)元素和行內(nèi)塊元素，它們的顯示方式由display屬性控制。

2.1、塊級(jí)元素

? ? ? ? 塊級(jí)元素默認(rèn)占一行高度，一行內(nèi)通常只有一個(gè)塊級(jí)元素（浮動(dòng)后除外），添加新的塊級(jí)元素時(shí)，會(huì)自動(dòng)換行，塊級(jí)元素一般作為盒子出現(xiàn)。塊級(jí)元素的特點(diǎn)如下：

（1）一個(gè)塊級(jí)元素占一行。

（2）塊級(jí)元素的默認(rèn)高度由內(nèi)容決定，除非自定義高度。

（3）塊級(jí)元素的默認(rèn)高度是腹肌元素的內(nèi)容區(qū)寬度，除非自定義高度。

（4）塊級(jí)元素的寬度。高度、外邊距及內(nèi)邊距都可以自定義設(shè)置。

（5）塊級(jí)元素可以容納塊級(jí)元素和行內(nèi)元素。

代碼展示：

代碼結(jié)果展示：

2.2、行內(nèi)元素

????????行內(nèi)元素，不必從新一行開(kāi)始，通常會(huì)與前后的其他行內(nèi)元素顯示在同一行中，它們不占有獨(dú)立的區(qū)域，僅靠自身內(nèi)容支撐結(jié)構(gòu)，一般不可以設(shè)置大小，常用于控制頁(yè)面中文本的樣式。將一個(gè)元素的display屬性設(shè)置為inline后，該元素即被設(shè)置為行內(nèi)元素。行內(nèi)元素的特點(diǎn)如下：

（1）行內(nèi)元素不能被設(shè)置高度和寬度，其高度和寬度由內(nèi)容決定。

（2）行內(nèi)元素內(nèi)不能放置塊級(jí)元素，只有容納文本或其他行內(nèi)元素。

（3）同一塊內(nèi)，行內(nèi)元素和其他行內(nèi)元素顯示在同一行。

代碼展示：

代碼結(jié)果展示：

2.3、行內(nèi)塊元素

? ? ? ? 當(dāng)元素的display屬性被設(shè)置為inline-block時(shí)，元素被屬性為行內(nèi)塊元素。行內(nèi)塊元素可以被屬性高度、寬度、內(nèi)邊距和外邊距。

代碼展示：

代碼結(jié)果展示：

3、浮動(dòng)與定位

3.1元素浮動(dòng)與清除

? ? ? ? 元素浮動(dòng)就是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)文檔流的控制，移到其父元素中指定位置的過(guò)程。在CSS中，通過(guò)float屬性來(lái)定義浮動(dòng)。

? ? ? ? 其中，none——默認(rèn)值，表示元素不浮動(dòng);

? ? ? ? left——元素向左浮動(dòng)；

????????right——元素向右浮動(dòng)；

代碼展示：

代碼結(jié)果展示：

有浮動(dòng)的話我們就可以清除浮動(dòng)，在CSS中，clear屬性用于清除浮動(dòng)元素的影響，如下：

? ? ? ? clear:left(清除左邊浮動(dòng)的影響，也就是不允許左側(cè)有浮動(dòng)元素)

? ? ? ? clear:right(清除右邊浮動(dòng)的影響，也就是不允許右側(cè)有浮動(dòng)元素)

? ? ? ? clear:both(同時(shí)清除左右兩側(cè)浮動(dòng)的影響)

? ? ? ? clear:none(不清除浮動(dòng))

代碼展示：

代碼結(jié)果展示：

3.2元素定位

? ? ? ? 浮動(dòng)布局雖然靈活，但無(wú)法對(duì)元素的位置進(jìn)行精確的控制。在CSS中，通過(guò)position屬性可以實(shí)現(xiàn)對(duì)頁(yè)面元素的精確定位。如下：

? ? ? ? position:staticc(默認(rèn)值，該元素按照標(biāo)準(zhǔn)流進(jìn)行布局)

? ? ? ? position:relative（相對(duì)定位，相對(duì)與它在原文檔流的位置進(jìn)行定位，它后面的盒子仍以標(biāo)準(zhǔn)流方式對(duì)待它）

???????? position:absolute（絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位，絕對(duì)定位的盒子從標(biāo)準(zhǔn)流中脫離，它對(duì)其后面的兄弟盒子的定位沒(méi)有影響）

???????? position:fixed（固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位）

（使用方式等同于元素浮動(dòng)與清除）

4、flex布局

? ? ? ? flex布局是萬(wàn)維網(wǎng)聯(lián)盟在2009年提出的一種新布局方案，該布局可以簡(jiǎn)單快速地完成各種伸縮設(shè)計(jì)，以便很好地支持響應(yīng)式布局。flex是flexible box的縮寫(xiě)，意為彈性盒子模型，可以簡(jiǎn)便。完整、響應(yīng)式地實(shí)現(xiàn)各種布局。

? ? ? ? flex布局主要由容器和項(xiàng)目組成，采用flex布局的元素稱為flex容器（flex container），

flex布局的所有直接子元素自動(dòng)成為容器的成員，稱為flex項(xiàng)目（flex item）。????????

? ? ? ? 容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開(kāi)始位置叫做cross start，結(jié)束位置叫做cross end。

4.1容器屬性

? ? ? ? 屬性如下：

（1）display 用來(lái)指定元素為flex布局

? ? ?其中，flex——塊級(jí)flex布局，該元素變?yōu)閺椥院凶樱?/p>

? ? ? ? inline-flex——行內(nèi)flex啊布局，行內(nèi)容器符合行內(nèi)元素特征，同時(shí)在容器內(nèi)又符合flex布局規(guī)范。

? ? ? ? 設(shè)置了flex布局之后，子元素的float、clear和vertical-align屬性將失效。

（2）flex-direction 用于設(shè)置主軸方向，即項(xiàng)目排列的方向

? ? ? ? 其中，row——主軸為水平方向，起點(diǎn)在左端,當(dāng)元素設(shè)置為flex布局時(shí)，主軸默認(rèn)為row；(a)

? ? ? ? ? ? ? ? row-reverse——主軸為水平方向，起點(diǎn)在右端；(b)

? ? ? ? ? ? ? ? column——主軸為垂直方向，起點(diǎn)在頂端；(c)

? ? ? ? ? ? ? ? column-reverse——主軸為垂直方向，起點(diǎn)在低端。(d)

（3）flex-wrap 用來(lái)指定當(dāng)項(xiàng)目在一根軸線的排列位置不夠時(shí)，項(xiàng)目是否換行

? ? ? ? 其中，nowrap——不換行，為默認(rèn)值；（a）

? ? ? ? ? ? ? ?wrap——換行，第一行在上方；（b）

? ? ? ? ? ? ? ?wrap—-reverse——換行，第一行在下方。（c）

? ? ? ? 當(dāng)設(shè)置換行時(shí)，還需要設(shè)置align-item屬性來(lái)配合自動(dòng)換行，但align-item的值不能為“stretch”

（4）flex-flow是flex-direction和flex-wrap的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap

（5）justify-content 用于定義項(xiàng)目在主軸上的對(duì)齊方式

? ? ? ? 其中，justify-content——與主軸方向有關(guān)，默認(rèn)主軸水平對(duì)齊，方向從左到右

? ? ? ? flex-start——左對(duì)齊，默認(rèn)值（a）

? ? ? ? flex-end——右對(duì)齊（b）

? ? ? ? center——居中（c）

? ? ? ? space-between——兩端對(duì)齊，項(xiàng)目之間的間隔相等（d）

? ? ? ? space-around——每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等（e）

（6）align-items用于指定項(xiàng)目在交叉軸上的對(duì)齊方式

? ? ? ? 其中，align-items——與交叉軸方向有關(guān)，默認(rèn)交叉由上到下；

? ? ? ? flex-start——交叉軸起點(diǎn)對(duì)齊；

? ? ? ? flex-end——交叉軸終點(diǎn)對(duì)齊；

? ? ? ? center——交叉軸中線對(duì)齊；

? ? ? ? baseline——項(xiàng)目根據(jù)它們第一行文字的基線對(duì)齊；

? ? ? ? stretch——如果項(xiàng)目未設(shè)置高度或設(shè)置為auto，項(xiàng)目將在交叉軸方向拉伸填充容器，此為默認(rèn)值；

（7）align-content 用來(lái)定義項(xiàng)目有多根軸線（出現(xiàn)換行后）在交叉軸上的對(duì)齊方式，如果只有一根軸線，該屬性不起作用；

? ? ? ? 其中，space-between——與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布；

? ? ? ? ? ? space-around——每根軸線兩側(cè)的間隔相等，軸線之間的間隔比軸線與邊框間隔大一倍。

? ? ? ? ? ? 其余屬性值的含義與align-items相同。

4.2、項(xiàng)目屬性

容器內(nèi)的項(xiàng)目支持6個(gè)屬性，如下：

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

（2）flex-grow 定義項(xiàng)目的放大比例，默認(rèn)值為0，即不放大。

（3）flex-shrink 用來(lái)定義項(xiàng)目的縮小比例，默認(rèn)值為1，如果空間不足，該項(xiàng)目將被縮小。

（4）flex-basis 屬性用來(lái)定義伸縮項(xiàng)目的基準(zhǔn)值，剩余的空間將按比例進(jìn)行縮放，它的默認(rèn)值為auto（即項(xiàng)目的本來(lái)大?。?/p>

（5）flex 屬性是flex-grow、flex-shrink和flex-basis的簡(jiǎn)寫(xiě)，其默認(rèn)值分別為0、1、auto。

（6）align-self 屬性用來(lái)指定單獨(dú)的伸縮項(xiàng)目在交叉軸上的對(duì)齊方式。該屬性會(huì)重寫(xiě)默認(rèn)的對(duì)齊方式。

? ? ? ? 在該屬性中，除了auto以外，其余屬性值和容器align-items的屬性值完全一致。

? ? ? ? auto表示繼承容器align-items的屬性，如果沒(méi)有父元素，則等于stretch（默認(rèn)值）。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-848773.html

到了這里，關(guān)于微信小程序頁(yè)面布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！