1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

浏览器的渲染引擎在渲染 HTML 元素时会将其当作一个盒子来渲染,这就是 CSS 的盒模型(Box Model)。

一个盒模型包含了以下内容:

$$tip

只有以上四个内容会占据页面空间。

$$

image

box-sizing

box-sizing 定义了浏览器如何计算一个元素的宽度和高度,它有以下取值:

content-box

默认值,如果设置 widthheight 只会应用到内容区域空间,而 paddingborder 都会算作新的空间。

尺寸的计算公式:

width = 内容的宽度

height = 内容的高度

image

border-box

此时的 widthheight 包括 paddingborder 区域空间。

尺寸计算公式:

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

image

推荐使用 border-box

通常来说,由于 paddingborder 在样式上感觉像是元素的整体一部分。设计师设计一个元素时的宽高也是包括 paddingborder 的,所以使用 border-box 更符合直觉。

因此推荐之后的开发中所有的元素都使用 box-sizing: border-box; 的配置。

将以下代码加在一个全局样式文件中,匹配所有元素的 box-sizing 属性。

:root {
    box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */
}
*,
*:before,
*:after {
    box-sizing: inherit; /* box-sizing 继承自父元素 */
}