微信小程序学习之路——布局基础知识

之前写的似乎太详细了...从本篇开始删繁就简，拒绝一味抄书打字，独立思考提炼...

本篇主要讲述CSS布局相关的一些基本知识，包括典型的盒子模型、浮动定位、绝对定位以及近几天提出的Flex布局，这些基本知识在WXSS也是通用的。

再次提醒大家，在代码编写过程中移动要开启开发者工具中的这个“开启上传代码时样式文件自动补全”，否则Flex布局时会存在不同终端不兼容问题。

盒子模型

简单来说，HTML中每一个元素就是一个盒子，同理，在小程序中的每一个组件就是一个盒子，我们可以通过元素width、height、padding、border、margin属性控制盒子样式。WXSS遵守W3C盒子模型规范。

块级元素

元素显示方式可以分为块级元素和行内元素，显示方式是由display属性控制的，块级元素会默认占一行高度，一般一行内只有一个块级元素（浮动后除外），当再添加新的块级元素时，新元素会自动换行显示。块级元素一般作为容器出现，用于组织结构。一些元素默认就是块级元素，如小程序中的<view/>组件，而一些则默认是行内元素，我们可以通过修改元素diasplay属性为block，将一个元素设置为块级元素，一个块级元素的元素框和其父元素的width相同。块级元素特点总结如下：

• 总是在新行上开始。
• 宽度默认为width+marginLeft+marginRight+paddingLeft+paddingRight刚好等于父级元素内容区宽度，除非设定一个新宽度，这里需要注意，当设置块级元素宽度为100%时，如果当前块级元素存在padding、margin会导致块级元素溢出父元素。
• 盒子模型高度默认由内容决定。
• 盒子模型中高度、宽度及外边距和内边距都可控制。
• 可以容纳行内元素和其他块级元素。

示例：

<view/>组件默认是块级元素，下面我们使用<view/>为大家演示块级元素的特性

[code]<!--每个块级元素占一行-->
<view style='border:solid 1px;'>第一个块级元素</view>
<!--默认情况下块级元素框和伏击元素的width相同，刚好盛满内容区-->
<view style='border:solid 10px;margin:10px;padding:10px；'>第二个块级元素</view>
<!--即使宽度不足，仍然会占一行让其余元素换行-->
<view style='border:solid 1px;width:200px;'>第三个块级元素</view>
其他信息
<!--父级元素高度随内容决定，内容为块级元素-->
<view style='margin-top:10px;border:solid 1px;'>
<view style='height:30px;'>块级元素</view>
</view>
<!--父级元素高度随内容决定 内容为文本流情况-->
<view style='marigin-top:10px;border:solid 10px;'>
此处是文本此处是文本此处是文本此处是文本此处是文本此处是文本此处是文本此处是文本此处是文本
</view>

执行结果如下：

行内元素

除了块级元素，最常见的就是行内元素了，通过设置dispay属性为inline可以将一个元素设置为行内元素，小程序中<text/>就是一个行内组件。行内元素没有块级元素那么简单直接，块级元素只是生成框，通常不允许其他内容与这些框并存，行内元素特点总结如下：

• 和其他非块级元素都在一行上
• 盒子模型中高度、宽度、上下margin、上下padding设置均无效，只能设置左右margin和左右padding
• 宽度就是文字或图片的宽度，不可改变
• 行内元素宽度、高度都不能直接设置
• 行内元素只能容纳文本或其他行内元素，在行内元素中放置块级元素会引起不必要的混乱

如下示例代码：

[code]<!--块级元素-->
<view style='border:solid 1px #999;color:#999;'>我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素</view>后面的文字
<!--通过修改display属性的行内元素-->
<view style='border:solid 1px;margin:10px;pading:100 10px;display:inline'>我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素</view>后面的文字

执行结果如下：

大家可以对比块元素和行内元素的区别，我们设置了行内元素的margin，布局时上下margin都被忽略了，此处padding设置为0，但是无论什么值都不会影响布局，本例行内元素换行是因为上面的块级元素强制占位一行。

行内块元素

行内块元素是块级元素和行内元素的混合物，当dsiplay属性为inline-block时，元素就被设置为一个行内块元素，行内块元素可以设置宽、高、内边距和外边距，可以简单认为行内块元素是把块级元素以行的形式展现，保留了块级元素对宽、高、内边距、外边距的设置，它就像一张图一样放在一个文本行中

示例代码如下：

[code]<!--行内块元素宽度撑满父级宽度情况-->
前面的文字<view style='border:solid 1px;margin:10px;padding:10px;display:inline-block;'>我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素</view>后面的文字

<!--行内块元素不足父级宽度情况-->
前面的文字<view style='border:solid 1px;margin:10px;padding:10px;display:inline-block;'>我是行内块元素</view>后面的文字后面的文字

操作结果如下：