尺寸与边距

尺寸与边距

在页面渲染时，Kraken 基于 W3C 的盒模型 将所有标签表示为一个个矩形的盒子。 每个盒子由四个部分组成，其作用由它们各自的边界所定义如图，与盒子的四个组成区域相对应，每个盒子有四个边界： 内容边界 Content edge 、 内边距边界 Padding Edge 、 边框边界 Border Edge 、 外边框边界 Margin Edge 。

尺寸与边距 - 图1

对应 CSS 属性来说，width, height 描述标签的宽高，padding 描述标签的内边距，margin 描述标签的外边距。

Kraken 支持的与尺寸边距相关的所有属性请参考开发文档。

示例：

<div>
  {/* 固定尺寸 */}
  <div style={{ width: '25vw', height: '100px', backgroundColor: 'pink' }}>
    固定宽高
  </div>

  {/* 最小最大尺寸 */}
  <div
    style={{
      width: '150px',
      height: '200px',
      minWidth: '180px',
      maxHeight: '100px',
      backgroundColor: 'lightblue',
    }}
  >
    最小宽度 最大高度
  </div>

  {/* 内外边距 */}
  <div
    style={{
      width: '200px',
      height: '100px',
      padding: '20px',
      margin: '20px',
      backgroundColor: 'lightgreen',
    }}
  >
    内边距 外边距
  </div>
</div>

渲染效果：

尺寸与边距 - 图2

请选择以下任意一种方式预览：

1. 安装 Kraken CLI，然后复制以下命令到命令行中运行：

kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-sizing.js

2. 在 Android 手机上先下载 Play Kraken App，然后打开 App 扫描下方二维码预览：

尺寸与边距 - 图3