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所示。

图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>

块级元素还有很多特性，比如水平格式化、垂直格式化等，我们不在这里一一列举，大家可以查阅相关资料。