這一節就是學佈局了。

盒子模型是CSS佈局的基礎，CSS假定每個元素都會生成一個或多個矩形框，每個元素框中心都有內容框content，內邊距padding，邊框border和外邊距margin，這些預設為0.盒子模型根據瀏覽器具體實現可分為W3C標準盒子模型和IE盒子模型，這兩種盒子模型在寬度和高度的計算不一致，WXSS完全遵守W3C盒子模型規範。

元素按照顯示方式分為塊級元素和行內元素。我們可以通過display設定屬性為block，將一個元素強制設定為塊級元素，設定屬性inline，將一個元素強制設定為行內元素。

塊級元素舉例

<!-- 每個塊級元素佔一行-->
<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>
 

結果圖

行內元素,，盒子模型中的高度，寬度，上下margin，上下padding設定均無效，只能設定左右margin和padding。

行內元素舉例

<!--通過修改display屬性的行內元素-->
前面的文字<view style="border:solid 1px;display:inline;margin:10px;padding:0 10px;">元素元素元素元素元素元素元素元素元素</view>後面的文字

行內塊元素

行內塊元素是行內元素和塊級元素的混合，當display設定為inline-block時，元素就被設定為了一個行內塊元素，行內塊元素可以設定寬，高，內邊距和外邊距，可以簡單認為行內塊元素就是把塊級元素以行的形式展現，保留了塊級元素對寬，高，內邊距，外邊距的設定，就是一張圖放在文字行中。

<!-- 行內塊元素撐滿父級寬度情況-->
前面的文字<view style="border:solid 1px;margin:10px;padding:10px;display:inline-block;">行內塊元素行內塊元素行內塊元素行內塊元素</view>後面的文字
<!-- 行內塊元素寬度不足父級寬度情況-->
前面的文字<view style="border:solid 1px;margin:10px;padding:10px;display:inline-block;">行內塊元素</view>後面的文字

浮動和定位以及Flex佈局三種佈局方案

浮動

<!-- 新增高度為0的元素清除浮動-->
<view style="border:solid 1px;">
<view>其他元素</view>
<view style="float:right;">浮動框</view>
<view style="clear:both;height:0;"></view>
</view>
<!-- 利用偽屬性在後面插入一個元素清除浮動-->
<view style="border:solid 1px;margin-top:10px;" class="clearfix">
<view>其他元素</view>
<view style="float:left">浮動框</view>
</view>
<!--不清除浮動-->
<view style="border:solid 1px;margin-top:10px;">
<view>其他元素</view>
<view style="float:right;">浮動框</view>
</view>
.clearfix:after{
display:block;
height:0;
clear:both;
content:''
}

定位

<!-- 相對之前位置進行移動，原佔有空間不會被關閉-->
<view style="border:solid 1px;">
文字文字<text style="position:relative;top:10px;left:10px;">relative</text>文字文字文字文字文字文字文字
</view>
<!--absolute依賴於包含塊，原佔有空間會被關閉-->
<view style="border:solid 1px;position:relative;height:80px;">
文字文字<text style="position:absolute;bottom:10px;left:10px;">absolute</text>文字文字文字文字文字文字文字
</view>
<!--沒有找到最近的absolute或relative元素會直接認為根元素是包含塊，原佔有空間被關閉-->
<view style="border:solid 1px;">
文字文字<text style="position:absolute;bottom:10px;left:10px;">absolute不設定包含塊</text>文字文字文字文字文字文字文字
</view>
<!--fixed直接認為視窗本身為包含塊，原佔有空間關閉-->
<view style="border:solid 1px;">
文字文字<text style="position:fixed;bottom:10px;right:10px;border:solid 1px;">fixed</text>文字文字文字文字文字文字文字
</view>

flex佈局

flexible box的縮寫，即彈性盒子佈局，WXSS對其進行了實現，專案可以隨意使用。