第三章页面布局总结

3-1、盒子模型

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

 width：内容的宽度

heigth：内容的高度

border：盒子边框

margin：定义盒子与其它元素的空间距离

padding：定义内容与盒子边界的空间距离

此外可以将padding、margin和border进一步细分为上、下、左、右四个部分，在CSS中可以分别进行设置。

padding-top：上内边距；padding-bottom：下内边距；

padding-left：左内边距；padding-right：右内边距·；

margin-top：上外边距；margin-bottom：下外边距；

margin-left：左外边距；margin-right：右外边距；

border-top：上边框；border-bottom：下边框；

border-left：左边框；border-right：右边框；

一个盒子实际所占用的高度（宽度）应为 “内容” + “内边距” + “边框” + “外边距”。

CSS的布局基于盒子模型，不同类型的元素对盒子模型的处理不同。

3-2、块级元素和行内元素

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

1、块级元素：block

特点：

1、一个元素占一行；

2、可以设置宽高；

3、可以设置内、外边距；

4、可以容纳块级元素和行内元素；

<view style="border: 1px solid red;">块级元素</view>
<view style="border: 1px solid red; margin: 15px; padding: 20px;">块级元素2</view>
<view style="border: 1px solid red;width: 200px;height: 80px;">块级元素3</view>
<view style="border: 1px solid black;">
<view style="height: 60px;">块级元素4</view>
</view>
<view style="border: 1px solid red;width: 100px; background-color: aqua;">父级元素高度随内容决定，内容为文本</view>

 

2、行内元素：inline

特点：

1、不能设置宽高，其高度由内容决定；

2、不可以容纳块级元素，只能容纳文本和其它行内元素；

3、同一块内，行内元素和其它行内元素显示在同一行；

4、一行显示不全时自动换行；

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

 

3、行内块元素：inline - block

特点：

1、可以设置宽高；

2、同一行内显示；

3、空间不够时会自动换行；

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

 

3-3、浮动与定位

1、元素浮动与清除

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

在CSS中通过float属性来定义浮动：

{float:none|left|right;}

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

left：元素向左浮动；

right：元素向右浮动；

<view>box1,box2,没浮动</view>
<view style="border: 1px solid red;padding: 5px;">
<view style="border: 1px solid red;">box1</view>
<view style="border: 1px solid red;">box2</view>
<view style="border: 1px solid red;">box3</view>
</view>
、
<view>box1左浮动</view>
<view style="border:1px solid red;padding: 5px;">
<View style="float: left;border: 1px solid red;">box1</View>
<view style="border: 1px solid red;">box2</view>
<view style="border: 1px solid red;">box3</view>
</view> 
、
<view>box1,box2左浮动</view>
<view style="border:1px solid red;padding: 5px;">
<view style="float: left;border: 1px solid red;">box1</view>
<view style="float: left;border: 1px solid red;">box2</view>
<view style="border: 1px solid red;">box3</view>
</view>
、
<view>box1,box2,box3左浮动</view>
<view style="border:1px solid red;padding: 5px;">
<view style="float: left;border: 1px solid red;">box1</view>
<view style="float: left;border: 1px solid red;">box2</view>
<view style="float: left;border: 1px solid red;">box3</view>
</view>

 

在CSS中通过clear属性来清除浮动元素对其它元素的影响

left：清除左边元素浮动的影响；

right：清除右边元素浮动的影响；

both：清除左右两边元素浮动的影响；

none：不清除浮动；

{clear:left|right|both|none}

<view>box1,box2,box3左浮动</view>
<view style="border:1px solid red;padding: 5px;">
<view style="float: left;border: 1px solid red;">box1</view>
<view style="float: left;border: 1px solid red;">box2</view>
<view style="float: left;border: 1px solid red;">box3</view>
</view>
、
<view>box1,box2左浮动box3清除左浮动</view>
<view style="border:1px solid red;padding: 5px;">
<view style="float: left;border: 1px solid red;">box1</view>
<view style="float: left;border: 1px solid red;">box2</view>
<view style="clear: left;border: 1px solid red;">box3</view>
</view>

 

