Dash 中的高级 CSS

使用 Dash 和 Plotly 构建仪表板

Alex Scriven

Data Scientist

对象间距的 CSS

"盒模型"将每个 HTML 元素视为带有多层的盒子：

元素内容（height 和 width 属性）
内边距（内容外侧）
边框（内边距与外边距之间）
外边距（边框外，分隔元素）

四个同心矩形，从小到大分别标注 content、padding、border、margin。

添加边框

border CSS 参数包含三部分：

'border':'A B C'
- A = 像素厚度
- B = 样式（如 solid、dotted）
- C = 颜色（如 red）

为应用添加边框

dcc.Graph(figure=ecom_bar, 
 style={'width':'500px', 
        'height':'450px',
        'border':'5px dotted red'}
         )

标题"Top Sales Categories"下方，在红色虚线边框内，是一个水平条形图，y 轴为次要购买类别，x 轴为总订单数。边框外下方列出前两大销售类别。

CSS 间距

设置 HTML 元素的间距：

为每个属性（padding 与 margin）指定四个数
- 顺时针依次为上、右、下、左
或：一个数（四边相同）
或：两个数（上下、左右）

例如：'padding':'10px 5px 5px 15px'

盒模型图，padding 层四边各有数字，顺时针自上为 10、5、5、10。

在 Dash 中添加内边距

无内边距：

与前图相同以演示边框概念。标题"Top Sales Categories"下方，在红色虚线边框内，是一个水平条形图，y 轴为次要购买类别，x 轴为总订单数。边框外下方列出前两大销售类别。

添加 'padding':'100px'：

与左侧图相同，但边框四周被向外推，有回退箭头指示这种推开。边框内的图表和标题周围留有更多空间，下方文本也被推远。

在 Dash 中添加外边距

无外边距：

添加 margin: 100px auto：

与上一页右图类似，也有箭头指示额外空间。但该空间在边框之外。标题和下方文本被推开，但边框与图表之间的距离不变。

用 auto 外边距居中

使用：'margin':'100px'

与前图相同的边框概念，但画面更远，中央图表左对齐，不在标题正下方且不在上方文本之上。标题"Top Sales Categories"下方，在红色虚线边框内，是水平条形图；边框外下方列出前两大销售类别。

使用：'margin':'100px auto'

与前图相同。图表在标题正下方、下方文本上方居中对齐。标题"Top Sales Categories"下方，在红色虚线边框内，是水平条形图；边框外下方列出前两大销售类别.

布局相关的 CSS

元素未对齐？HTML 元素可以是"inline"或"block"。

Inline：在同一行渲染
- 无高度、宽度（无盒）属性
- 示例：<strong>、<a>、<img>
Block：包含换行，纵向堆叠
- 不能并排多个
- 示例：<h1>、<div>
还有 inline-block
- 可设置高/宽/盒属性
- 可并排

inline-block 元素

<div style='width:50px;height:50px;
     background-color:blue'></div>
<div style='width:50px;height:50px;
     background-color:red
     ;display:inline-block'></div>
<div style='width:50px;height:50px;
     background-color:green;
     display:inline-block'></div>

三个彩色小方块呈 L 形。蓝色方块在红色方块上方，红色方块右侧有绿色方块。

Passons à la pratique !

使用 Dash 和 Plotly 构建仪表板