二、盒模型与页面布局

柠檬味少年~

已于 2024-05-10 16:30:21 修改

阅读量871

点赞数 10

文章标签：前端微信小程序

于 2024-04-26 22:36:08 首次发布

本文链接：https://blog.csdn.net/m0_73964567/article/details/137854690

版权

本文详细介绍了微信小程序中盒模型的概念、属性（如宽度、高度、内边距、边框、外边距和box-sizing），以及Flex弹性盒模型布局、line-height行高设置、navigator和Icon组件属性，同时还涵盖了浮动元素、margin外边距和input输入框组件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

盒模型

所有WXML元素都可以看做盒子，在WXSS中，“box model”这一术语是用来设计和布局时使用。盒模型本质上是一个盒子，封装周围的WXML元素，它包括：边距、边框、填充和实际内容。

盒模型属性

在微信小程序开发中，可以使用一些样式属性来控制盒模型的各个方面，包括内容、内边距、边框和外边距。以下是一些常用的盒模型属性：

宽度（width）和高度（height）：通过设置元素的宽度和高度属性，可以控制元素的尺寸。可以使用具体数值（如 px）或百分比来定义宽度和高度。

内边距（padding）：通过设置元素的 padding 属性，可以控制元素与内容之间的距离。可以使用具体数值（如 px）或百分比来定义内边距。

边框（border）：通过设置元素的 border 属性，可以定义元素的边框样式、宽度和颜色。可以使用具体数值（如 px）来定义边框宽度，使用颜色值来定义边框颜色。

外边距（margin）：通过设置元素的 margin 属性，可以控制元素与相邻元素之间的距离。可以使用具体数值（如 px）或百分比来定义外边距。

盒子模型属性（box-sizing）：box-sizing 属性是用来控制盒子模型的计算方式。默认情况下，盒子模型的宽度和高度只包含元素的内容区域，不包括 padding 和 border。可以通过设置 box-sizing 属性为 border-box，使得盒子模型的宽度和高度包含 padding 和 border。

以上是常用的一些盒模型属性，在微信小程序中可以通过在组件的样式属性中设置来控制元素的布局和样式。可以根据具体的需求选择合适的属性进行设置，以实现所需的盒模型效果。

边框和边距

边框样式设置

border-style(边框样式)

属性值如下所示：

none                 //默认无边框
dotted               //定义一个点线边框
dashed               //定义一个虚线边框
solid                //定义实线边框
double               //定义两个边框
groove               //定义3D沟槽边框（效果取决于边框的颜色值）
ridge                //定义3D脊边框（效果取决于边框的颜色值）
inset                //定义一个3D的嵌入边框（效果取决于边框的颜色值）
outest               //定义一个3D的突出边框（效果取决于边框的颜色值）

border-width(边框宽度)

border-color(边框颜色)

模型设置方法

单独设置各边

可以通过border-top、border-right、border-bottom、border-left属性设置不同侧面的边框

一次性设置边框属性

可以利用border属性一次性设置边框宽度、边框样式、和边框颜色。如border: 3px dashed #00f00

案例演示

index.wxml页面

index.wxss页面

app.wxss页面

显示界面

Flex页面布局

Flex弹性盒模型布局

Flex是Flexible Box的缩写，意为“弹性布局”，用来对盒状模型进行布局。如下所示：

容器布局属性

项目布局属性

line height属性

line-height 是一种用于设置元素行高的 CSS 属性。它可用于控制文本行之间的间距或行高度。

在微信小程序中，可以使用 line-height 属性来设置文本的行高。以下是 line-height 属性的一些常见用法：

数字值：可以设置具体的像素值或相对值来指定行高。例如，可以使用 line-height: 1.5; 来将行高设置为文本字体大小的 1.5 倍。

百分比值：可以使用百分比值来相对于父元素的字体大小来设置行高。例如，使用 line-height: 150%; 将行高设置为文本字体大小的 150%。

normal：使用 normal 值将行高设置为默认值。具体数值由浏览器决定。

inherit：使用 inherit 值将行高继承自父元素。

使用 line-height 属性时需注意以下几点：

line-height 可应用于块级元素和行内元素。

如果在一个容器内有多个行内元素，line-height 会影响到所有行内元素的行高。

对于多行文本的容器，line-height 的值应该大于等于文本的字体大小，以避免文字重叠或不可读的问题。

line-height 的值也可以是一个无单位的数值，表示与字体大小的乘积。

在微信小程序中，可以在组件的样式属性中使用 line-height 来设置文本的行高。例如：

<text style="line-height: 1.5;">这是一段文本。</text>

通过设置合适的 line-height 值，可以调整文本的行间距，以达到更好的阅读体验。

案例演示

index.wxml页面

app.wxss页面

显示界面

导航与布局

navigator组件属性

open-type的合法值

Icon图标组件的主要属性

案例演示

app.json页面

index.wxml页面

index.wxss页面

felx.wxml页面

felx.wxss页面

folat.wxml页面

folat.wxss页面

app.wxss页面

显示界面

Float页面布局

float属性

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

float属性的合法值

left        //元素向右移动
right       //元素向左移动
none        //默认值。元素不浮动，并会显示其在文本出现的位置
inherit     //规定应从父元素继承float属性的值

clear属性

清除浮动。

clear属性的合法值

left       //在左侧不允许有浮动元素
right      //在右侧不允许有浮动元素
both       //在两侧均不允许有浮动元素
nine       //默认值。允许浮动元素出现在左右两侧
inherit    //继承父元素clear属性的值

margin属性

用于设置元素的外边距。它可以控制元素与其相邻元素之间的间距。

margin属性的合法值

四个值      //可以设置上、右、下、左四个方向的外边距
              例如margin: 10px 20px 30px 40px;
              分别表示上边距为10px，右边距为20px，下边距为30px，左边距为40px。

三个值      //可以设置上、水平方向、下三个方向的外边距
              例如margin: 10px 20px 30px;
              分别表示上边距为10px，水平方向的外边距为20px，下边距为30px。

两个值      //可以设置上下、左右两个方向的外边距
              例如margin: 10px 20px;
              分别表示上下方向的外边距为10px，左右方向的外边距为20px。

一个值      //可以设置四个方向的外边距
              例如margin: 10px;，表示四个方向的外边距都为10px。

auto        //自动计算外边距，默认设置为0。

inherit     //继承父元素的外边距。

注意，margin属性不支持负值，即不能设置为负数。