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

fanshaokun      2022-02-11     153

关键词:

一:布局有以下几种: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篇----所有属性(按字母排列:c,d,e开头)

f开头的属性主要就是盒子布局和字体的,先来看图,然后在一项项来看。1.fallback:是@counter-style里的属性值。小程序里不知道怎么写,一写@counter-style就报未定义的属性。不过在css中Firefox支持。点击打开链接。2.fill:这是SVG里... 查看详情

学习微信小程序之css16常见布局

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>css常见布局</title><style>*{padding:0;margin:0;}.header,.nav,.main,.footer{background-color:silver; 查看详情

css进阶篇——布局(layout)(代码片段)

现代CSS让页面布局变得非常简单,当年只能HTMLtables和切图的时代已经一去不复返。位置(Positioning)position属性用于定义一个盒元素的位置类型,它的取值包含:static-静态位置布局,也是默认方式,浏... 查看详情

css进阶篇——布局(layout)(代码片段)

现代CSS让页面布局变得非常简单,当年只能HTMLtables和切图的时代已经一去不复返。位置(Positioning)position属性用于定义一个盒元素的位置类型,它的取值包含:static-静态位置布局,也是默认方式,浏... 查看详情

css进阶篇——布局(layout)(代码片段)

现代CSS让页面布局变得非常简单,当年只能HTMLtables和切图的时代已经一去不复返。位置(Positioning)position属性用于定义一个盒元素的位置类型,它的取值包含:static-静态位置布局,也是默认方式,浏... 查看详情

微信小程序css篇----字体(font)

一.字体:font。属性在一个声明中设置所有字体属性。可设置的属性是(按顺序):"font-stylefont-variantfont-weightfont-size/line-heightfont-family".font-size和font-family的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话.1.... 查看详情

微信小程序:“我的”页面布局(二):可配置功能菜单列表

...甚至如果有需求,还可以放在服务端做成可随意变化的:微信小程序:“我的”页面布局(一):微信用户信息获取及UI微信小程序:“我的”页面布局(二):可配置功能菜单列表 查看详情

微信小程序view的布局

参考技术A横向布局or竖向布局=>设置属性flex-direction设置元素在横向上的布局方向,需要设置justify-content属性设置元素在纵向上的布局方向,需要设置align-items属性用于控制子View是否换行=>设置flex-wrap属性 查看详情

微信小程序:原生热布局终将改变世界

    最近朋友圈已经被微信小程序刷屏了,这也难怪,腾讯的产品拥有广泛的影响力,谁便推出个东西,都会有很多人认为会改变世界,这不,张小龙刚一发布微信小程序的消息,很多人(技术的和非技术的)就跟... 查看详情

微信小程序:“我的”页面布局(一):微信用户信息获取及ui

...隐藏的button,未获取到用户信息时,显示为默认头像和“微信授权”的文字提示,登陆后,头像变为微信头像,文字变为微信昵称。具体ui为判断没有授权则显示默认头像及提示,并在其上层覆盖一个透明的button,用户触发授权事... 查看详情

as布局篇

LinearLayout线性布局RelativeLayout相对布局FrameLayout帧布局AbsoluteLayout绝对布局TableLayout表格布局GridLayout网格布局ConstraintLayout约束布局几点布局原则1.LinearLayout线性布局线性布局是指子控件以水平或垂直方式排列。决定子控件的排布方... 查看详情

#yyds干货盘点#愚公系列2022年11月微信小程序-flex布局详解(代码片段)

一、Flex布局详解1.Flex布局的概念1.1传统布局盒子模型:我们知道当并列书写多个div标签,它们会纵向向下排位,如果我们想将多个div并列成一排,就得借助position,float,或display属性,这便是传统的盒模型做法。CSS盒模型本质上... 查看详情

微信小程序不支持css子元素nth-child()怎么办

参考技术A额这个确实是不支持,只能看以后会不会更新可以考虑更换一下布局,或者用js操作本回答被提问者采纳 查看详情

flex布局教程:语法篇

...地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex布局教程:语法篇网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性+ position属性+ fl 查看详情

微信小程序完结篇之生命周期(代码片段)

介绍:今天我们学习一下生命周期,这个是小程序基础的最后一个章节,小程序生命周期分为应用生命周期和页面生命周期应用生命周期属性类型默认值必填说明onLaunchfunction否监听⼩程序初始化。onShowfunction否监听⼩程序启动或切前... 查看详情

flex布局教程:语法篇

...uanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性+ position属性+ float属性。它对于那些特殊布局非常不方便,比如,垂... 查看详情

flex布局教程:语法篇

...uanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性+ position属性+ float属性。它对于那些特殊布局非常不方便,比如,垂... 查看详情

微信小程序布局(代码片段)

 尺寸单位与设计原则首先,我们现在页面中引入一张图片  但是实际上,这个图片的大小是32*18的,之所以会显示这么大,是因为image组件默认的宽度为300px,默认的高度为225px,如果我们需要图片显示真实的大小,就... 查看详情