小程序之布局
基本知识
盒子模型:
盒子模型是CSS的基础,CSS假定每一个元素都会生成一个或多个矩形框,每个元素矩形框中心设定一个盒子,每个框中新都有一个内容区,每个盒子都有内边距(padding)和边界(border)和外边界(margin)和内容。
块级元素
块级元素显示方式是主要分为块级元素和行内元素。元素的显示方式是display属性控制的,块级元素会默认占一行行高,一般认为一行内只有一个块级元素(浮动后除外)当再添加新的块级元素时自动换行显示,块级元素一班作为容器出现,用于组织结构。一些元素默认为块级元素,如小程序的view组件,而一些默认是行内元素,我们可以通过display:block设置为块级元素。
示例:view默认是块级元素,下面我们使用<view />为大家演示块级元素的特性,如:
<!--块级元素展示-->
<!--每个块级元素占一行-->
<view style='border:solid 1px;'>
第一个块级元素
</view>
<!--默认情况下块级元素和父级元素宽度相同,刚好撑满内容区-->
<view style='border:solid 10px; margin:10px; padding:10px;'>第二个块级元素演示</view>
<!--即时宽度不足仍会占领一行,让其他元素换行-->
<view style='border:solid 1px; width:200px; '>
第三个块级元素
</view>
<!--元素随内容宽度进行调整-->
<view style='margin-top:20px; height:100px; border:solid 1px;'>高度设定查看</view>
行内元素
除了块级元素,最常见的就是行内元素了,设置display的属性为inline可以将一个元素设置为行内元素,小程序的<text>就是一个行内组件,行内元素的属性总结如下:
盒子模型中的 width,height,上下margin,上下padding 设置均无效,只能设置左右margin 和padding
行内块元素
行内块元素时块级元素和行内元素的混合物inline-block,可以设置块级元素的属性,显示时相当于行内元素镶嵌再文本中
示例:
<!--展示混合的效果-->
这次示例我们展示行内混合布局的效果,
<view style='border:solid 1px; margin:1px; padding:1px; '>VM134:1 请注意无 AppID 关联下,调用 wx.login 是受限的, API 的返回是工具的模拟返回</view>
哈哈
<view style='border:solid 1px; margin:1px; padding : 1px; display:inline-block'>行内混合布局</view>
展示完成后,大家有没有看出不同呢
浮动和定位
这个html 中的布局讲的就挺详细的了,这里就不在赘述了
Flex布局
这个时最近几年新出的代替浮动定位中的不足产生的新的定位方式。Flex主要时容器和元素组成,采用Flex布局的元素,成为Flex容器(Flex container)它的所有直接子元素直接构成容器成员,成为Flex项目(Flex item)。可以设置display: flex;或者时display:inline-flex将任何一个子元素设置为flex布局。如图所示,容器默认存在两个不同的轴,水平的主轴和垂直的交叉轴。
容器的属性
dispaly:通过display来设定是否为flex布局
flex-direction:通过设定主轴的方向来设定项目的排列方式
flex-warp:排列换行设置
flex-flow: flex-direction和flex-warp的简写形式
1.display
flex用于产生布局:两种属性 flex和inline-flex
2.flex-direction
主轴的方向,即项目的排列的方向
语法:flex-direction:row|row-reverse|column|column-reverse
row:主轴方向在行方向上
row-reverse:反转效果
column:列方向
column-reverse:反转效果
3.flex-warp
默认情况下,项目都排在一条直线上,flex-wrap用来指定如果一条轴排列不下的话,该如何换行
flex-wrap:nowrap|wrap|wrap-reverse;
nowrap:不换行,全部挤在一起
wrap自动换行
这是大体上经常用到的一些属性及相关属性值,当然还是不全的,如果以后发现还有经常用到的属性值我会不管补充。