尺寸与边距

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

尺寸与边距 - 图2

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

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

示例：

  1. <div>  {/* 固定尺寸 */}  <div style={{ width: '25vw', height: '100px', backgroundColor: 'pink' }}>    固定宽高  </div>
  2.   {/* 最小最大尺寸 */}  <div    style={{      width: '150px',      height: '200px',      minWidth: '180px',      maxHeight: '100px',      backgroundColor: 'lightblue',    }}  >    最小宽度 最大高度  </div>
  3.   {/* 内外边距 */}  <div    style={{      width: '200px',      height: '100px',      padding: '20px',      margin: '20px',      backgroundColor: 'lightgreen',    }}  >    内边距 外边距  </div></div>

渲染效果：

尺寸与边距 - 图3

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

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

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

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

尺寸与边距 - 图4