第三章总结

盒子模型

盒子模型由边框（border）、内边距（padding）、外边距（margin）、内容（content）组成。

块级元素与行内元素
1.块级元素
<view>组件默认为块级组件

特点：

（1）一个块级元素占一行（添加新的块级元素自动换行）。

（2）块级元素的默认高度由内容决定，除非自定义高度。

（3）块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度。

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

（5）块级元素可以容纳块级元素和行内元素。

示例代码：

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

2.行内元素

<text>组件默认为行内元素

特点：

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

（2）同一块内，行内元素和其他行内元素显示在同一行。

（3）行内元素内不能放置块级元素，只级容纳文本或其他行内元素。

示例代码：

<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属性被设置为inline-block时，元素设置为行内块元素。

可以设置高度、宽度和元素显示在同一行。

示例代码：
 

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

浮动与定位

元素浮动与清除

元素浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。

float属性来定义浮动

none——默认值，表示元素不浮动

left——元素向左浮动

right——元素向右浮动

clear属性用于清除浮动元素对其他元素的影响

left——清除左边浮动的影响

right——清除右边浮动的影响

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

none——不清除浮动

元素定位

position属性来实现对页面元素的精确定位

static:默认值

relative:相对定位

absolute:绝对定位

fixed：固定定位

静态定位：

<!--三个元素均为定位-->
<view style="border:1px solid #0f0;width:100px;height:100px">box1</view>
<view style="border:1px solid #0f0;width:100px;height:100px">box2</view>
<view style="border:1px solid #0f0;width:100px;height:100px">box3</view>

相对定位：
 

<!--box2元素相对定位relative top:30px left:30px-->
<view style="border:1px solid #0f0;width:100px;height:100px">box1</view>
<view style="border:1px solid #0f0;width:100px;height:100px;position:relative;left:30px;top:30px">box2</view>
<view style="border:1px solid #0f0;width:100px;height:100px">box3</view>

绝对定位：
 

<!--box2元素绝对定位absolute top:30px left:30px-->
<view style="border:1px solid #0f0;width:100px;height:100px">box1</view>
<view style="border:1px solid #0f0;width:100px;height:100px;position:absolute;left:30px;top:30px">box2</view>
<view style="border:1px solid #0f0;width:100px;height:100px">box3</view>

固定定位：

<!--box2元素固定定位fixed top:30px left:30px-->
<view style="border:1px solid #0f0;width:100px;height:100px">box1</view>
<view style="border:1px solid #0f0;width:100px;height:100px;position:fixed;left:30px;top:30px">box2</view>
<view style="border:1px solid #0f0;width:100px;height:100px">box3</view>

flex布局

flex布局主要由容器和项目组成

cross axis:为交叉轴

main axis:为主轴

1.容器属性

（1)display 
flex——块级flex布局，该元素变为弹性盒子

inline-flex——行内flex布局，行内容器符合行内元素的特征，同时在容器内又符合flex布局规范

（2)flex-direction
a、row——主轴为水平方向，起点在左端

b、row-reverse——主轴为水平方向，起点在右端

c、column——主轴为垂直方向，起点在顶端

d、column-reverse——主轴为垂直方向，起点在底端

（3）flex-wrap

a、nowrap——不换行，默认值

b、wrap——换行，第一行在上方

c、wrap-reverse——换行，第一行在下方

（4）flex-flow
row nowrap——默认值  

是flex-direction和flex-wrap的组合形式

（5）justify-content
justify-content——与主轴方向有关，默认主轴水平对齐，方向从左到右

a、flex-start——左对齐，默认值

b、flex-end——右对齐

c、center——居中

d、space-between——两端对齐，项目之间的间隔都相等

e、space-around——每个项目两侧的间隔相等

（6）align-items
align-items——与交叉轴方向有关，默认交叉由上到下

flex-start——交叉轴起点对齐

flex-end——交叉轴终点对齐

center——交叉轴中线对齐

baseline——项目根据它们第一行文字的基线对齐

stretch——如果项目位设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器

（7） align-content

space-content——与交叉轴两端对齐，轴线之间的间隔平均分布

space-around——每根轴线两侧的间隔都相等，轴线之间的间隔比轴线轴线于边框之间大一倍

其余属性值的含义与align-items属性的含义相同

2.项目属性

（1）order（顺序）

数值越小，排名越靠前，默认值为0

<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:3">2</view>
    <view class="item" style="order:2">3</view>
    <view class="item">4</view>
</view>

（2）flex-grow（放大）

默认值为0，即不放大

<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（缩小）

默认值为1，如果空间不足，该项目将被缩小

<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（进行缩放）

定义伸缩项目的基准值，剩余的空间将按比例进行缩放，默认值：auto

<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</view>
    <view class="item" style="flex-basis:150px">3</view>
    <view class="item" style="flex-basis:80px">4</view>
</view>

（5）flex

是对flex-grow、flex-shrink、flex-basis的简写，默认值为0、1、auto

<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：1 1 auto">2</view>
    <view class="item" style="flex:0 1 20px">3</view>
    <view class="item" style="flex:1 0 40px">4</view>
</view>

（6）align-self

该属性会重写默认的对齐方式，除了auto以外，其余属性与容器align-items属性一致

<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 item2"style="align-self:flex-end">2</view>
    <view class="item">3</view>
    <view class="item">4</view>
</view>