恒生应用创新平台

# 盒模型

jsn 盒模型基于 CSS 盒模型 (opens new window)，每个 元素都可视作一个盒子。我们一般在讨论设计或布局时，会提到「盒模型」这个概念。

盒模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界 margin edge, 边框边界 border edge, 内边距边界 padding edge 与内容边界 content edge。这四层边界，形成一层层的盒子包裹起来，这就是盒模型大体上的含义。

# 注意事项

  1. jsn 盒模型的 box-sizing 默认为 border-box，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。
  2. 只支持 overflow:hidden。

下面的例子显示了盒模型的基本用法

<template>
  <div>
    <image src="..." style="width: 400; height: 200; margin-left: 20;"></image>
  </div>
</template>

# 宽度

width {length}：默认值 0

# 高度

height {length}：默认值 0

# 内边距

padding {length}：内边距，内容和边框之间的距离，默认值 0。与标准 CSS 类似，padding 支持简写，也可分解为以下四个：

  • padding-left {length}：左内边距，默认值 0；
  • padding-right {length}：右内边距，默认值 0；
  • padding-top {length}：上内边距，默认值 0；
  • padding-bottom {length}：下内边距，默认值 0。

# 边框

# Android 兼容性

你有可能会遇如下Crash Unable to create layer for xxx 如果你的含有 border 的 component 的长度超过了最大值，因为这会使 OpenGL 内存 区域发生 OutOfMemory。

你的 component 的允许的最大值与机器有关，但一般来说，如果你的 component 的大小超过屏幕大小，就有可能触发Crash。

# border-style

border-style：设定边框样式，如果四个方向的边框样式不同，可分别设置：

  • border-left-style {string}：可选值为 solid | dashed | dotted，默认值 solid；
  • border-top-style {string}：可选值为 solid | dashed | dotted，默认值 solid；
  • border-right-style {string}：可选值为 solid | dashed | dotted，默认值 solid；
  • border-bottom-style {string}：可选值为 solid | dashed | dotted，默认值 solid。

支持的值如下：

  • solid：实线边框，默认值 solid；
  • dashed：方形虚线边框；
  • dotted：圆点虚线边框。

# border-width

border-width：设定边框宽度，非负值, 默认值 0，如果四个方向的边框宽度不同，可分别设置：

  • border-left-width {length}：非负值, 默认值 0；
  • border-top-width {length}：非负值, 默认值 0；
  • border-right-width {length}：非负值, 默认值 0；
  • border-bottom-width {length}：非负值, 默认值 0。

# border-color

border-color：设定边框颜色，默认值 #000000，如果四个方向的边框颜色不同，可分别设置：

  • border-left-color {color}：默认值 #000000；
  • border-top-color {color}：默认值 #000000；
  • border-right-color {color}：默认值 #000000；
  • border-bottom-color {color}：默认值 #000000。

# border-radius

border-radius：设置边框的圆角，默认值 0，如果四个方向的圆角弧度不同，可分别设置：

  • border-bottom-left-radius {length}：非负值, 默认值 0；
  • border-bottom-right-radius {length}：非负值, 默认值 0；
  • border-top-left-radius {length}：非负值, 默认值 0；
  • border-top-right-radius {length}：非负值, 默认值 0。

# 注意事项

border-radius和border-width定义了圆心角为90度的椭圆弧的长轴和半长轴的大小。如果邻接两边border-radius(或border-width不一致，jsn绘制>的边框曲线可能不够平滑。

# Android 兼容性

尽管 overflow: hidden 在 Android 上是默认行为，但只有下列条件都满足时，一个父 view 才会去剪切它的子 view。

  • 父view是 div, a, cell, refresh 或 loading；
  • 系统版本是 Android 4.3 、 Android 5.0 或更高；
  • 系统版本不是 Andorid 7.0；
  • 父 view 没有 background-image 属性。

# 外边距

margin {length}：外边距，元素和元素之间的空白距离，默认值 0。与标准 CSS 类似，margin 支持简写，也可分解为四边：

  • margin-left {length}：左外边距，默认值 0；
  • margin-right {length}：右外边距，默认值 0；
  • margin-top {length}：上外边距，默认值 0；
  • margin-bottom {length}：下外边距，默认值 0。