盒子模型

蚂蚁动态卡片中的盒模型基于 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 获取完整示例代码。

阿里云首页 移动开发平台 mPaaS 相关技术圈