• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

说到布局,脑子里第一反应出来的就是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。
————————————————
版权声明:本文为CSDN博主「鎏嫣宫守护」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_32067045/java/article/details/53928817


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序之滚动到页面底部发布时间:2022-07-18
下一篇:
微信小程序和asp.netcore基于docker和nginx的交互发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap