目录
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 项目属性