小程序开发 布局详解(CSS布局)

前言

  小程序的布局，其实就是CSS布局，CSS （Cascading Style Sheet）可译为“层叠样式表 ”或“级联样式表”。其核心思想就是盒子模型。然后通过大盒套小盒，最后使用Position属性或者display来描述小盒在大盒中的相对或者绝对位置。

盒子模型

盒子模型的基本概念Margin外边距、Border边框、Padding内边距、以及决定内容大小的宽度与高度。如下图。 除此之外还有一个很重要的概念display

 

Width与Height

通过px像素设置宽高

wxml

<!--pages/main/main.wxml-->
<view class="myBox">
</view>

wxss

这里备注一下，下面的Page是指当前页面的根元素

/* pages/main/main.wxss */
Page{
    width: 100%;
    height: 100%;
    background-color: gray;
}

.myBox{
    width: 100px;
    height: 100px;
    background-color: yellow;
}

效果图

以百分比%设置宽高

设置百分比的大小是相对父类布局的

wxml

<!--pages/main/main.wxml-->
<view class="myBox">
</view>

wxss

Page{
    width: 100%;
    height: 100%;
    background-color: gray;
}
/* 这里的width与height都设置成50% */
.myBox{
    width: 50%;
    height: 50%;
    background-color: yellow;
}

效果图：

以vw和vh设置宽高

vw与vh都是以视窗大小来设置元素大小的，例如1vh等于视窗高度的1%。 另外vw与vh在flex弹性布局下是不起作用的(因为与弹性布局定义冲突了)

wxml

<view class="myParentBox">
    <view class="myChildBox" >子元素</view>
</view>

wxss

Page {
    width: 100%;
    height: 100%;
    background-color: gray;
}

/* 这边将父类容器的宽高都设置成50% */
.myParentBox {
    width: 50%;
    height: 50%;
    background-color: blue;
}

/* 子元素的宽高都使用vw设置，以证明vw只受到视图大小限制，不受父类容器限制 */
.myChildBox {
    width: 60vw;
    height: 30vh;
    background-color: yellow;
    text-align: center;
}

效果图：

margin外边距

看下面的效果图(灰色的Page背景出来了)，你可能会出现疑问，为什么margin-top会影响到父类容器？，这是因为：

所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

只要在下面方式中选一个，就可以避免这种情况出现。

1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）

2、为父元素添加overflow：hidden；样式即可（完美）

3、为父元素或者子元素声明浮动（float：left；可用）

4、为父元素添加border（border:1px solid transparent可用）

wxml

<!--pages/main/main.wxml-->
<view class="myParentBox">
    <view class="myChildBox" >子元素</view>
</view>

wxss

Page {
    width: 100%;
    height: 100%;
    background-color: gray;
}

.myParentBox {
    width: 100%;
    height: 100%;
    background-color: yellow;
}

.myChildBox {
    width: 100px;
    height: 100px;
    background-color: brown;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-right: 30px;
}

效果图：

border边框

简单的边框

wxml

<view class="myParentBox">
    <view class="myChildBox"></view>
</view>

wxss

Page {
    width: 100%;
    height: 100%;
    background-color: gray;
}

.myParentBox {
    width: 100%;
    height: 100%;
    background-color: grey;
}

.myChildBox {
    width: 100px;
    height: 100px;
    background-color: hotpink;
    /* 10px是边框的宽度  solid表明边框类型是实体的 greenyellow则是边框的颜色  */
    border: 10px solid greenyellow;
}

效果图

指定某个方向上的边框

下面指定了top这个方向上的边框

wxss

.myChildBox {
    width: 100px;
    height: 100px;
    background-color: hotpink;
    border-top: 10px solid goldenrod;
}

效果图

虚线边框

wxss

.myChildBox {
    width: 100px;
    height: 100px;
    background-color: hotpink;
    /* 实现虚线边框需要将边框的样式修改成dashed  */
    border: 10px dashed greenyellow;
}

效果图

圆角边框

wxss

.myChildBox {
    width: 100px;
    height: 100px;
    background-color: hotpink;
    border: 10px solid greenyellow;
    border-radius: 25px;
}

效果图

指定位置的圆角

wxss

.myChildBox {
    width: 100px;
    height: 100px;
    background-color: hotpink;
    border: 10px solid greenyellow;
    border-bottom-left-radius: 25px;
}

效果图

padding内边距

wxml

<!--pages/main/main.wxml-->
<view class="myParentBox">
    <view class="myChildBox">内容</view>
</view>

wxss

/* pages/main/main.wxss */
Page {
    width: 100%;
    height: 100%;
    background-color: gray;
}

.myParentBox {
    width: 100%;
    height: 100%;
    background-color: grey;
}

.myChildBox {
    width: 100px;
    height: 100px;
    background-color: hotpink;
    border: 10px solid greenyellow;
    padding: 10px;
}

 效果图

background-image

效果图

wxml

注意要设置background-size: 100% 100%; 才会显示出内容

background-repeat 为背景是否重复排列

background-clip 为背景裁决样式

          <View class="swiper-item" style="background-image: url({{item.deviceImageUrl}}); background-size: 100% 100%; background-repeat:no-repeat; background-clip: content-box;">
            </View>

display

 

View不滚动

需要添加overflow: hidden; 属性，并且添加一个固定的宽度与高度，不能用%设置。

js

.root-container{
    width: 100%;
    height: 100vh;
    display: flex;
    overflow: hidden;
    flex-direction: column;
}

 指定方向不滚动，如下代码让y轴滚动，x轴固定

.msg-container {
    width: 100vw;
    overflow-x: hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

 

End