微信小程序css篇----布局(Layout)
来源:互联网 发布:本泽马 fifa16数据 编辑:程序博客网 时间:2024/05/17 08:34
说到布局,脑子里第一反应出来的就是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。
- 微信小程序css篇----布局(Layout)
- [layout] -- 布局篇
- CSS布局对象之Layout 用法介绍
- CSS Grid-Layout常用布局表示法
- C程序的内存布局(Memory Layout)
- 微信小程序中布局使用的css布局语法
- yii2之layout布局篇
- layout布局
- 布局layout
- layout 布局
- 布局Layout
- 布局 Layout
- CSS+DIV 布局 (Liquid-Elastic hybrid layout)
- 一天搞定CSS:支持IE的Layout布局--16
- CSS+DIV 布局 (Two-Column floated fixed width layout & three columns fixed width layout)
- CSS layout
- css layout
- css-layout
- 指纹芯片GF5216(汇顶)TEE方案移植(高通8996平台)
- 返回当前样式-兼容写法
- spring boot 配置liquibase
- 软工大数据-software success prediction-文献资料汇总
- javaEE开发简介
- 微信小程序css篇----布局(Layout)
- php的命名空间
- 【jnuit】——java中的mockito
- es6中管理类的私有数据
- 插入一个博客
- N-04. 映射服务器到外网 ❀ 网康 (NETENTSEC) 防火墙
- javascript学习(十四)JS Function对象和Math对象
- nifi -- cluster
- OSI七层模型详解