本文共 1797 字，大约阅读时间需要 5 分钟。

陆续补全 ~

因无PC前端基础，个人理解应基于CSS的属性

2019/11/4 补入：针对掌握前端Html、Css的人群，可以忽略此篇内容

display: 组件内的元素显示方式。通常设置为flex，使元素更加灵活。

入门属性

• 宽、高
• 行高
• 颜色
• 背景色
• 字体
• 字体粗细
• 单行展示
• 不换行(搭配使用)

宽、高

方式一(具体)width: 100rpx;height: 100rpx;方式二（区间）width: 100%;height: 100%

行高

line-height: 44rpx;

颜色

color: red;

背景色

background-color: #eee;

字体

font-size: 50rpx;

字体粗细

取值范围100-900，正常：400，加粗：700，font-weight: 700;

单行展示 ( 搭配使用 标记A )

display: inline-block;

不换行 ( 搭配使用 标记A )

white-space: nowrap;

进阶属性

• 排序方向
• 居中方式
• margin 外边距
• padding 内边距

排序方向

flex-direction : column 或 row；// column表示按列排序，row表示按行排序

居中方式

水平：align-items: center；垂直：justify-content: center；正中：align-items: center；justify-content: center。

margin - 外边距

注：某些相邻的margin会发生合并，称之为margin折叠，具体现象为若两个块级元素都设置了margin，则取两者之间的最大值作为两个元素的外边距

margin折叠常规常识

• margin折叠只发生在块级元素上
• 浮动元素的margin不与任何margin发生折叠
• 设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠
• 绝对定位元素的margin不与任何margin发生折叠
• 根元素的margin不与其它任何margin发生折叠

方式一

可取值：auto／数值／百分比

• margin 上右下左外边距
• margin-top 上外边距
• margin-right 右外边距
• margin-bottom 下外边距
• margin-left 左外边距

方式二

• 如果只提供一个，将用于全部的四边

margin：20rpx

• 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边

margin: 20rpx 10rpx 25rpx 10rpx

• 如果提供两个，第一个用于上、下，第二个用于左、右

margin：20rpx 20rpx：

• 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下

margin：20rpx 20rpx 10rpx：

padding - 内边距

方式一

可取值：auto／数值／百分比

• padding 上右下左内边距
• padding-top 上内边距
• padding-right 右内边距
• padding-bottom 下内边距
• padding-left 左外边距

方式二

• 如果只提供一个，将用于全部的四边

padding：20rpx

• 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边

padding：20rpx 10rpx 25rpx 10rpx

• 如果提供两个，第一个用于上、下，第二个用于左、右

padding：20rpx 20rpx：

• 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下

padding ：20rpx 20rpx 10rpx：

圆角边框

四边圆角

border-radius: 5px

属性扩展（各位置圆角设置，未设置的默认未直角）

• 左上圆角设置

border-top-left-radius

• 右上圆角设置

border-top-right-radius

• 右下圆角设置

border-bottom-right-radius

• 左下圆角设置

border-bottom-left-radius

场景示例：仅显示一半圆角

border-radius: 0px; border-bottom-right-radius: 5px; border-top-right-radius: 5px;

参考文章

转载地址：http://vbglz.baihongyu.com/