深入理解CSS精简版 (上 : 基础部分)

一 层叠、优先级、继承

1. 概念

1.1 层叠是什么？层叠值是什么？

css 样式冲突时，一个属性只有一个样式能生效，决定哪个样式能生效的这一套规则，就叫做层叠。 通过层叠规则计算出来，最终能生效的那个值,就是层叠值

1.2 层叠规则

样式表的来源>!important>选择器的优先级>源码顺序

• 样式表的来源 作者样式表（代码中的 css）>用户样式表（用户自定义）>用户代理样式（浏览器默认样式）

• !important 添加了!important 的属性声明优先级更高

• 选择器的优先级 行内样式 > ID 选择器 > 类选择器 > 标签选择器

  计算规则: 按不同选择器类型的数量用逗号分隔标记,如一个 ID 选择器 = "0,1,0,0"。从左往右比较,谁的数字大，谁的优先级更高。数字相同时，继续比较下一个，以此类推。

• 源码顺序 选择器优先级一致的情况下，后面声明的样式会覆盖前面声明的样式。

1.3 继承

如果一个元素某些属性没有设置层叠值得话，可能会继承某个祖先元素的值。 常见的会默认继承的值：

• 文本：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space 以及 word-spacing。
• 列表：list-style、list-style-type、list-style-position、list-style-image。
• 表格：border-collapse、border-collapse。

1.4 inherit 和 initial

• inherit：一些属性不会默认继承父元素的值，使用 inherit 作为样式的值，就会继承父元素的值。
• initial：元素某个样式设置了层叠值或者继承了父元素的值，可以使用 initial 重置。initial 是重置为样式属性的初始值，不是重置为该元素这个样式的初始值。

1.5 简写属性

• 简写属性是同时给多个属性赋值。 如 padding = padding-top+padding-right+padding-bottom+padding-left。

• 省略值覆盖详细属性 简写属性可以省略一些值，这些值有默认值，如果简写属性在详细属性后面编写的，那么即使没填可以省略的值，也会用默认值覆盖详细属性。

• 简写属性常见顺序

  • 设置 4 个方向的值，顺序为逆时针 TRLB（上右下左）。
  • 设置水平和垂直方向的，顺序为先 X（水平）后 Y（垂直）。

二 相对单位

1. 概念

1.1 相对单位的好处和坏处

• 好处：一个样式可以作用于多个网页，此外更改字号或缩放浏览器窗口都可以适应。
• 坏处：直到内容和样式都完成了才能看到效果，需要计算，会增加设计流程增加复杂性。

2. 属性 & 单位

2.1 字体相对单位

• em： 相对于 font-size 属性，1em = 继承自父容器的 font-size。相对于其他属性，1em = 元素自身的 font-size。
• rem: 1rem = 根元素 font-size。

2.3 视口相对单位

• vh: 视口高度的 1%
• vw: 视口宽度的 1%
• vmin: 视口宽高较小的一方的 1%
• vmax: 视口宽高较大的一方的 1%

2.3 calc() 计算函数

calc()函数可以对长度单位进行加减乘除计算。运算符两边必须留有空格。

3. 其他

3.2 无单位的数值和行高

有些属性允许无单位的值：

• line-height: 行高（默认 em）
• z-index： 层级
• font-weight： 字体粗细

任何长度单位都允许用不带单位的 0 , px、em、rem、vw、vh 等。 定义无单位的长度单位，子组件继承的是声明值，而使用有单位的长度时。继承的是计算值。

3.3 自定义属性

• 定义自定义属性： 变量名前面必须有两个连字符（--）,如 --my-var
• 使用自定义属性： var(--my-var,备用值)，变量未声明时使用备用值，备用值可以为空。
• 自定义属性可以层叠和继承。

3.4 字体单位常用技巧

• 大多情况下,使用情况下，rem 设置字号，px 设置边框，em 设置其他属性。
• 通过媒体查询设置不同大小的屏幕的根 font-size 来实现响应式布局。
• 实现组件 large、mini 等功能: 外层容器设置通过 large、mini 设置不同 font-size，其他属性以及子组件 font-size 使用 em

三 盒模型

1. 概念

1.1 盒模型

• content-box

• border-box

1.2 文档流

