微信小程式的佈局
一、盒子模型:
margin(外邊距),邊框外的區域,外邊距是透明的;
border(邊框),圍繞在內邊距和內容外的部分;
padding(內邊距),填充屬性,是指內容周圍的區域,內邊距也是透明的;
content(內容),盒子的實際內容,用於展示頁面元件。
在盒子模型中,確定內容位置的,是通過margin和padding這兩個屬性來確定的,而不是top,bottom,left,right等,這些屬性在盒子模型中是失效的。
在文件流中,通過設定margin:0 auto;使元素水平居中,此方式只適合在普通文件流情況下,在絕對定位和浮動中,元素不在屬於正常文件流,因此不適用。
二、顯示方式Display:
display屬性用來設定,元素是否顯示或元素行內顯示還是塊級顯示,以及flex佈局也是需要通過設定display屬性完成的。屬於文件流的佈局格式。
display:none和visibility:hidden屬性都可以用來指定元素是可見還是隱藏。
display:none;隱藏某個元素的同時會釋放元素佔用的頁面空間。
visibility:hidden;隱藏某個元素時,元素佔用的空間不被釋放,元素的佈局依然起作用。
值 | 描述 |
none | 此元素不會被顯示 |
block | 此元素將會被顯示為塊級元素,前後帶有換行符 |
inline | 預設,此元素被顯示為內聯元素,前後沒有換行符 |
inline-bolck | 行內塊元素 |
flex | flex佈局顯示 |
list-item | 此元素會作為列表顯示 |
run-in | 此元素會根據上下文作為塊級元素或內聯元素顯示 |
三、定位Position:
值 | 描述 |
absolute | 生成絕對定位的元素,相對於static定位以外的第一個父元素進行定位。元素從文件流中完全刪除, 元素原先在正常文件流中所佔的空間會關閉,就像該元素不存在一樣,如果文件流中該位置有元素, 則會出現重疊現象。絕對定位於文件流無關,因此不佔據文件流空間 元素的位置通過"left"、“top”、“right”、“bottom”屬性來定義。 |
relative | 生成相對元素,相對於正常位置進行定位。依舊屬於文件流中,佔用文件流 中的空間。通過"left"、“top”、“right”、“bottom”屬性使元素距離原位置進行偏移。 |
static | 預設樣式,沒有定位,忽略樣式表中"left"、“top”、“right”、“bottom”屬性的影響。 |
fixed | 生成絕對定位的元素,相對於裝置顯示視窗進行定位。 |
四、浮動Float:
浮動屬性產生之初是為了實現“文字環繞”的效果,讓文字環繞圖片在網頁實現類似word中“圖文混排”。
定位方式:
浮動讓元素脫離正常流,向父容器的左邊或右邊移動直到碰到包含容器的邊【經測試碰到padding即停】或者碰到其他浮動元素。文字和行內元素將環繞浮動元素。
Note:
1、碰到容器的邊指的是容器的padding內邊。
2、浮動元素脫離正常流,意思是佈局時後面元素當它不存在(文字還是當它存在,環繞其身邊),但仍然在dom樹上。後面的元素可能會被遮擋。
//index.wxml <view class='view1'>紅色</view> <view class='view2'>綠色</view> <view class='view3'>黃色</view> //index.wxss .view1{ width: 300rpx; height: 300rpx; background-color: red; float: left; } .view2{ width: 500rpx; height: 300rpx; background-color: green; } .view3{ width: 300rpx; height: 300rpx; background-color: yellow; }
屬性值 | 說明 |
left | 元素向左浮動 |
right | 元素向右浮動 |
none | 預設值,元素不浮動,並會顯示其在文字中出現的位置 |
inherit | 規定應該從父元素繼承float屬性的值 |
浮動的包裹性和破壞性:
包裹性:包裹性指的是元素尺寸剛好容納內容。可以利用浮動的包裹性來達到父容器自適應內部元素寬度。
破壞性:破壞性是指元素浮動後可能導致父元素高度塌陷。
浮動破壞性原理:
因為浮動元素被從文件正常流中移除了,父元素當然還處在正常流中,所以父元素不能被浮動元素撐大。
清除浮動---clear屬性:
取值:
-
- left:元素左側不允許有浮動元素
- ight:元素右側不允許有浮動元素
- both:元素左右兩側均不允許有浮動元素
- none:預設值,允許浮動元素出現在兩側
五、Flex佈局:
盒子模型有它的不足之處,如我們需要元素垂直居中佈局的時候,或者設計元素根據螢幕形式自動伸縮的響應式頁面的時候,僅僅依靠盒子模型很難實現。Flex佈局意即彈性佈局,也被稱為柔性佈局,它讓子專案方便的改變寬度、高度和順序,為盒子模型提供最大的佈局靈活性。Flex佈局的元素大小是可伸縮的,可根據需要擴充套件自己的尺寸來填滿可用空間。而常規的文件流佈局中方向是確定的,塊就是從上到下,內聯就是從左到右,而在flex佈局中,方向是不可預知的。
屬性 | 引數 | 說明 |
flex-direction | 主軸方向 |
row:預設值,水平方向,從左到右; row-reverse:水平方向,從右到左; column:垂直方向,從上到下; cokumn-reverse:垂直方向,從下到上 |
flex-wrap | 換行屬性 | nowrap:預設值,不換行; wrap:換行,由上到下排列,專案的第一行在最上方; wrap-reverse:換行,由下到上排列,專案的第一行在最下方。 |
flex-flow | 主軸方向和換行的縮寫 | rowwrap:水平方向,且換行; |
justify-content | 主軸線的對齊方式 | flex-start:預設值,左對齊; flex-end:右對齊; center:居中對齊; space-between:兩端對齊,元素間隔相等; space-around:專案等距分佈在行裡,兩端保留專案間距一半的空間。 |
align-items | 側周對齊屬性 | flex-start:預設值,左對齊; flex-end:右對齊; center:居中對齊; baseline:專案第一行文字的基線對齊; stretch:預設值,上下兩側對齊,將佔滿整個容器高度。 |
align-content | 多行專案的對齊方式 | flex-start:預設值,左對齊; flex-end:右對齊; center:居中對齊; space-between:兩端對齊,元素間隔相等; space-around:專案等距分佈在行裡,兩端保留專案間距一半的空間; stretch:預設值,上下兩側對齊,將佔滿整個側軸。 |
order | 順序 | 數值小的排在前面,大的排在後面。 |
flex-grow | 放大比例 | 預設值為0,將元素放到到原來的幾倍 |
flex-shrink | 縮小比例 | 將元素縮小到原來的幾倍。 |
flex-basis | 根據主軸剩餘空間,決定在主軸中的元素是否拉伸或者壓縮 | 預設值為auto,設定為auto時不拉伸也不壓縮。可以設定為固定值。 它的優先順序高於對元素width的設定,當同時設定width和 flex-basis大小時, 最後會按照 flex-basis的大小設定。 |
flex | flex-grow, flex-shrink, flex-basis的簡寫形式 |
預設為flex:0,1auto; |
align-self | 單項對齊屬性,用於設定單個專案的對齊方式, 設定值可以和align-items屬性的其他專案的對齊方式不同。 |
預設值為auto ,表示繼承容器的align-items屬性。其他為flex-start等。 |