了解CSS盒模型、页面布局在UI设计中的作用

我司实行UI规范已过去一段时间，页面风格已逐渐实现统一。但近期在实际业务开发中发现，在UI验收环节不断出现小数值调整情况，极大的延长验收时间。
在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解，故此篇介绍了css盒模型和组件的概念，以及简单的前端布局思路，UI设计人员在设计时也能结合代码层面考虑，规范前端页面UI标准，减少双方沟通和开发成本。

安卓、iOS、Web布局基本是互通的，因为本人为Web开发，所以从CSS盒模型的角度进行分享。如果你是web前端的初学者，相信这个分享也能给你带来帮助。

CSS盒模型

首先我们来看一段html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css盒模型</title>
</head>
<style type="text/css">
.content {width: 300px;height: 400px;border: 5px solid #242424;padding: 20px;background-color: #898989;
}
</style>
<body><div class="content" id="zwkkkk1"></div>
</body>
</html>

这段代码很好理解，设置一个div宽300px高400px。运行到网页端后可以得到一个矩形（如下图所示）

这里我们打开网页的调试模式，会发现这个div的长宽比为350x450，上面的代码明明设置的是300x400为什么长宽各增加了50呢？下面我们就来一探究竟。

我们再网页上使用检查模式，点击此元素可以得到这张示意图：

在这里我们可以看到300x400在最内处蓝色区域content（内容），与此同时我们还看到绿色部分的padding（内边距）和黄色部分的border（边框）以及橙色部分的margin（外边距）

margin(外边距) - 清除边框外的区域，外边距是透明的。
border(边框) - 围绕在内边距和内容外的边框。
padding(内边距) - 清除内容周围的区域，内边距是透明的。
content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，我们需要知道盒模型是如何工作的。
在这个例子中看到的350x450盒子是由以下计算得到：
350（width） = 300（content） + 20（padding）* 2 + 5（border）* 2
450（height）= 400 （content）+ 20（padding）* 2 + 5（border）* 2

css的两种盒模型

而引起上面效果的原因来自于 css 的两种盒模型的不同，这里我先对两种盒模型做个介绍。

W3C的标准盒模型

在标准的盒子模型中，width指content部分的宽度

IE的盒模型

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

我们可以看出我们上面的使用的默认正是W3C标准盒模型。
而这里盒模型的选取更倾向于项目和开发者的习惯，并没有绝对的好坏之分。

box-sizing的使用

如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性

box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型

box-sizing的默认属性是content-box。

元素与元素之间的间距

通过上述盒模型的介绍，我们了解了元素高度和宽度是怎么计算的，在实际应用中，元素和元素之间通常会设置间距，来保证页面布局美观。

line-heigth

我们先来看下下图三段文章的排版：

我们可以看到，红色段落文字上下非常拥挤，甚至有部分遮盖住了蓝色区域，而相对的黄色段落行与行之间间距就大了很多。这是因为我们给三段文字设置了不同的line-heigth（行高）。
在不设置height高度的情况下，元素内容（如上述中font-size字体大小）及行高影响着content容器的高度。当行高不等于字体大小时，行高的高度影响容器的高度。

margin

在上述

盒模型在原型及高保真设计中的应用

在UI验收环节，拥有“像素眼”的设计师经常发现页面中大小或间距出现细微差别，前端也发现在高保取值中见到各种不常见数值，这就是由于UI设计和前端布局之间的差异造成的。下面我们以墨刀这款设计器为基础，以前端UI库Element为例，讲解如何规范得按盒模型来设计页面。

首先我们从最小颗粒出发——组件。

组件化的优点：
1、可以快速的帮助我们开发一个新页面，复用性搞，减少开发成本。
2、风格标准统一，易维护。

元素宽高设置

以Button按钮为例，在墨刀设计常规按钮大小时，我们可以如下设置：

固定宽高按钮设置

web页面组件元素为保证用户阅读，通常不需要进行缩放，这时我们可以直接选择墨刀中Button组件，设置好固定宽高和字体大小即可，此时适用的是IE盒模型（推荐，减少双方计算），border（边框）大小是包含在其中的，若想以W3C盒模型，则需要加上border宽度。
但值得注意的是，如果此时按钮中文字数量不同，需要避免因固宽后文字溢出问题。

针对文字溢出的问题，我们可以使用设置最小宽度和固定padding（内边距）值来解决。

固定padding和最小宽高按钮设置

设置固定padding可以很好的根据内容文字的数量和大小来自动适配整体宽高，保证了内部元素和边框之间距离的统一，无需手动计算。
如果需要按钮保持最小宽高，我们可以标注按钮最小宽高比，如下图所示，当文字不足以撑满最小宽度时，则按钮宽度为设置的最小宽度。

间距

