页面布局（微信小程序开发）

一、盒子模型：

1、width和height ：内容的宽度和高度。

2、padding -top、padding -right、padding-bottom和padding-let ：上内边距、右内边距、底内边距和左内边距。
3、border -top、border-right、border-bottom和 border -left ：上边框、右边框、底边
4、margin  top、margin-right、margin-bottom和margin-let ：上外边距、右外边距
底外边距和左外边距

因此，一个盒子实际所占有的宽度(高度)应该由“内容”+“内边距”+“边相“外边距”组成。

二、块级元素与行内元素

1、块级元素：

块级元素默认占一行高度，一行内通常只有一个块级元素(浮动除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。块级元素的特点如下

（1）一个块级元素占一行。
（2）块级元素的默认高度由内容决定，除非自定义高度。
（3）块级元素的默认宽度是父级元素的内容区宽度、除非自定义宽度。

（4）块级元素的宽度、高度、外边距及内边距都可以自定义设置。

（5）块级元素可以容纳块级元素和行内元素。
<view/>组件默认为块级元素，使用<view/>组件演示盒子模型及块级元素的示例代
码如下:

<!--index.wxml-->
<view style="border: 1px solid #f00;">块级元素1</view>
<view style="border: 1px solid #0f0; margin: 15px;padding: 20px;">块级元素2</view>
<view style="border: 1px solid #00f;width: 200px;height:80px;">块级元素3</view>
<view style="border: 1px solid #CCC;">
  <view style="height: 60px;">块级元素4</view>
</view>
<view style="border: 1px solid #f00;width: 100px;background-color: #CCC;">父级元素高度随内容决定，内容为文本</view>

运行结果：

2、行内元素：

行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中。它们不吉有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制面中文本的样式。将一个元素的display属性设置为inine后，该元素即被设置为行内元素。行内元素的特点如下:
(1)行内元素不能被设置高度和宽度，其高度和宽度由内容决定

(2)行内元素内不能放置块级元素，只级容纳文本或其他行内元素(3)同一块内，行内元素和其他行内元素显示在同一行。<ie/>组件默认为行内元素，使用<view/>及<texV>组件演示盒子模型及行内元素的示例代码如下:

<view style="padding: 20px;">
   <text style="border: 1px solid #f00;">文本1</text>
   <text style="border: 1px solid #0f0;margin: 10px;padding: 5px;">文本2</text>
   <view style="border: 1px solid #00f;display: inline;">块级元素设置为行内元素</view>一行显示不全，自动换行显示
</view>

运行结果：

3、行内块元素：

 当元素的 display 属性被设置为imnline-bock 时,元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。示例代码如下:

<view>
元素显示方式的<view style="display: inline-block;border:1px solid #f00;margin: 10px;padding: 10px;width: 200px;">块级元素，行内元素和行内快元素
</view>三种类型
</view>

运行结果：

 三、浮动

元素浮动与清除：

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。在CSS中，通过foat属性来定义浮动，其基本格式如下:
  { float :none |left |right ;}
其中

none--默认值，表示元素不浮动;
let--元素向左浮动;
right--元素向右浮动。

在下面代码中，分别对box1、box2、box3元素进行浮动：

<view>box1,box2,box3没浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
  <view style="border: 1px solid #0f0">box1</view>
  <view style="border: 1px solid #0f0">box2</view>
  <view style="border: 1px solid #0f0">box3</view>
</view>
<view>box1左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid #00f">box1</view>
<view style="border: 1px solid #0f0">box2</view>
<view style="border: 1px solid #0f0">box3</view>
</view>
<view>box1  box2 左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
  <view style="float: left;border: 1px solid #00f">box1</view>
  <view style="float: left;border: 1px solid #00f">box2</view>
  <view style="border: 1px solid #0f0">box3</view>
</view>
<view>box1 box2 左浮动 box3 右浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
  <view style="float: left;border: 1px solid #00f">box1</view>
  <view style="float: left;border: 1px solid #00f">box2</view>
  <view style="float: right;border: 1px solid #00f">box3</view>
</view>

运行结果：

清除浮动：

<view>box1 box2 左浮动 box3 清除左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
  <view style="float: left;border: 1px solid #00f">box1</view>
  <view style="float: left;border: 1px solid #00f">box2</view>
  <view style="clear: left;border: 1px solid #00f">box3</view>
</view>

 运行结果：

在父元素外添加一个空元素，实现父元素包裹浮动元素：

 //wxml
 

<view>box1 box2 box3  左浮动 在父元素后添加一个空元素</view>
<view style="border: 1px solid #f00;padding: 5px" class="clear-float">
  <view style="float: left;border: 1px solid #00f">box1</view>
  <view style="float: left;border: 1px solid #00f">box2</view>
  <view style="float: left;border: 1px solid #00f">box3</view>
</view>

//wxss

.clearfloat::after{
  display:block;clear:both;height:0;content:""
}

运行结果：