3.1.2 塊級元素

元素按顯示方式主要可以分為塊級元素和行內元素，元素的顯示方式是由display屬性控制的，塊級元素會默認占一行高度，一般一行內只有一個塊級元素（浮動后除外），當再添加新的塊級元素時，新元素會自動換行顯示。塊級元素一般作為容器出現，用于組織結構。一些元素默認就是塊級元素，如小程序中的<view/>組件，而一些則默認是行內元素，我們可以通過修改元素display屬性為block，將一個元素強制設置為塊級元素。一個塊級元素的元素框與其父元素的width相同，塊級元素的width+marginLeft+marginRight+paddingLeft+paddingRight剛好等于父級元素內容區寬度，顯示時默認撐滿父元素內容區。塊級元素高度由其子元素決定，父級元素高度會隨內容元素變化而變化。塊級元素特點總結如下：

□總是在新行上開始。

□寬度默認為width+marginLeft+marginRight+paddingLeft+paddingRight剛好等于父級元素內容區寬度，除非設定一個新寬度，這里需要注意，當設置塊級元素寬度為100%時，如果當前塊級元素存在padding、margin會導致塊級元素溢出父元素。

□盒子模型高度默認由內容決定。

□盒子模型中高度、寬度及外邊距和內邊距都可控制。

□可以容納行內元素和其他塊級元素。

示例：

<view/>組件默認是塊級元素，下面我們使用<view/>為大家演示塊級元素的特性，如圖3-2所示。

代碼如下：

    <! -- 每個塊級元素占領一行 -->
    <view style="border:solid 1px; ">第一個塊級元素</view>
    <! -- 默認情況下塊級元素的元素框和父級元素的width相同，剛好撐滿內容區 -->
    <view style="border:solid 10px; margin : 10px; padding :10px; ">第二個塊級元素
    </view>
    <! -- 即使寬度不足，仍會占領一行讓其余元素換行 -->
    <view style="border:solid 1px; width : 200px; ">第三個塊級元素</view>
    其他信息
    <! -- 父級元素高度隨內容決定 內容為塊級元素-->
    <view style="margin-top:10px; border:solid 1px; ">
        <view style="height : 100px; ">塊級元素</view>
    </view>
    <! -- 父級元素高度隨內容決定 內容為文本流情況 -->
    <view style="margin-top:10px; border:solid 1px; ">
        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    </view>

塊級元素還有很多特性，比如水平格式化、垂直格式化等，我們不在這里一一列舉，大家可以查閱相關資料。