前言
每個元素都會生成乙個矩形框，每個元素框中心都有乙個內容區(content),這個內容區周圍有內邊距(padding)、邊框(border)和外邊距(margin)，預設寬度為0。
tip:wxss完全遵循w3c盒子模型規範
w3c中的盒子模型的寬:包括margin+border+padding+width;（width為content的寬度）
width(模型寬度):margin2+border2+padding*2+width;
元素的顯示方式：
塊級元素：預設佔一行高度(浮動後除外)。如view
行內元素：根據內容的大小決定，通過修改元素display屬性為block可將此元素強制設定為塊級元素。如text
tip:塊級元素的元素框的寬度與其父級元素的內容區相同；塊級元素高度由其子元素(內容高度)決定。
1.1塊級元素演示
"border:solid 1px"
>第乙個塊級元素<
/view>
"border:solid 10px;margin:10px;padding:10px"
>第二個塊級元素<
/view>
<
!--父級元素高度由內容決定--
>
>
"magin-top:10px;border:solid 1px"
>
"height:100px"
>第三個塊級元素
<
/view>
<
/view>
1.2行內元素
將元素的display屬性設定為inline可設定為行內元素。
總結：和其它非塊級元素都在一行上；
盒子模型中高度、寬度、上下margin、上下padding設定均無效，只能設定左右margin和padding；
寬度和高度不能直接設定；
行內元素中放置塊級元素會引起不必要的混亂。
1.3行內塊元素
將元素的display屬性設定為inline-block。
行內塊級元素是把塊級元素以行的形式展現，相當於把放在文字中，可對寬度和高度進行設定。
二、浮動和定位
2.1浮動
元素通過float屬性設定浮動，浮動的框可以向左或像右移動，直到其外邊緣碰到包含框或另乙個浮動框，其它文字會環繞而過。
演示
文字文字文字文字文字文字文字
"display:block;float:left;border:solid 1px;margin:20px"
>
浮動框<
/view>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
<
/view>
注意：父級元素只會包含第乙個元素
例如
第一元素<
/view>
"float:left"
>浮動元素<
/view>
<
/view>
具體定位操作可參考w3c css position屬性
2.3 flex
所有 view 預設都是 block浮動布局，要使用 flex 布局的話需要顯式的宣告：
display:flex;flex-direction 決定元素的排列方向
flex-wrap 決定元素如何換行
flex-flow flex-direction和flex-wrap的簡寫
justify-content 元素在主軸上的對齊方式
align-items 元素在交叉軸的對齊方式
2.flex容器內元素屬性
flex-grow 當有多餘空間時，元素的放大比例
flex-shrink 當空間不足時，元素的縮小比例
flex-basis 元素在主軸上佔據的空間
flex 是grow、shrink 、basis的簡寫
order 定義元素的排列順序
align-self 定義元素自身的對齊方式
謝謝閱讀！
微信小程式 布局
傳送門 傳送門 語法 margin auto length 引數 margin 10px 11px 9px 8px 按順序分別代表物件與父容器的上 右 下 左的距離值為10px,11px,9px,8px。auto 值被設定為相對邊的值 length 由浮點數字和單位識別符號組成的長度值 百分數。百分...
微信小程式布局display flex布局介紹
display flex是將物件作為彈性伸縮盒顯示。伸縮盒最新版本 css3 在web網頁中必須要考慮相容性，因為瀏覽器不同，瀏覽器的支援和實現方式也不同，導致相容起來略顯麻煩 設定乙個容器，其中有多個子容器，比如，這是乙個簡單的例子 style width 400px height 120px b...
微信小程式入門
標籤 view text 語法 條件渲染 view view else view 列表渲染 for wx key view for wx for item myitem wx for index myindex text 模板template 定義 template name temp view t...