免费国产欧美国日产_少妇AV一区二区三区无码_蜜桃精品av无码喷奶水小说_jk18禁网站视频_精产国品一二三级产品区别_被夫の上司に犯波多野结衣_78m成人手机免费看_最爽最刺激18禁视频_偷偷色噜狠狠狠狠的777米奇

易優(yōu)GEO 重磅上線 ~ 一站式GEO優(yōu)化工具,讓豆包、文心一言、DeepSeek 在回答中主動推薦你的品牌,搶占AI流量入口!  點擊查看

小程序模板網(wǎng)

微信小程序模板—CSS篇之布局篇

發(fā)布時間:2021-06-01 08:36 所屬欄目:小程序開發(fā)教程

  提到布局,腦子里第一反應出來的就是LinearLayout,RelativeLayout等等,不過現(xiàn)在既然是小程序,那當然得換換思路了,來看看css中有哪些布局方式。

  1. 布局有以下幾種:display,float,clear,visibility,overflow,overflow-x,overflow-y。

  display:設置對象是否顯示。

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

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

  visibility:是否隱藏,與display隱藏不同,visibility隱藏的時候保留元素占據(jù)的位置。

  overflow:設置對象處理溢出內(nèi)容的方式。

  overflow-x:設置在橫向溢出內(nèi)容的方式。

  overflow-y:設置在縱向溢出內(nèi)容的方式。

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

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

  block:指定對象為塊元素。

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

  inline:指定對象為內(nèi)聯(lián)元素。

  inline-block:指定對象為內(nèi)聯(lián)塊元素。

  inline-flex:將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。

  inline-table:指定對象作為內(nèi)聯(lián)元素級的表格。

  list-item:指定對象為列表項目。

  none:隱藏對象。不占物理位置。

  table:指定對象最為塊元素級的表格

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

取值:left,right,none,inherit。

  float 在絕對定位中不起作用。大多數(shù)企業(yè)網(wǎng)站布局都是以float來定位。

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

  取值:left,right,both,none.

  none:允許兩邊可以浮動。

  left:不允許左邊有浮動對象。

  right:不允許右邊有浮動對像。

  both:兩邊都不允許浮動。

1.4 visibility:是否顯示對象

取值:visible,hidden,collapse。

  visible:設置可見。

  hidden:設置隱藏(隱藏了也占位置)。

  collapse:隱藏表格的行或者列。

1.5 overflow:處理溢出內(nèi)容的方式。

  取值:visible,hidden,scroll,auto。

  visible:對溢出內(nèi)容不做處理,內(nèi)容可能會超出容器。

  hidden:隱藏溢出容器的內(nèi)容且不會出現(xiàn)滾動條。

  scroll:隱藏溢出容器的內(nèi)容,溢出的內(nèi)容將以卷動滾動條的方式呈現(xiàn)。

  auto:當內(nèi)容沒有溢出容器的時候不出現(xiàn)滾動條,當內(nèi)容溢出容器的時候出現(xiàn)滾動條。按需出現(xiàn)。

1.6 overflow-x:橫向處理溢出內(nèi)容的方式;

  取值:visible,hidden,scroll,auto。

1.7 overflow-y:縱向處理溢出內(nèi)容的方式

  取值:visible,hidden,scroll,auto


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.szcjxy.com/wxmini/doc/course/25884.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢: 點擊咨詢
在線客服