第三章总结

目录

3.1 盒子模型

3.2 块级元素与行内元素

3.3 浮动与定位

3.4 flex布局

1.盒子模型

一个独立的盒子模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）4个部分组成。

一个盒子实际所占有的宽度（高度）应该由“内容”+“内边距”+“边框”+“外边距”组成。

2.块级元素

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

<view/>组件默认为块级元素，使用<view/>组件演示盒子模型及块级元素的示例代码如下：

<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>

显示效果：

3.行内块元素

当属性的display属性被设置为inline-block时，元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。

3.3 浮动与定位

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

{float:none |left |right;}

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

left——元素向左浮动；

right——元素向右浮动；

<view>box1,box2,box3 没浮动 </view>
<view style="border: 1px solid #f00;padding: 5px;"></view>
<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>
<view style="float: left;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 box2 左浮动 </view>
<view style="border: 1px solid #f00;padding: 5px;"></view>
<view style="float: left;border: 1px solid #0f0;">box1</view>
<view style="float: left;border: 1px solid #0f0;">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 #0f0;">box1</view>
<view style="float: left;border: 1px solid #0f0;">box2</view>
<view style="float: left;border: 1px solid #0f0;">box3</view>
</view>

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>

3.3.2 元素定位

通过position属性可以实现对页面元素的精准定位，基本格式：

{position:static |relative |absolute |fixed}

对box1、box2、box3进行元素静态定位，示例代码如下：

<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>

运行效果：

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

<!--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>

运行效果：

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

<!--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>

 运行效果：

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

<!--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>

3.4 flex布局

flex布局主要由容器和项目组成，采用flex布局的元素称为flex容器（flex container），flex布局的所有直接子元素自动成为容器的成员，称为flex项目（flex item）。

3.3.1 容器属性

1.dispaly 语法格式：

.box{display:flex |inline-flex;}

2.flex-direction

.box{ flex-direction:row|row-reverse |column-reverse;}

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

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

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

3.flex-wrap

.box{ flex-wrap:nowrap |wrap-reverse;}

nowrap——不换行，默认值；

wrap——换行，第一行在上方；

wrap——reverse——换行，第一行在下方。

flex - wrap不同值的显示效果：

4.flex-flow

.box{ flex-flow:<flex-direction>||<flex-wrap>;}

5. justify-content

.box{justify-content:flex-start |flex-end |center |space-between |space-around;}

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

flex-start——左对齐，默认值；

flex——end——右对齐；

center——居中

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

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

6.align - items

.box { align -items:flex-start |flex-end |center |baseline |stretch;}

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

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

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

center——交叉轴中线对齐；

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

stretch——如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器，此为默认值。

示例代码：

//.wxml
<view class="cont1">
<view class="item">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
<view class="item item4">4</view>
</view>
//wxss
.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 50px;
  margin: 2px;
}bg
.item2{
  height: 80px;
}
.item3{
  display: flex;
  height: 50px;
  align-items: flex-end;
}
.item4{
  height: 120px;
}

7.align—content

.box{ align - content:flex-start |flex-end | center |space - between |space - around |stretch}

align - content不同值的显示效果。

3.4.2 项目属性

1.order 语法格式：

.tem{ order: <number >;}

2.flex-grow

.item{ flex - grow: <number>;}

3.flex-shrink

.item{ flex-shrink: <number>;}

4.flex-basis

.item{ flex-basis:<number> |auto;}

5.flex

.item{flex:<flex-grow> | <flex-shrink> | <flex-basis>;}

6.align-self

.item{align-self:auto | flex-start | flex-end | center | baseline | stretcg;}