CSS

样式重置

CSS reset 的作用是让各个浏览器的 CSS 样式有一个统一的基准。在项目中可以根据自己的需求选择性地进行样式重置。

以前看过张鑫旭大神的一篇博客:CSS reset 的重新审视 – 避免样式重置，感觉很有道理，不妨移步阅读一下。

盒子模型

在 CSS 中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。

在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
在怪异(ie)模式下，一个块的总宽度=width+margin（左右）（既 width 已经包含了 padding 和 border 值）

box-sizing

更改用于计算元素宽度和高度的默认的 CSS 盒子模型

content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px,那么这 100px 会包含其它的 border 和 padding，内容区的实际宽度会是 width 减去 border + padding 的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高

行高

行高指文本行基线之间的距离。实际上文本行每行的行内元素都会生成一个内容区，而每个内容区又会生成对应的行内框，在默认情况下，行内框的大小即为字体大小，而使用 line-height 则是显式地重新指定了文本行中各个行内框的大小，只需要将行间距均分成两半且应用到每个内容的顶部和底部，就可以得到对应的重新生成的行内框的大小

如果使用 em,ex 和百分数指定行高，都是相对于元素的 font-size 进行计算
如果是从父元素继承行高，则情况会变得复杂：
- 如果使用百分数来设置行高，浏览器会首先计算其父元素的字体大小与对应百分数的乘积，得到对应的结果再传递给对应元素（当子元素的字体大小大于该值就会出现文本行重叠的情况）；
- 如果使用乘积因子来指定行高，浏览器会计算该元素的字体大小（如果没有则计算该元素从其父元素继承得到的字体大小），然后乘以对应的乘积因子，并将结果应用在行高之上。

Flex

参考之前的整理

flex 布局

需要理解容器（父元素）和项目（子元素）这两个概念，然后学习和理解其语法就容易得多了。

栅格系统响应式原理

这里有一个简单的实现

<div class="xs-6 sm-4 md-3 lg-2"></div>

利用媒介查询，在相关的 break-points 点，划分xs、sm、md和lg等不同尺寸的样式类，用于指定在对应分辨率下的网格大小。首先实现xs，然后依次实现后面的样式类，这样在大分辨率下的样式类会覆盖小分辨率的样式类，达到响应式的布局。

Rem 实现及注意事项

使用 Flexible 实现手淘 H5 页面的终端适配
基于 calc 和 vw 实现的 rem 布局

其实 rem 布局的本质是等比缩放，一般是基于宽度，然后可以完美还原设计图

ViewPort

html

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width    设置viewport宽度，为一个正整数，或字符串‘device-width’
// device-width  设备宽度
// initial-scale    默认缩放比例（初始缩放比例），为一个数字，可以带小数
// minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable    是否允许手动缩放

CSS ​

样式重置 ​

盒子模型 ​

行高 ​

Flex ​

栅格系统响应式原理 ​

Rem 实现及注意事项 ​

ViewPort ​

CSS