盒子模型
简介：盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS 中，一个独立的盒子模型由内 width 内容(content)、内边距(padding)、边框(border)
所示。和外边距(margin)4个部分组成
二、块级元素与行内元素
1、块级元素
(1)一个块级元素占一行。
(2)块级元素的默认高度由内容决定，除非自定义高度。
(3)块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度。 (4)块级元素的宽度、高、外边距及内边距都可以自定义设置。 (5)块级元素可以容纳块级元素和行内元素。
代码示例：
<!-- 每个块级元素占一行 -->
<view style="border: 1px solid #f00;text-align: center;">块级元素1</view> -->
<!-- 块级元素的宽度等于父级元素的宽度减去内边距的宽度 -->
<view style="border: 1px solid #0f0;margin: 15px;padding: 20px;text-align: center;">块级元素2</view>
<!-- 块级元素的宽度、高度自定义设置 -->
<view style="border: 1px solid #00f;width: 200px;height: 80px;text-align: center">块级元素3</view>
<!-- 块级元素的高度随内容决定，内容为块级元素 -->
<view style="border: 1px solid #ccc;text-align: center"><view style="height: 60px;">块级元素4</view></view>
<!-- 块级元素的高度随内容决定，内容为文本元素，块级元素的宽度为100px -->
<view style="border: 1px solid #f00;width: 100px;background-color: #ccc;text-align: center">父级元素高度随着内容决定，内容为文本</view>2、行内元素
（1）行内元素不能被设置高度宽度，其高度宽度有内容决 (2)行内元素内不能放置块级元素，只级容纳文本或其他行内元素 (3)同一块内，行内元素和其他行内元素显示在同一行。<text/>组件默认为行内元素
代码示例：
<view style="padding: 20px;">
<text style="border: 1px solid #f00;">文本1</text>
<text style="border: 1px solid #00f;margin: 10px;padding: 5px;">文本2</text>
<view style="border: 1px solid #00f;display: inline;">块级元素设置为行内元素</view>
一行显示不全，自动换行显示
</view>3、行内块元素
1.当元素的display属性被设置为inline-block时，元素被设置为行内块元素
代码示例：
<!-- 行内块元素 -->
<view>
元素显示方式的
<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">块级元素、行内元素、行内块元素
</view>三种类型
</view>4、元素的浮动与清除浮动
简介：元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素指定位置的过程。
（1）浮动属性：
1、none--默认值，表示不浮动
2、left--元素向左浮动；
3、right--元素向右浮动；
运行结果：
代码示例：
<view>box1左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<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>（2）清除浮动
清除浮动的属性值：
1、left---清楚左边浮动的影响，也就是不允许左侧有浮动元素；
2、reight--清除右边浮动的影响，也就是不允许右侧有浮动的元素
3、both---同时清除左右两侧浮动的影响
4、none--不清楚浮动
代码示例：
<view>box1，box2,box3左浮动 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>运行结果：
5、元素的定位
浮动布局虽然灵活，但无法对元素的位置进行精确的控制。但在css中，可以通过position属性来进行页面元素的精确定位
定位属性值：
1、static--默认值，该元素按照标准流进行布局
2、relative--相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流对待它
3、absolute--绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响
4、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>
相对定位
<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>
绝对定位
<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>
固定定位
<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> 运行结果：
6、flex布局
简介：flex布局主要由容器和项目组成，采用flex布局的元素成为flex容器（flex container），flex布局的所有直接子元素自动成为容器的成员，成为flex项目
flex容器支持的属性有7种，如表
| 属性名 | 功能 |
| display | 指定元素是否为flex布局 |
| flex - direction | 指定主轴方向，决定项目的排列方式 |
| flex - wrap | 定义项目如何换行(超过一行时) |
| flex- flow | flex - direction和flex- wrap的简写形式 |
| justify -content | 定义项目主轴上的对齐方式 |
| align - items | 定义项目在交叉轴的对齐方式 |
| align - content | 定义多根轴线的对齐方式 |
1.dispiay：flex--弹性布局
2.flex-direction
row一-主轴为水平方向，起点在左端，当元素设置为flex布局时，主轴默认为row
row - reverse-主轴为水平方向，起点在右端; column--主轴为垂直方向，起点在顶端;
column - reverse-主轴为垂直方向，起点在底端。
效果图：
3.flex--wap
nowrap--不换行，默认值;
wrap--换行,第一行在上方;
wrap - reverse--换行
效果图：
4.flex--flow
flex - flow是 flex - direction和flex -wrap的简写形式，默认值为row nowrap。没有添加新的值，属性值都从 flex - direction和flex -wrap中提取。
代码示例
.box{flex -flow:row nowrap;} //水平方向不换行
.box{flex -flow:row -reverse wrap;} //水平方向逆方向换行
.box|flex - flow;column wrap-reverse;}//垂直方向逆方向换行5.justify - content
justify -content用于定义项目在主轴上的对齐方式。
justify-content-与主轴方向有关，默认主轴水平对齐，方向从左到右;
1.flex-start--左对齐，默认值; 2.flex - end-右对齐; 3.center---居中;
4.space-between--两端对齐，项目之间的间隔都相等; 5. space -around-每个项目两侧的间隔相等。
效果图：
6.align--items
align -items用于指定项目在交叉轴上的对齐方式 1.flex - start-交叉轴起点对齐;
2.flex - end--交叉轴终点对齐;
3.center---交叉轴中线对齐;
4.baseline-项目根据它们第一行文字的基线对齐;
5.stretch--如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器，为默认值
代码示例：
wxml代码：
<view class ="cont1">
<view class = "item">1</view>
<view class = *item item2 ">2 </view ><view elass = "item item3 ">3 </view><view class ="item item4 ">4 </view ></iew >
wxss代码：
.cont1{
display: flex;
flex -direction:row;
align-items;baseline;}
.item1{
background -color: #ccc; border:lpx solid #£00; height:100px; width:50px; margin:2px;}
.item2
{height:80px;}
.item3{
display: flex;
ch height:50px;
align-items:flex -end;
.item4{
height:120px;运行效果：
7.align-content
1.flex-start
2.center
3.flex-end
效果图：
项目属性：
| 属性名 | 功能 |
| order | 定义项目的排列顺序 |
| flex - grow | 定义项目的放大比例(当有多余空间时) |
| flex - shrink | 定义项目的缩小比例(当空间不足时) |
| flex - basis | 定义在分配多余空间之前，项目占据的主轴空间 |
| flex | flex -grow、flex - shrink、flex-basis 的简写 |
| align- self | 用来设置单独的伸缩项目在交叉轴上的对齐方式 |
1.oeder
order属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0；
语法格式：
.item{order：<number>;}代码示例：
<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
flex-grow定义项目的放大比例，默认值为0，即不放大
语法格式：
.item{flex-grow：<number>;}代码示例：
<view class ="contl">
<view class ="item" >1 </view >
<view class ="item" >2 </view >
<view class ="item" >3 </view>
<view class ="item" >4</view ></view >
<view class ="contl">
<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
flex-shrink用来定义项目的缩小比例，默认值1，如果空间不足，该项目将被缩小
语法格式：
.item{flex-shrink:<number>;}代码示例：
<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
flex-basis属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为auto
语法格式：
.item{flex-basis:<number>|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:200px" >3</view >
<view class = "item" >4 </view ></view >效果：
5.flex
flex属性是flex-grow、flex-shrink、flex-basis的简写
6.align-self属性用来指定单独的伸缩项目在交叉轴上的对齐方式。
1288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
