微信小程序的布局

一、盒子模型：

　　margin(外边距)，边框外的区域，外边距是透明的；

　　border(边框)，围绕在内边距和内容外的部分；

　　padding（内边距），填充属性，是指内容周围的区域，内边距也是透明的；

　　content（内容），盒子的实际内容，用于展示页面组件。

　　在盒子模型中，确定内容位置的，是通过margin和padding这两个属性来确定的，而不是top,bottom,left,right等，这些属性在盒子模型中是失效的。

　　在文档流中，通过设置margin:0 auto;使元素水平居中，此方式只适合在普通文档流情况下，在绝对定位和浮动中，元素不在属于正常文档流，因此不适用。

二、显示方式Display：

　　display属性用来设定，元素是否显示或元素行内显示还是块级显示，以及flex布局也是需要通过设定display属性完成的。属于文档流的布局格式。

　　display:none和visibility:hidden属性都可以用来指定元素是可见还是隐藏。

　　display:none；隐藏某个元素的同时会释放元素占用的页面空间。

　　visibility:hidden；隐藏某个元素时，元素占用的空间不被释放，元素的布局依然起作用。

 三、定位Position：

四、浮动Float：

　　浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现类似word中“图文混排”。

　　定位方式：

　　浮动让元素脱离正常流，向父容器的左边或右边移动直到碰到包含容器的边【经测试碰到padding即停】或者碰到其他浮动元素。文本和行内元素将环绕浮动元素。

　　Note：

　　1、碰到容器的边指的是容器的padding内边。

　　2、浮动元素脱离正常流，意思是布局时后面元素当它不存在（文字还是当它存在，环绕其身边），但仍然在dom树上。后面的元素可能会被遮挡。

//index.wxml
<view class='view1'>红色</view>
<view class='view2'>绿色</view>
<view class='view3'>黄色</view>
//index.wxss
.view1{
  width: 300rpx;
  height: 300rpx;
  background-color: red;
    float: left;
}
.view2{
  width: 500rpx;
  height: 300rpx;
  background-color: green;
}
.view3{
  width: 300rpx;
  height: 300rpx;
  background-color: yellow;
}

　　浮动的包裹性和破坏性：

　　包裹性：包裹性指的是元素尺寸刚好容纳内容。可以利用浮动的包裹性来达到父容器自适应内部元素宽度。

　　破坏性：破坏性是指元素浮动后可能导致父元素高度塌陷。

　　浮动破坏性原理：

　　因为浮动元素被从文档正常流中移除了，父元素当然还处在正常流中，所以父元素不能被浮动元素撑大。

　　清除浮动—clear属性：

　　取值：

• • left:元素左侧不允许有浮动元素
  • ight:元素右侧不允许有浮动元素
  • both:元素左右两侧均不允许有浮动元素
  • none:默认值，允许浮动元素出现在两侧

五、Flex布局：

　　盒子模型有它的不足之处，如我们需要元素垂直居中布局的时候，或者设计元素根据屏幕形式自动伸缩的响应式页面的时候，仅仅依靠盒子模型很难实现。Flex布局意即弹性布局，也被称为柔性布局，它让子项目方便的改变宽度、高度和顺序，为盒子模型提供最大的布局灵活性。Flex布局的元素大小是可伸缩的，可根据需要扩展自己的尺寸来填满可用空间。而常规的文档流布局中方向是确定的，块就是从上到下，内联就是从左到右，而在flex布局中，方向是不可预知的。