携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

项目中常常会遇到UI设计的页面，某些块需要覆盖某些块上面的情况，这时候常常会用绝对定位来布局需要覆盖的元素，但是元素被绝对定位之后，踏会脱离文档流，导致其后面的元素会占据这个元素的空间，导致页面混乱，此时这个需要定位的元素的高度又是不一定的。解决这个问题之前先来温习一下关于文档流和定位的基础知识吧。

什么是文档流

页面的元素都是盒模型，都会占据空间，自上而下，自左而右的排列，这就是所谓的文档流。

脱离文档流

当元素脱离文档流后就不再占据空间，而是处于浮动状态，相当于浮在其他元素上方，那么后面的元素就会忽略这个元素并占据这个元素原来的空间，页面会出现混乱的情况

怎样脱离文档流

float

浮动float: none|left|right，常用于让页面中的元素水平排列

absolute

绝对定位，设置absolute后的元素，会脱离文档流相对于父类进行定位，（如果父类不满足就向上查询）。父类必须是元素的position为非static（默认）定位的。绝对定位元素可以设置外边距，且不会与其他边距合并。定位可以通过上下左右属性决定。开启后如果不设置偏移量则元素的位置不会发生任何变化，元素会从文档流中脱离（后面的元素占据该元素的空间）

fixed

固定定位，完全脱离文档流，相对于浏览器窗口（html）进行定位

元素的层级

可以通过z-index属性来指定元素的层级 z-index需要一个整数作为参数，值越大的层级越高，元素的层级越高，越优先显示如果元素的层级一样，则优先显示靠下的元素

元素水平垂直居中

利用定位居中

<div class="box1">
  <div class="box2"></div>
</div>

.box1{
    position: relative;
    width: 200px;
    height: 200px;
}

.box2{
    position:absolute;
    width: 100px;
    height: 100px;
    left : 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

icon和文字如何对齐

经常会遇到图标和文字不能对齐的情况，总结一下

<view class="item">
    <image src="/resources/icon1.png"></image>
    <text>官方文件</text>
</view>

.item {
    height: 72rpx;
    line-height: 72rpx;
    vertical-align: middle;
    text-align: center;
}

可以实现flex布局，简单且高效

.item {
    display: flex;
    align-items: center;
    justify-content: center;
}

下次遇到，直接flex走起。

css网页布局