备案控制台
文档
产品文档
输入文档关键字查找
首页 移动开发平台 mPaaS 蚂蚁动态卡片 卡片语法 卡片样式 通用样式 盒子模型

盒子模型

更新时间：
一键部署
提交缺陷
产品详情
相关技术圈
我的收藏

蚂蚁动态卡片中的盒模型基于 CSS 盒模型，将所有元素表示为一个个矩形的盒子（box），其他样式决定这些盒子的大小、位置以及属性（例如颜色、背景、边框……）。

盒模型描述了一个元素所占的控件，每个盒子有四个边界：外边距边界（margin edge）、边框边界（border edge）、内边距边界（padding edge）、内容边界（content edge）。

外边距

外边距指元素和元素之间的空白距离，由 margin 属性控制，简写与非简写方式都支持。

属性

描述

值类型

默认值

可选值

写法

备注

margin

外边框距离

长度单位

0

auto；

单值长度单位或百分比

margin: 10px 10px 10px 10px;

四个属性值依次对应上、右、下、左边框的距离

margin: 10px 10px 10px;

三个属性值依次对应上、左右、下边框的距离

margin: 10px 10px;

依次对应上下、左右边框的距离

margin: 10px;

四边外边框距离相同

margin-left

长度单位

0

auto；

单值长度单位或百分比

margin-left: 10px;

-

margin-right

长度单位

0

auto；

单值长度单位或百分比

margin-right: 10px;

-

margin-top

长度单位

0

auto；

单值长度单位或百分比

margin-top: 10px;

-

margin-bottom

长度单位

0

auto；

单值长度单位或百分比

margin-bottom: 10px;

-

内边距

内边距指内容和边框的距离，由 padding 属性控制，简写与非简写方式都支持。

属性

描述

值类型

默认值

可选值

写法

备注

padding

内边距

长度单位

0

auto；

单值长度单位或百分比

padding: 10px 10px 10px 10px;

四个属性值依次对应上、右、下、左边的内边距

padding: 10px 10px 10px;

三个属性值依次对应上、左右、下边的内边距

padding: 10px 10px;

两个属性值依次对应上下、左右的内边距

padding: 10px;

四边的内边距相同

padding-left

长度单位

0

auto；

单值长度单位或百分比

padding-left: 10px;

-

padding-right

长度单位

0

auto；

单值长度单位或百分比

padding-right: 10px;

-

padding-top

长度单位

0

auto；

单值长度单位或百分比

padding-top: 10px;

-

padding-bottom

长度单位

0

auto；

单值长度单位或百分比

padding-bottom: 10px;

-

内容边距

内容边距指宽或高减去边框边界和内边距后的距离，即：内容边距=宽/高-边框边界-内边距。

宽高

卡片的 box-sizing 属性仅支持 border-box，意味着宽高设定的是边框区域的宽和高。

属性

描述

值类型

默认值

可选值

写法

width

元素宽度

长度单位

0

auto；

单值长度单位或百分比

width: 100px;

min-width

最小宽度限定

长度单位

-

-

min-width: 50px;

max-width

最大宽度限定

长度单位

-

-

max-width: 200px;

height

元素高度

长度单位

0

auto；

单值长度单位或百分比

height: 100px;

min-height

最小高度限定

长度单位

-

-

min-height: 50px;

max-height

最大高度限定

长度单位

-

-

max-height: 200px;

边框

指定边框的样式，包括宽度、颜色、样式、圆角。支持 border、border-left、border-top、border-bottom、border-right 的简写方式，也支持 border-style、border-width、border-color、border-radius 的简写方式。

属性

描述

值类型

默认值

可选值

写法

备注

border

边框

string

none

-

border: 1px solid #f32600;

宽度、线样式、颜色，三个元素位置不限

border-left

左边框

string

none

-

border-left: 1px solid #f32600;

border-right

右边框

string

none

-

border-right: 1px solid #f32600;

border-top

上边框

string

none

-

border-top: 1px solid #f32600;

border-bottom

下边框

string

none

-

border-bottom: 1px solid #f32600;

