第三章 页面布局

3.1 盒子模型

盒子模型结构

盒子模型元素

width和height:宽度和高度

 padding-top、padding-rght、padding-bottom和 padding -left :上内边距、有内边距、底内边距和左内边距。
border -top、border-nght、border-bottom 和border -lef :上边框、右边框、底边框和左边框
margin-top、margin-night、margin-bottom 和 margin-left :上外边距、右外边距底外边距和左外边距。

3.2块级元素

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

(4)块级元素的宽度、高度、外边距及内边距都可以自定义设置。
(5)块级元素可以容纳块级元素和行内元素

使用<view>组件演示盒子模型及块元素的示例代码：

<view style="border: 1px solid #f00;">块级元素一</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;">父级元素sdasadasdas</view>

效果图：

 

3.2.2行内元素

(1)行内元素不能被设置高度和宽度，其高度和宽度由内容决定

(2)行内元素内不能放置块级元素，只级容纳文本或其他行内元索

(3)同一块内，行内元素和其他行内元素显示在同一行。
<text/>组件默认为行内元素，使用<vew/>及<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.2.3行内块元素

行内块元素示例代码：

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

效果图：

3.3浮动与定位 

3.3.1元素浮动与清除

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。在CSS中，通过float属性来定义浮动，其基本格式如下
{float :none lleft lright;}
其中，none--默认值，表示元素不浮动;
lef--元素向左浮动:
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 #f00;padding:5px">box1</view>
  <view style="float: left;border: 1px solid #0f0;padding:5px">box2</view>
  <view style="border: 1px solid #0f0;padding:5px">box3</view>
  </view>
  <view>box1,box2,box3左浮动</view>
  <view style="border: 1px solid #f00;padding:5px">
   <view style="float: left;border: 1px solid #0f0;padding:5px">box1</view>
  <view style="float:right;border: 1px solid #0f0;padding:5px">box2</view>
  <view style="float: left;border: 1px solid #0f0;padding:5px">box3</view>
  </view>

效果代码如图：

 由于浮动元素不再占用原文档流的位置，因此它会对页面中其他元素的排列产生影响在CSS中，clear属性用于清除浮动元素对其他元素的影响，其基本格式如下:{clear:left  | right | both |none}

left:清除左边浮动的影响，也就是不允许左侧有浮动元素

right:清除右边浮动的影响，也就是不允许右侧有浮动元素

both:-同时清除左右两侧浮动的影响

none:不清除浮动

示例代码：

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

 运行效果图：

另外可以在父元素添加一个空元素，实现包裹浮动元素。 示例代码：

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

运行效果图：

3.3.2元素定位

浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在CSS中，通过position属性可以实现对页面元素的精确定位。基本格式如下:
{position:static |relative | absolute | fixed}
其中，static--默认值，该元素按照标准流进行布局;

 //static 默认属性
 <view  style="border: 1px solid #f00;width: 100px;height: 100px;">box1</view>
  <view  style="border: 1px solid #f00;width: 100px;height: 100px;">box2</view>
  <view  style="border: 1px solid #f00;width: 100px;height: 100px;">box3</view>

对 box1、box2、box3 进行元素相对定位，示例代码如下: 

<view  style="border: 1px solid #f00;width: 100px;height: 100px;">box1</view>
  <view  style="border: 1px solid #f00;width: 100px;height: 100px;position: relative;left: 30px;top: 30px;">box2</view>
  <view  style="border: 1px solid #f00;width: 100px;height: 100px;">box3</view>
</view>

 对 box1、box2、box3 进行元素绝对定位，示例代码如下: 

 <view  style="border: 1px solid #f00;width: 100px;height: 100px;">box1</view>
  <view  style="border: 1px solid #f00;width: 100px;height: 100px;position:absolute ;left: 30px;top: 30px;">box2</view>
  <view  style="border: 1px solid #f00;width: 100px;height: 100px;">box3</view>

对 box1、box2、box3 进行元素固定定位，示例代码如下:  

<view  style="border: 1px solid #f00;width: 100px;height: 100px;">box1</view>
  <view  style="border: 1px solid #f00;width: 100px;height: 100px;position: fixed;left: 30px;top: 30px;">box2</view>
  <view  style="border: 1px solid #f00;width: 100px;height: 100px;">box3</view>

 运行结果如下：

 对 box1、box2、box3 进行父元素采用相对定位，将box2采用绝对定位示例代码如下:  

