第三章、页面布局

3.1 盒子模型

盒子模型就是我们在页面设计中经常用到的-种思维模型。在CSS中，一个独立的盒子模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)4个部分组成，如图：

此外，对padding、border和margin可以细化为上、下、左、右4个部分，在css中可以分别为其设置，如图：

3.2块级元素与行内元素

元素按显示方式分为块级元素、行内元素和行内块元素，他们显示方式由display属性控制。

3.2.1  块级元素

块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。块级元素的特点如下：
(1)一个块级元素占一行。
(2)块级元素的默认高度由内容决定，除非自定义高度。
(3)块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度。
(4)块级元素的宽度、高度、外边距及内边距都可以自定义设置。
(5)块级元素可以容纳块级元素和行内元素。

3.2.2 行内元素

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

3.3浮动与定位

3.3.1元素浮动与清除

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

在css中通过float属性来定义浮动，其有三种值为none（默认值，不浮动），left（元素向左浮动），right（元素向右浮动）。

在css中通过clear属性来定义清除浮动，其有四种值为none（不清除浮动），left（清除左侧浮动），right（清除右侧浮动），both（清除左右两侧浮动）。

浮动与清除练习代码图：

3.3.2元素定位

在css中，通过position属性可以实现对页面元素的精准定位。其属性值有static（默认值，该元素按照标准流进行布局），relative（相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它），absolute（绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响），fixed（固定定位，相对于浏览器窗口进行定位）

3.4 flex布局

flex布局主要由容器和项目组成，容器默认存在两根轴：水平的主轴和垂直的交叉轴，如图：

3.4.1 容器属性

flex容器支持的属性有7种，如图：

1.display，其子属性值为：

flex——块级flex布局，inline-flex——行内flex布局

​​​​​​​​​​​​​​

2.flex-direction，其子属性值为：

row——主轴为水平方向，起点在左端，row-reverse——主轴为水平方向，起点在右端，column——主轴为垂直方向，起点在顶端，column-reverse——主轴为垂直方向，起点在底端

3.flex-wrap，其子属性值为：

row——主轴为水平方向，起点在左端，row-reverse——主轴为水平方向，起点在右端，column——主轴为垂直方向，起点在顶端，column-reverse——主轴为垂直方向，起点在底端

4.flex-fow 

是 fex-direction 和 fex-wrap 的简写形式，默认值为row nowrap。

5. justify - content

justify-content 用于定义项目在主轴上的对齐方式。

6. align -items

align-items用于指定项目在交叉轴上的对齐方式

7. align - content

align-content用来定义项目有多根轴线(出现换行后)在交叉轴上的对齐方式，如果只有一根轴线，该属性不起作用。

3.4.2项目属性

容器内的项目支持6个属性，如图：

​​​​​​​

3.5 本章小结

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