元素与元素之间的间距也是前段UI库与UI设计见出现问题最多的地方，这里我们先以前段UI库Element的表单组件为例，介绍下前段布局的思路。

(图一)

(图二)

(图三)

我们先来看看图一，我们经常把组价比作“积木”，这里我们把一个表单项看做成一个拼好的“方块”，再由不同的方块搭建成一个“表单房子”，而为了统一“方块”的一些数值是需要保持一致的，如input高度、文字大小等。

一个“方块”由表单项的名称label和表单项input组成，可以看到这里为了保证label和input属于居中对齐，这两块“积木”的高度是一致的40px，这里的label通过设置line-heith撑开高度，如果文字宽度超出label设置的宽度，则会换行，此时label的高度为40px*2（如图二“此活动名称”），此“方块”的整体高度也同样会被撑高。

Element采用的统一文字、元素高度、间距来编写页面，但由于没有边框，会使得视觉上觉得间距忽大忽小，但如果我们使用红框圈一下后会发现，组件实际间距是相同的。

当然，如果想实现label文字超出换行且与input垂直居中、不同input间距特殊处理（如图三，“开关”与“活动性质”间距为10，“活动性质”与“特殊资源”间距为0，实际展示效果为图二），代码层面也可以实现，但由于第三方组件库都是已经封装编译好的代码，改写难度大甚至无法改写，不推荐强行修改，以免因不可控性造成渲染问题。
如果是必要需求，可提前说明并告知是否为通用设计，共同讨论下实际应用场景下不同的展示效果，前端开发人员可根据需求重新封装新的组件，同样也可达到复用的目的。

布局

嵌套

开发页面时，标签可以并列、可以嵌套、可以多层嵌套，当然标签的嵌套也是有一定规则的，这里就不赘述了。知道这一点，可以帮助UI设计人员了解前端实现页面的思路，更规范严谨的设计页面。

我们以放置在卡片中的表格为例：

此图由两个独立组件组成：card（卡片）和table（表格）组成。

通常，我们会给card组件设置一个padding内边距，这个开发时会写到通用样式中且只写一次，而非每次都特别设置。这样无论card中放置什么组件，组件最外层与card最外层的距离都是相同的，这样既保证了统一性，又避免了代码的重复开发，减少开发成本。

标签的嵌套如同大盒子套小盒子，通常小盒子内的物体是不会超出大盒子的，如同上图中，当某一行被激活时active，有一个底色改变的效果，且这个底色、行与行间的border边框线与边缘card边缘存在间距，而这个间距就是我们之前为card设置的padding值。

若想实现底色及边框线与最外层的card左右定顶边对齐呢？代码实现上是完全没有问题，但代码写法及标签的使用完全不一样，需要特殊处理或重新编写设计组件。
类似的需求，在组件设计初期都应与开发人员讨论，将所有的可能性考虑进去，平衡组件的一致性和灵活性。

自适应

页面自适应实际分为两种：

页面大小及元素根据设备窗口大小整体缩放
元素大小不变，根据设备窗口大小适应布局

整体缩放多用于移动端，开发人员只需拿到设计稿设置对应的数值，页面在不同设备展示时会根据设备的分辨率按规则进行缩放。

下面我们来重点讲讲第二种自适应的不同布局方案

百分比

常见的栅格布局就是使用百分比的方式来实现的。

同时我们可以给元素之间设置的间距，如果间距是固定值，那么元素会根据窗口大小改变，间距不会。

而常用的布局容器则会采用固定Aside宽度、Header Footer高度，让内容区域Main根据窗口（100vw - Aside宽度）* （100vh - Header高度 - Footer高度）

vw 容器宽度
vh 容器高度

固宽高比

当需要元素不变，又需要元素以某种方式对齐，我们可以采用flex布局，这时如果容器大小改变，元素大小不变，间距改变。

流式布局

如果想适配两个尺寸差距过大的窗口，又不想改变元素及间距的大小，我们可以采用流式布局

标注

了解代码实现页面效果可以帮助UI设计人员更好的把想法传递给开发人员，那么在高保真设计时，有哪些方式可以帮助开发人员更快的开发页面呢？

通常，前端开发人员拿到墨刀工具设计的高保真页面，选择标注模式可以看到元素的数值，甚至墨刀会自动为这个元素生成一段css代码，开发人员只要根据这些数值开发就好了。

但如果对页面有些特殊需求（如最小最大宽度、特殊布局方案），或者使用墨刀的组件无法通过标注模式查看到内边距等信息，导致取值困难情况，这时就需要在页面中标注。

还有一种情况是，由于文字行号设置不对，而墨刀的文字组件是根据组件框大小计算距其他地方的距离，这也容易造成数值出现问题，类似问题需要在设计高保真时尽量避免。