border-style

边框样式

string

none

dotted

solid

dashed

none

border-style: solid dotted dashed solid

四个属性值依次对应上、右、下、左边框的样式

border-style: solid dotted solid

三个属性值依次对应上、左右、下边框的样式

border-style: solid dashed

两个属性值依次对应上下、左右边框的样式

border-style: solid

四边边框样式相同

border-left-style

string

none

border-left-style: solid

-

border-top-style

string

none

border-top-style: solid

-

border-right-style

string

none

border-right-style: solid

-

border-bottom-style

string

none

border-bottom-style: solid

-

border-width

边框宽度

长度单位

3px

-

border-width: 1px 1px 1px 1px

依次对应上、右、下、左边框的宽度

border-width: 1px 1px 1px

依次对应上、左右、下边框的宽度

border-width: 1px 1px

依次对应上下、左右边框的宽度

border-width: 1px

四边的边框宽度

border-left-width

长度单位

3px

-

border-left-width: 1px

-

border-right-width

长度单位

3px

-

border-right-width: 1px

-

border-top-width

长度单位

3px

-

border-top-width: 1px

-

border-bottom-width

长度单位

3px

-

border-bottom-width: 1px

-

border-color

边框颜色

色彩单位

0x000000

-

border-color: red #333 rgb(255, 255, 0) green

依次对应上、右、下、左边框的颜色

border-color: red #333 rgb(255, 255, 0)

依次对应上、左右、下边框的颜色

border-color: red #333

依次对应上下、左右边框的颜色

border-color: red

四个边框的颜色

border-left-color

色彩单位

0x000000

-

border-left-color: red;

-

border-right-color

色彩单位

0x000000

-

border-right-color: red;

-

border-top-color

色彩单位

0x000000

-

border-top-color: red;

-

border-bottom-color

色彩单位

0x000000

-

border-bottom-color: red;

-

border-radius

边框圆角半径

长度单位

0

-

border-radius: 10px 10px 10px 10px;

详见表格下方的 border-radius 取值说明。

border-radius: 10px 10px 10px;

border-radius: 10px 10px;

border-radius: 10px;

border-top-left-radius

长度单位

0

-

border-top-left-radius: 10px;

-

border-top-right-radius

长度单位

0

-

border-top-right-radius: 10px;

-

border-bottom-left-radius

长度单位

0

-

border-bottom-left-radius: 10px;

-

border-bottom-right-radius

长度单位

0

-

border-bottom-right-radius: 10px;

-

border-radius 的取值说明如下：

  • 单值：表示边框四角的圆角半径。

  • 双值：表示边框两个角的圆角半径。第 1 个值表示 topLeft/bottomRight；第 2 个值表示 topRight/bottomLeft。

  • 三值：表示边框三个角的圆角半径。第 1 个值表示 topLeft；第 2 个值表示 topRight/bottomLeft；第 3 个值表示 bottomRight。

  • 四值：表示边框四个角的圆角半径。第 1 个值表示 topLeft；第 2 个值表示 topRight；第 3 个值表示 bottomRight；第 4 个值表示 bottomLeft。

边框的基本用法

下面是边框的使用示例。

div {
    border-style:solid;
    border-color:#ff0000;
    border-width:10px;
    border-radius:5px;
}
image.png
说明

  • 当使用属性的简写方式时，简写中没写的样式，将按照默认值处理，例如 border: 5px red; 无效果，因为border-style 默认为 none，而 border: 5px solid; 会显示 5px 的黑色实线边框，因为 border-color 默认黑色。

  • 当属性的简写与非简写同时存在，遵循后者覆盖前者的原则，示例如下：

// 显示 5px 黑色实线边框 (black 覆盖 red)
border:5px red solid;
border-color:black;

// 显示无边框（none 覆盖 dotted）
border-style:dotted;
border:5px red

盒模型的基本用法

下面是盒模型的一个使用示例。

div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
image.png

示例代码

单击此处 detailBoxModel.zip 获取完整示例代码。

文档推荐
  • 本页导读 （0）
文档反馈