第三章总结

盒子模型

微信小程序的视图层由WXML和WXSS组成。其中，WXSS(WeiXin Style Sheets)是基于CSS拓展的样式语言，用于描述WXML的组成 -边框（border）样式，决定WXML 的组件如何显示。WXSS具有 外边距(margin）CSS的大部分特性。

width和heighe  内容的宽度和高度。

padding -top、padding-right、padding-bottom 和 padding-left 上内边距、右内边巨、底内边距和左内边距。

border -top、border -right、border - bottom 和border -left 上边框、右边框、底边和左边框。

margin -top、margin- right、margin - bottom 和 margin -left 上外边距、右外边距底外边距和左外边距。

块级元素

块级元素的宽度，高度，外边距，内边距都可以自定义设置。

</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;">kuaijiyuanshu4</view>
</view>
<view style="border: 1px solid#f00;width: 100px;background-color: #ccc">neir</view>

效果：

行内元素

同一快内，行内元素和其他行内元素显示在同一行。

<view style="padding: 20px;">
<text style="border: 1px solid#f00;">wb1</text>
<text style="border: 1px solid #0f0;margin: 10px;padding: 5px">wb2</text>
<view style="border: 1px solid#00f;display: inline;">kuaiji</view>
</view>

效果：

行内块元素

行内块元素可以被设置高度，宽度，内边距和外边距。

<view>yuans<view style="display: inline-block;border: 1px solid#f00;margin: 10px;padding: 10px;width: 200px;">kjxnys</view>szlx
</view>

效果：

浮动与定位

none  元素不浮动

left  元素向左浮动

right  元素向右浮动

不浮动：

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

右浮动：

<view>box1右浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
  <view style="float: right;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左浮动 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>

添加一个空元素：

<view>box1 box2 box3 左浮动 在父元素后添加一个空元素</view>
<view style="border: 1px solid #f00;padding: 5px;"class="clearfloat">
<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>

效果：

元素定位

static 默认值，概预算按标准布局

relative 相对定位

adsolute 绝对定位

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>

 效果：

flex布局

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

.order属性

<view class="cont">
<view class="item" >1</view>
<view class="item" >2</view>
<view class="item" >3</view>
<view class="item" >4</view>
</view>
<view class="cont">
<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>
 

.cont{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  background-color:skyblue;
  margin: 10px;
}

效果：

.flex-grow

<view class="cont">
<view class="item">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
<view class="item item4">4</view>
</view>
<view class="cont">
<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>
 

.cont{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  background-color:skyblue;
  margin: 10px;
}

效果：

.flex-shrink

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

.cont,.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  background-color:skyblue;
  margin: 10px;
}
.cont .item{
  width: 70px;
}
.cont1 .item{
  width: 120px;
}

效果：

.flex-basis

<view class="cont">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont">
<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>
 

.cont{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  background-color:skyblue;
  margin: 10px;
}
 

效果：