• 行内元素: 跟随文字从左到右排列，到达容器边缘换行。
• 块级元素: 占据完整的一行，前后都有换行。

2. 属性 & 单位

1.1 属性

• box-sizing: 盒模型类型

  • content-box(默认值) / border-box

• overflow： 当明确了容器高度|宽度，子元素在限定区域内放不下时，会发生溢出，overflow 属性可以控制溢出行为。

  • visible(默认值) / hidden / scroll / auto

• minWidth: 元素最小宽度。

• maxWidth: 元素最大宽度。

3. 其他

3.1 百分比高度问题

百分比是参考的父容器高度计算的，而父容器没有指定具体高度时，高度是通过子元素的高度决定的。这种情况下，浏览器没办法处理，因此会忽略这个声明。要使用百分比高度时，需要先确定父容器高度，或者使用 vh。

3.2 等高列实现方案

• table 布局
• flex 布局

3.3 垂直居中方案

• 给容器加上上下相等的内边距。
• 只有一行文字，设置一个大的行高
• 容器和内容高度都确定，使用绝对定位内容
• 不知道容器高度，使用绝对定位结合 transform
• 对容器使用 display: table-cell 和 vertical-align: middle。(vertical-align 只针对行内元素和 table-cell 生效)
• flex 布局,align-item:center

3.4 负外边距

外边距可以设置为负值，左 | 上 会把自身往相应方向移动。右 | 下 会将后面的元素拉过来。未设置宽高时，会填充宽高。

3.5. 外边距折叠

相邻的上下外边距，会折叠一起，取最大值作为边距，即使不是同一层级的元素，同样父子元素的上下边距也会折叠。左右外边距不会折叠。

以下几种方式可以防止上下外边距折叠：

• 对容器使用 overflow:任何不为 visible 的值，防止父子元素上下边距折叠。
• 容器使用 padding，防止父子元素上下边距折叠。
• 设置容器为浮动元素、内联块、绝对定位、固定定位。
• flex 布局内的元素之间不会发生外边距折叠。
• table-cell 不具备外边距，所以不会折叠。

3.6. 容器内的元素间距

权衡使用猫头鹰选择器(_ + _)，给非第一个元素增加外边距

四 理解浮动

1. 概念

1.1 浮动的设计初衷

将元素拉到一侧，使文档流包围它，如文字包围图片。

1.2 BFC

BFC 是块级格式化上下文，将内部的内容与外部的上下文隔离开，BFC 里的内容不会跟外部的元素重叠或相互影响。有以下作用：

• 包含了内部所有元素的上下边距，不会根 BFC 外面的元素产生外边距折叠。
• 包含了内部所有浮动元素。
• 不会跟 BFC 外面的浮动元素重叠

给元素添加以下任意属性值都会创建 BFC：

• float: left 或 right,不为 none 即可
• overflow: hidden、auto、scroll,不为 visible。
• display: inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid。 -position： absolute、fixed

2. 属性 & 单位

2.1 属性

• float： 定义浮动

  • none(默认值)/ left / right：

• clear: 清除浮动

  • none(默认值) / left / right / both:

3. 其他

3.1 容器折叠和清除浮动

• 容器折叠： 元素使用浮动后，它们的高度不会加到父元素上，当后面非浮动元素高度低于浮动元素时，浮动元素会超出父容器。
• 清除浮动： 元素使用 clear:both(两侧)|left(左)|rigth(右)，可以清除左右浮动元素带来的布局影响，解决折叠问题。浮动元素为最后一个或者第一个时，可以对父元素添加::before 或者::after，设置 clear:both 清除浮动。

3.2 网格系统

把网页构造成行和列实现网格系统。每行通常北划分为特定数量的列，一般为 12 个，每个子元素的宽度等于 1-12 个列的宽度。

用 float 实现网格布局。

<div class="row">
  <div class="column-1"></div>
  <div class="column-1"></div>
  ...
</div>

<style>
  .row::after {
    clear: both;
    content: " ";
  }
  [class*="column-"] {
    float: left;
  }
  .column-1 {
    width: calc(100% / 12);
  }
</style>

3.3 浮动陷阱

当前面的元素高度大于后面的元素时，应该换行的元素不能正确换行，需要 clear:left 清除浮动。