盒模型

浏览器渲染引擎根据盒模型计算每个元素的大小（矩形）：content + padding + border + margin。

box-sizing 定义了如何计算元素的总宽高：

• content-box 的 width 和 height 定义了元素 content 的大小，根据盒模型，总宽高为 width 和 height 分别叠加上 padding 和 border。
• border-box 的 width 和 height 为元素的 content + padding + border，根据盒模型，总宽高即为 width 和 height。

参考

• developer.mozilla.org/en-US/docs/…

BFC

块级格式上下文常见的创建情况：

• 浮动元素（float 不为 none）
• 绝对定位元素（position 为 absolute 或 fixed）
• overflow 不是 visible 或 clip 的块元素
• display 为 flow-root、inline-block、table-cell、flex

作用：

• 包含内部浮动
• 排除外部浮动
• 阻止 margin 重叠

参考

• developer.mozilla.org/en-US/docs/…

Flex 布局

需要了解主轴和交叉轴。

flex 容器常用属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items

flex 项目成员常用属性：

• flex-grow
• flex-shrink
• flex-basis
• flex

flex 属性常见缩写：

• flex: initial = flex: 0 1 auto
• flex: auto = flex: 1 1 auto
• flex: none = flex: 0 0 auto
• flex: <正数> = flex: <正数> 1 0

参考

• developer.mozilla.org/en-US/docs/…

水平垂直居中

flex 布局：

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

绝对定位 + transform：

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

table-cell：

div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

扩展：

• developer.mozilla.org/en-US/docs/…
• CSS 深入理解 vertical-align 和 line-height 的基友关系

移动端自适应

Viewport

一些移动设备和其他窄屏幕通常在比屏幕宽的视口中呈现页面，例如 980px，然后缩小渲染结果到可以同时看到所有内容。这会导致一些媒体查询条件无法按预期生效。

我们通常添加以下 <meta> 标签表示使用设备宽度作为视口宽度，并且初始化缩放为 1：

<meta name="viewport" content="width=device-width, initial-scale=1" />

媒体查询（Media Queries）

/* 当浏览器宽度至少在 600px 及以上时 */
@media screen and (min-width: 600px) {
}

/* 当设备 DPR 为2时的样式 */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
}

布局

• Flexbox
• CSS Grid

相对单位

• rem
• vw/vh（注意兼容性）

响应式图片

<picture>
  <source
    srcset="hzfe-avatar-desktop.png, hzfe-avatar-desktop-2x.png 2x"
    media="(min-width: 990px)"
  />
  <source
    srcset="hzfe-avatar-tablet.png, hzfe-avatar-tablet-2x.png 2x"
    media="(min-width: 750px)"
  />
  <source
    srcset="hzfe-avatar-mobile.png, hzfe-avatar-mobile-2x.png 2x"
    media="(min-width: 375px)"
  />
  <img
    srcset="hzfe-avatar.png, hzfe-avatar-2x.png 2x"
    src="hzfe-avatar.png"
    alt="hzfe-default-avatar"
  />
</picture>

参考

• 移动端自适应的常见手段
• developer.mozilla.org/en-US/docs/…