CSS - 进阶提升篇

CSS 可继承属性常用举例

1. 字体系列属性

• font-family
• font-size
• font-weight
• font-style

2. 文本系列属性

• text-indent ( 定义一个块元素首行文本内容之前的缩进量 )
• text-align
• line-hight
• word-spacing ( 声明标签和单词直接的间距行为 )
• letter-spacing ( 文本字符的间距 )
• color

3. 其他

• cursor
• visibility ( 隐藏元素而不更改文档的布局 )

---

CSS3 常用新增伪类举例

• element:nth-child(n): 选中父元素下的第 n 个标签名为 element 的元素；
• element:nth-last-child(n): 作用同上，从后开始查找；
• element:nth-of-type(n)：选择父元素下第 n 个 element 类型元素；
• element:last-child：最后一个子元素
• element:only-child：如果 element 是父元素下唯一的子元素，则选中；
• element:empty：选中不包含子元素和内容的 element 类型元素；
• :not(element)：选择非 element 元素的每个元素；
• :enabled：表示任何被启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入），或者能够获取焦点，则该元素是启用的。元素也有一个禁用的状态（disabled state），在被禁用时，元素不能被激活或获取焦点 )

---

行内元素的 margin 和 padding 遇到的问题

如果我们给行内元素 margin 与 padding 将会出现以下问题，无论是我这样的小菜鸟或者是大神，我相信大家都遇到过这样的问题：

水平方向有效，垂直方向都无效（垂直方向的 padding-top 和 padding-bottom 会显示出效果，但是高度不会撑开，不会对周围元素有影响）

---

用纯 CSS 创建一个三角形【经典问题】

.demo {
  width: 0;
  height: 0;
  border-width: 20;
  border-style: "solid";
  /* 相邻边框连接处均分 */
  border-color: transparent transparent red transparent;
}
1
2
3
4
5
6
7
8

关于非等边三角形（直角三角形）制作我们可以规定对边的不同尺寸 🦄

---

min-width 、 max-width 与 width 属性间的覆盖

1. max-width 会覆盖 width，即使 width 是行内样式或者设置了 !important。
2. 而min-width 会覆盖 max-width

---

简述伪类和伪元素的区别

伪类的操作对象是文档树中已存在的元素，而伪元素是创建一个文档树外的元素

伪类

伪类用于当已有元素处于某种状态时，为其添加对应的样式，这个状态是根据用户行为变化而变化的。比如说 :hover。它只有处于 dom 树无法描述的状态才能为元素添加样式，所以称为伪类。

伪元素

伪元素用于创建一些原本不在文档树中的元素，并为其添加样式，比如说 ::before。虽然用户可以看到这些内容，但是其实他不在文档树中。

---

移动端视口配置

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
1

• initial-scale: 初始的缩放比例；
• minimum-scale: 允许用户缩放到的最小比例；
• maximum-scale: 允许用户缩放到的最大比例；
• user-scalable: 用户是否可以手动缩放；

---

简述 Rem 及其转换原理

rem 是 CSS3 新增的相对长度单位，是指相对于根元素 html 的 font-size 计算值的大小。

默认根元素的 font-size 都是 16px的。如果想要设置 16px 的字体大小也就是 16px/16px = 1rem。

• 由于 px 是相对固定单位，字号大小直接被定死，无法随着浏览器进行缩放；
• rem 直接相对于根元素 html，避开层级关系，移动端新型浏览器对其支持较好；

---

分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

1. display: none - 不占空间，不能点击，会引起回流，子元素不可见、影响过渡
2. visibility: hidden - 占据空间，不能点击，引起重绘，子元素可设置 visible 进行显示、不影响过渡
3. opacity: 0 - 占据空间，可以点击，引起重绘，子元素不影响、不影响过渡

回流必定重绘

---

简述 CSS 盒模型

盒子由 margin、border、padding、content 组成；

标准盒模型：box-sizing: content-box;

IE 盒模型：box-sizing: border-box;

---

BFC

BFC（Block Format Context）块级格式化上下文，是页面盒模型中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。

创建 BFC 的方式有：

1. html 根元素
2. float 浮动
3. 绝对定位
4. overflow 不为 visible 时
5. display 为表格布局或者弹性布局；

BFC 主要的作用是：

1. 清除浮动
2. 防止同一 BFC 容器中的相邻元素间的外边距重叠问题