提到布局,腦子里第一反應出來的就是LinearLayout,RelativeLayout等等,不過現在既然是小程序,那當然得換換思路了,來看看css中有哪些布局方式。
1. 布局有以下幾種:display,float,clear,visibility,overflow,overflow-x,overflow-y。
display:設置對象是否顯示。
float:指出對象是否及如何浮動。
clear:指出了不允許有浮動對象的邊。
visibility:是否隱藏,與display隱藏不同,visibility隱藏的時候保留元素占據的位置。
overflow:設置對象處理溢出內容的方式。
overflow-x:設置在橫向溢出內容的方式。
overflow-y:設置在縱向溢出內容的方式。
1.1 display:根據“float”和“position” 決定盒子或者箱子的類型生成一個元素。
以上是小程序中display的取值,常用的如下:
block:指定對象為塊元素。
flex:將對象作為彈性伸縮盒顯示。(小程序推薦使用伸縮盒子)
inline:指定對象為內聯元素。
inline-block:指定對象為內聯塊元素。
inline-flex:將對象作為內聯塊級彈性伸縮盒顯示。
inline-table:指定對象作為內聯元素級的表格。
list-item:指定對象為列表項目。
none:隱藏對象。不占物理位置。
table:指定對象最為塊元素級的表格
1.2 float:定義了元素在那個方向浮動,浮動元素會生成一個塊級框,而不論它本身是何種元素。
取值:left,right,none,inherit。
float 在絕對定位中不起作用。大多數企業網站布局都是以float來定位。
1.3 clear:該屬性指出不允許有浮動對象的邊。
取值:left,right,both,none.
none:允許兩邊可以浮動。
left:不允許左邊有浮動對象。
right:不允許右邊有浮動對像。
both:兩邊都不允許浮動。
1.4 visibility:是否顯示對象
取值:visible,hidden,collapse。
visible:設置可見。
hidden:設置隱藏(隱藏了也占位置)。
collapse:隱藏表格的行或者列。
1.5 overflow:處理溢出內容的方式。
取值:visible,hidden,scroll,auto。
visible:對溢出內容不做處理,內容可能會超出容器。
hidden:隱藏溢出容器的內容且不會出現滾動條。
scroll:隱藏溢出容器的內容,溢出的內容將以卷動滾動條的方式呈現。
auto:當內容沒有溢出容器的時候不出現滾動條,當內容溢出容器的時候出現滾動條。按需出現。
1.6 overflow-x:橫向處理溢出內容的方式;
取值:visible,hidden,scroll,auto。
1.7 overflow-y:縱向處理溢出內容的方式
取值:visible,hidden,scroll,auto