<view style="position: relative; top: 50px;left:50px;border: 1px solid #00f;">
  <view  style="border: 1px solid #f00;width: 100px;height: 100px;">box1</view>
  <view  style="border: 1px solid #f00;width: 100px;height: 100px;">box2</view>
  <view  style="border: 1px solid #f00;width: 100px;height: 100px;">box3</view>
</view>

 运行效果如图：

 对 box1、box2、box3 进行父元素采用相对定位，将box2采用固定定位示例代码如下: 

<view style="position: absolute; top: 50px;left:50px;border: 1px solid #00f;">
  <view  style="border: 1px solid #f00;width: 100px;height: 100px;">box1</view>
  <view  style="border: 1px solid #f00;width: 100px;height: 100px;position: fixed;left: 30px;top: 30px;">box2</view>
  <view  style="border: 1px solid #f00;width: 100px;height: 100px;">box3</view>
</view>

运行结果：

3.4flex布局

 

3.4.1容器属性：

 1.display
display用来指定元素是否为fex布局，语法格式为!
boxidisplay:flex linline -flex;}
其中，flex--块级fex布局，该元素变为弹性盒子;
inline -fex--行内fex布局，行内容器符合行内元素的特征，同时在容器内又符合fex 布局规范。
设置了 fex布局之后，子元素的foat、clear 和 vertical-align 属性将失效。
2. flex - direction
fex-direction 用于设置主轴的方向，即项目排列的方向，语法格式为:
box{flex -direction:row |row -reverse |column lcolumn -reverse;}

其中，row--主轴为水平方向，起点在左端，当元素设置为ex布局时，主轴默认为row;row-reverse--主轴为水平方向，起点在右端;column--主轴为垂直方向，起点在顶端:column-reverse--主轴为垂直方向，起点在底端图3-13 所示为元素在不同主轴方向下的显示效果

3.flex-wrap

 

 

4.flex-flow 

 

5.jutify -content

6.align-items

 

 7.align-content

3.4.2项目属性

1.order

示例代码：

<view class="cont1">
<view class="item">1</view>
<view class="item ">2</view>
<view class="item ">3</view>
<view class="item ">4</view>
</view>
<view class="cont1">
<view class="item "style="order:1">1</view>
<view class="item "style="order:2">2</view>
<view class="item "style="order:3">3</view>
<view class="item ">4</view>
</view>

 运行截图：

2.flex -grow

示例代码： 

<view class="cont1">
<view class="item">1</view>
<view class="item ">2</view>
<view class="item ">3</view>
<view class="item ">4</view>
</view>
<view class="cont1">
<view class="item ">1</view>
<view class="item "style="flex-grow:1">2</view>
<view class="item "style="flex-grow:2">3</view>
<view class="item ">4</view>
</view>

运行结果：

 

3.flex-shrink

示例代码：

<view class="cont1">
<view class="item">1</view>
<view class="item ">2</view>
<view class="item ">3</view>
<view class="item ">4</view>
</view>
<view class="cont1">
<view class="item ">1</view>
<view class="item "style="flex-shrink:2">2</view>
<view class="item "style="flex-shrink:1">3</view>
<view class="item "style="flex-shrink:4">4</view>
</view>

效果图：

 

 

4.flex-basis 

示例代码 :

<view class="cont1">
<view class="item">1</view>
<view class="item ">2</view>
<view class="item ">3</view>
<view class="item ">4</view>
</view>
<view class="cont1">
<view class="item ">1</view>
<view class="item "style="flex-basis:100px:2">2</view>
<view class="item "style="flex-basis:200px">3</view>
<view class="item">4</view>
</view>

运行效果图：

 

5.flex 

fex属性是fex-grow、flex-shrink 和fex-basis 的简写，其默认值分别为0、1、auto语法格式如下:
.item {flex: <flex -grow >|<flex -shrink >l<flex -basis >;}
度比容器多160个项目将被等比储缩小比例为 1:2:1
 

6.align - self
align - self 属性用来指定单独的伸缩项目在交叉轴上的对齐方式。该属性会重写默认的对齐方式。语法格式如下:
.item { align _ self: auto lflex _ start lflex - end lcenter lbaselinestretch;}
在该属性值中，除了 ao 以外，其余属性值和容器aign-items 的属性值完全一致。auto 表示继承容器 align -items 的属性，如果没有父元素，则等于 stretch(默认值) 

本章小结3.5
本章首先介绍了页面布局中最基本的盒子模型，接下来介绍了浮动和定位，最后重点讲解了 nex 布局的基本原理、容器和项目的相关属性。大家学好这些内容，可为小程序项目的布局打下良好的基础。