微信小程序css篇----佈局(Layout)

說到佈局,腦子裏第一反應出來的就是LinearLayout,RelativeLayout等等,不過現在既然是小程序,那當然得換換思路了,來看看css中有哪些佈局方式。

一:佈局有以下幾種:display,float,clear,visibility,overflow,overflow-x,overflow-y。

1.display:設置對象是否顯示。

2.float:指出對象是否及如何浮動。

3.clear:指出了不允許有浮動對象的邊。

4.visibility:是否隱藏,與display隱藏不同,visibility隱藏的時候保留元素佔據的位置。

5.overflow:設置對象處理溢出內容的方式。

6.overflow-x:設置在橫向溢出內容的方式。

7.overflow-y:設置在縱向溢出內容的方式。

二:display:根據“float”和“position” 決定盒子或者箱子的類型生成一個元素。

   

以上是小程序中display的取值,常用的如下:

1.block:指定對象爲塊元素。

2.flex:將對象作爲彈性伸縮盒顯示。(小程序推薦使用伸縮盒子)

3.inline:指定對象爲內聯元素。

4.inline-block:指定對象爲內聯塊元素。

5.inline-flex:將對象作爲內聯塊級彈性伸縮盒顯示。

6.inline-table:指定對象作爲內聯元素級的表格。

7.list-item:指定對象爲列表項目。

8.none:隱藏對象。不佔物理位置。

9.table:指定對象最爲塊元素級的表格。

三:float:定義了元素在那個方向浮動,浮動元素會生成一個塊級框,而不論它本身是何種元素。

1.取值:left,right,none,inherit。

2.float 在絕對定位中不起作用。大多數企業網站佈局都是以float來定位。

四.clear:該屬性指出不允許有浮動對象的邊。

1.取值:left,right,both,none.

 

2.none:允許兩邊可以浮動。 left:不允許左邊有浮動對象。 right:不允許右邊有浮動對像。both:兩邊都不允許浮動。

五.visibility:是否顯示對象;

1.取值:visible,hidden,collapse。

2.visible:設置可見。hidden:設置隱藏(隱藏了也佔位置)。collapse:隱藏表格的行或者列。

六.overflow:處理溢出內容的方式。

1.取值:visible,hidden,scroll,auto。

2.visible:對溢出內容不做處理,內容可能會超出容器。

   hidden:隱藏溢出容器的內容且不會出現滾動條。

   scroll:隱藏溢出容器的內容,溢出的內容將以捲動滾動條的方式呈現。

  auto:當內容沒有溢出容器的時候不出現滾動條,當內容溢出容器的時候出現滾動條。按需出現。

七:overflow-x:橫向處理溢出內容的方式;

1.取值:visible,hidden,scroll,auto。

2.同overflow。

八:overflow-y:縱向處理溢出內容的方式;

1.取值:visible,hidden,scroll,auto。

2.同overflow。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章