二、CSS

1、常见 CSS 选择器

注意事项

• !important声明的样式的优先级最高
• 如果优先级一致，则最后出现的样式生效
• 继承得到的样式的优先级最低
• 样式来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

2、display 属性值及其作用

属性值	作用
none	元素不显示，并且会从文档流中移除
block	块元素类型。默认宽度为父元素宽度，可设置宽高，换行显示
inline	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示
inline-block	行内块元素类型。默认宽度为内容宽度，可以设置宽高，同行显示
list-item	像块类型元素一样显示，并添加样式列表标记
table	此元素会作为块级表格来显示
inherit	规定应该从父元素继承 display 属性的值

3、block、inline 和 inline-block 的区别

区别	block	inline	inline-block
独占一行	是	否	否
width	是	否	是
height	是	否	是
margin	是	水平方向有效	是
padding	是	是	是

4、行内元素和块级元素的区别

区别	行内元素	块级元素
宽高	无效	有效
padding	有效	有效
margin	水平方向有效	有效
自动换行	不可以	可以
多个元素排列	默认从左到右	默认从上到下

5、隐藏元素的方法

方法	说明
display: none;	渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件
visibility: hidden;	元素在页面中仍占据空间，但是不会响应绑定的监听事件
opacity: 0;	透明度设置为 0，来隐藏元素。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件
position: absolute;	通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏
z-index: -10;	使用其余元素遮盖当前元素实现隐藏
clip/clip-path	使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件
transform: scale(0,0)	将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件

6、transition 和 animation 的区别

transition	animation
过渡属性，强调过渡，需要触发事件来实现过渡效果。	动画属性，不需要触发事件，可自己执行，并且可以循环

7、伪元素和伪类的区别和作用

伪元素	伪类
在元素前后插入额外的元素或样式，插入的元素没有子文档中生成，它们只在外部显示可见	将特殊的效果添加到特定的选择器上。它是在现有元素上添加类别，并不会产生新的元素
css3 中伪元素在书写是使用双冒号::，比如::before	冒号:用于伪类，比如:hover

伪类是通过在元素选择器上加入伪类改变元素的状态，而伪元素通过对元素的操作来改变元素

8、盒模型

盒模型由四个部分组成，分别是 margin、border、padding、content

标准盒模型和 IE 盒模型的区别在于：在设置 width 和 height 时，所对应的范围不同

• 标准盒模型的 width 和 height 属性的范围只包含了 content
• IE 盒模型的 width 和 height 属性的范围包含了 border、padding 和 content

可以通过修改元素的 box-sizing 属性来改变元素的盒模型：

• box-sizing: content-box 表示标准盒模型（默认值）
• box-sizing: border-box 表示 IE 盒模型（怪异盒模型）

9、实现单行、多行文本溢出隐藏

单行文本溢出

overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出部分使用省略号显示
white-space: nowrap; // 规定段落中的文本不可换行

多行文本溢出

overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display: -webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp: 3; // 显示的行数

10、实现水平垂直居中

利用绝对定位（一）

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

利用绝对定位（二）：适用于已知盒子宽高

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

利用绝对定位（三）：适用于已知盒子宽高

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px; /* 自身 height 的一半 */
  margin-left: -50px; /* 自身 width 的一半 */
}

flex 布局

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

11、浮动

非 IE 浏览器下，容器不设置高度且子元素浮动时，容器高度不能被撑开。此时，内容会溢出到容器外面影响布局

浮动的工作原理

• 浮动元素脱离文档流，不占据空间（引起“高度塌陷”）
• 浮动元素碰到包含它的边框或者其它浮动元素的边框停留

浮动元素可以左右移动，知道遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，但元素浮动之后，不会影响块级元素的布局，只会影响内联元素的布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”

浮动元素引起的问题

• 父元素的高度无法撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素会跟随其后
• 若浮动的元素不是第一个元素，则该元素之前的元素元素也要浮动，否则会影响页面的显示结构

清除浮动的方式

• 给父级元素设置高度
• 最后一个浮动元素之后添加一个空 div 标签，并添加clear: both样式
• 包含浮动元素的父级元素添加overflow: hidden或overflow: auto样式
• 使用 ::after 伪元素
• 使用 clear 属性清除浮动

12、块格式化上下文（Block Formatting Context，BFC）

BFC: 块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗的讲，BFC 是一个独立的环境布局，可以理解为一个容器，在这个容器中按照一定的规则进行物品摆放，并且不会影响其他环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。

BFC 的创建条件

• 根元素：body
• 元素设置浮动：float 除 none 以外的值
• 元素设置绝对定位：position 设置为 absolute 或 fixed
• display 设置为 inline-block、table-cell、table-caption、flex 等
• overflow 设置为 hidden、auto、scroll

BFC 的特点

• 垂直方向上，自上而下排列，和文档流的排列方式一致
• 在 BFC 中上下相邻的的两个容器的 margin 会重叠
• 计算 BFC 的高度时，需要计算浮动元素的高度
• BFC 区域不会与浮动的容器发生重叠
• BFC 是独立的容器，容器内部元素不会影响外部元素
• 每个元素的 margin-left 值和容器的 border-left 相接处

BFC 的作用

• 解决 margin 的重叠问题：由于 BFC 是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题
• 解决高度塌陷的问题：对子元素设置浮动后，父元素会发生高度塌陷，即 height 变为 0。只需将父元素变成一个 BFC 即可，常用的办法是给父元素设置overflow:hidden
• 创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了 BFC，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局

13、margin 重叠问题

两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。

计算原则

• 如果两者都是正数，取较大的那个
• 如果一正一负，取正值减去负值后的绝对值
• 都是负值是，用 0 减去两个中绝对值大的那个

解决办法

对于折叠的情况，主要有两种：兄弟之间重叠和父子之间重叠

兄弟间折叠：

• 底部元素变为行内盒子：display: inline-block
• 底部元素设置浮动：float
• 底部元素的 position 的值为absolute/fixed

父子间的折叠：

• 父元素加入：overflow: hidden
• 父元素添加透明边框：border: 1px solid transparent
• 子元素变为行内盒子：display: inline-block
• 子元素加入浮动属性或定位