2、元素定位

在CSS中通过position属性可以实现对页面元素的精准定位。

{position:static|relative|absolute|fixed}

static：默认值，该元素按照标准流进行布局；

<view style="border: 1px solid red;width: 100px; height: 100px;">box1</view>
<view style="border: 1px solid red;width: 100px; height: 100px;">box2</view>
<view style="border: 1px solid red;width: 100px; height: 100px;">box3</view>

 

relative：相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它；

<view style="border: 1px solid red;width: 100px; height: 100px;">box1</view>
<view style="border: 1px solid red;width: 100px; height: 100px;">box2</view>
<view style="border: 1px solid red;width: 100px; height: 100px;">box3</view>

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

 

absolute：绝对定位，相对于其上一个已经定位的父元素进行定位，它对其后面的兄弟盒子的定位没有影响；

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

 

fixed：固定定位，相对于浏览器窗口进行定位；

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

3-4、flex布局

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

容器默认存在水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置叫做main start；结束位置叫做main end。

交叉轴的开始位置叫做cross start；结束位置叫做cross end；

设置display属性可以将一个元素指定为flex布局，设置flex-direction属性可以指定主轴方向。

1、容器属性

1.1、display

dispaly用来指定元素是否为flex布局，语法格式为：

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

其中，flex——块级flex布局，该元素变为弹性盒子；inline--flex——行内flex布局，行内容器符合行内元素的特征，同时在容器范围内又符合flex布局的规范；

设置了flex布局之后，子元素的float、clear、和vertical-align属性将失效。

1.2、flex-direction

用于设置主轴的方向，即项目排列的方向。

.boc{flex-direction;row |row-reverse |column |column-revers;}

其中，row-主轴为水平方向，起点在左端，当元素设置为flex布局时，主轴默认为row; 

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

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

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

1.3、flex -wrap

flex-wrap用来指定当项目在一根轴线的排列位置不够时，项目是否换行，其语法格式如下:       

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

其中，nowrap——不换行，默认值；

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

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

当设置换行时，还需要设置align-item 属性来配合自动换行，但align-item的值不能为"stretch”。

1.4、flex-flow

flex-flow是flex-direction和flex- wrap的简写形式，默认值为rownowrap。语法格式如下:

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

示例代码:

.box{flex-flow:row nowrap;}//水平方向不换行
.box{flex -flow;row-reverse wrap;}//水平方向逆方向换行
.box{flex -flow;column wrap -reverse;}//垂直方向逆方向换行

1.5、justify -content

justify-content用于定义项目在主轴上的对齐方式。语法格式如下:

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

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

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

fex-end——右对齐；

center——居中；

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

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

1.6、align -items

align -items用于指定项目在交叉轴上的对齐方式，语法格式如下:

box{align -items:flex-start lflex - end |center lbaseline |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 red;
  height: 100px;
  width: 50px;
  margin: 2px;
}
.item2{
  height: 80px;
}
.item3{ 
   display: flex;
  height: 50px;
  align-items: flex-end;
}
.item4{
  height: 120PX;
}

运行结果：

1.7、align-content

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

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

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

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

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

 2、项目属性

2.1、order

定义项目的排列顺序，数值越小排列越靠前（默认值为0）。 

.item{order:<number>;}

.wxml

 <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.2、flex-grow

定义项目的放大比例。（有多余空间时）

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

.wxml

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

运行结果：

 

2.3、flex-shrink

flex-shrink用来定义项目的缩小比例 。（当空间不够时）

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

.wxml

 <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: 3;">3</view>
  <view class="item" style="flex-shrink: 4;">4</view>
 </view>

运行结果：

 

 2.4、flex-basis

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

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

.wxml

 <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: 200px;">3</view>
  <view class="item">4</view>
 </view>

运行结果：

2.5、flex

flex属性是flex-grow、flex-shrink和flex-basis的简写。 

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

2.6、align-self

指定单独的伸缩项目在交叉轴上的对齐方式。该属性会重写默认的对齐方式。

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