前端面试实录CSS篇
1. CSS 选择器以及优先级?
- • CSS 选择器
| 选择器 | 格式 | 优先级权重 |
| id 选择器 | #id | 100 |
| 类选择器 | .classname | 10 |
| 属性选择器 | [title]/[title="one"] | 10 |
| 伪类选择器 | div:hover | 10 |
| 标签选择器 | div | 1 |
| 伪元素选择器 | input::after | 1 |
| 子选择器 | ul>li | 0 |
| 后代选择器 | li a | 0 |
| 通配符选择器 | * | 0 |
- • CSS 选择器优先级
- 1. !important 例外，优先级最高
- 2. 内联样式
- 3. id 选择器
- 4. 类选择器，属性选择器，伪类选择器
- 5. 标签选择器，伪元素选择器
- 6. 子选择器，后代选择器，通配符选择器
- • 选择器权重
- • 参考 W3C:
https://www.w3.org/TR/selectors/#specificity - • 例子：
./Demo/css_selector_and_priority.html
2. link 和 @import 的区别？
- •
link: 链接外部资源的标签，此标签决定了文档与外部资源的关系，常用于链接样式表(css)，网页站点图标(favicon)。
- • 用法；
- • 属性：
- 1. rel: 表示关系：realtionship,
- 2. href: 网络路径/相对路径/绝对路径
- 3. size: icon 的大小
- 4. disabled: 仅对 rel = "stylesheet" 类型生效
- • 区别：
- 1. 从属差异：link 为 html 标签，可以加载 css, 也可以引入网站图标（facaion）, 定义 rel 链接属性，而 @import 是 css 提供，只能用于加载 css
- 2. 加载差异：link 引用的 css,在页面加载时同时加载。而 @import 在页面加载完后才加载
- 3. 兼容性：link 是 html 标签，没有兼容问题。而 @ import 是 css2.1 提出的，IE5 以下的浏览器不支持。
- 4. 可操作性：link 可使用 js 来控制 DOM 去改变样式，而 @import 不支持，因为 DOM 方法是基于文档的。
- 5. 权重差异：
- • 在样式中：link 样式的权重高于 @import 的权重吗，例如:
/* @import "03.css"; */ body, html { background-color: aquamarine; } /* @import "03.css"; */
- • 在页面中：不存在权重问题，谁在最低下就使用谁的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div class="container"></div> </body> </html> <link rel="stylesheet" href="./01.css" /> <style> @import "./03.css"; </style>
3. 对盒模型的理解？
- • 组成：由四部分组成：margin, padding, border, content
- • 分类：标准盒模型 和 怪异盒模型(IE 盒模型)
- • 标准盒模型：width 和 height 的范围只包含了 content
img - • 怪异盒模型：width 和 height 的范围只包含了 border, padding, content
img - • 两者区别：在于 width 和 height 所包含的范围不同
- • 属性：
- • 标准盒模型：
box-sizing: content-box; - • 怪异盒模型：
box-sizing: border-box;
4. 隐藏元素的方法有哪些？
- 1.
display: none;: 不会渲染该元素，不会占位，也不会响应绑定的监听事件 - 2.
visibility: hidden;: 会渲染，但是不会显示且会占位，也不会响应绑定的监听事件 - 3.
opacity: 0;: 将元素的透明度设置为 0, 以此来达到隐藏元素的效果，会占位，能够响应绑定的监听事件 - 4.
position: absolute;: 使用绝对定位将元素移除了可视区域外，不会占位，以此来实现元素的隐藏 - 5.
z-index：负值;: 使用其他元素将该元素隐藏,会占位 - 6.
clip：position:absolute; clip: rect(200px, 200px, 200px, 200px);/clip-path：clip-path: circle(0);: 使用元素裁切的 方式实现元素隐藏，会占位，不会响应绑定的监听事件 - 7.
transform: scale(0,0): 使用缩放，来实现元素的隐藏，会占位，但是不会响应绑定的监听事件 - 8.
filter: opacity(0): 使用元素滤镜来改变元素的透明度, 会占位
5. 伪元素和伪类的区别和作用？
- • 伪类：将某种状态时添加到已有元素上，这个状态是根据用户的行为变化而变化为的。比如： hover，active, visited
- • 伪元素：用于创建一些原本不在文档树中的元素或样式, 比如：::after,::before。
- • 区别：
- • 伪类操作的对象是文档树种已有的元素或样式
- • 伪元素则是创建一个文档树以外的元素或样式
- • : 表示伪类
- • :: 表示伪元素
- • 作用：
- • 伪类：通过在元素选择器上加入伪类改变元素的状态
- • 伪元素：通过对元素的操作进而改变元素
6. CSS3 有哪些新特性？
- • 圆角：
border-radius: 8px; - • 阴影：
text-shadown: 2px 2px #ff0000; box-shadown: 10px 10px 5px #888888; - • 文字方向：
text-decoration - • 渐变：
linear-gradient: 线性渐变 radial-gradient 径向渐变 - • 旋转：
transform - • css选择器：
伪类选择器：first-child, 伪元素选择器，否定选择器(:not)，属性选择器[title="one"] - • 多列布局：
multi-column:
- • column: 规定列宽和列数
- • column-count: 列的数量
- • column-width: 列宽
- • column-gap: 列间隙
- • column-rule: 列之间的宽度，样式和颜色
- • column-span:
- • column-fill: 列填充：auto: 根据内容填充。balance: 每列平均
7. 对媒体查询的理解？
- • 使用
@media查询，可针对不同的媒体类型定义不同的样式，@media 可针对不同的屏幕尺寸设置不同的样式，特别是设置响应式的页面， @media 非常有用。当重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面。
8. 对 BFC 的理解，如何创建 BFC？
- • 定义：
- • Box: CSS 布局的对象和基本单位，一个页面由很多个 box 组成，这个 Box 就是我们常说的盒模型
- • Formatting context: 块级格式化上下文，页面中的一个渲染区域，有一套渲染规则，它决定了其子元素如何定位，以及其他元素的关系和相互作用。
- • 理解：BFC(Block Formatting Context, BFC) 块级格式化上下文，页面布局盒模型的一种 CSS 渲染模式，是一个独立的容器，在这个容器中里面的元素和外部的元素互不影响。
- • 创建 BFC 的条件：
- 1. 根元素：html,body
- 2. 浮动：float 除 none 以外的值
- 3. 定位：position 为绝对定位(absoluate) 和 固定定位(fixed)
- 4. dispaly 属性：表格布局(grid: table-cell,table-caption) 和 flex(flex-items,flow-root) 布局
- 5. multi column(多列布局): column
- 6. overflow: 值为 hidden, auto, scroll
- • BFC 的特点：
- 1. 垂直方向上，自上而下排列，和文档流的排列方式一致
- 2. 在 BFC 中上下两个相邻的两个容器的 margin 会重叠
- 3. 计算 BFC 的高度时，需要计算浮动元素的高度
- 4. BFC 区域不会与浮动的容器发生重叠
- 5. BFC 是独立的容器，容器内部的元素不会影响外部元素
- 6. 每个元素的 margin-left 值和容器的 border-left 相接触
- • BFC 的作用：
- 1. 解决 margin 重叠问题：由于 BFC 是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题。
- 2. 解决高度塌陷问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为 0。解决这个问题，只需要把父元素变成一个 BFC。常用的办法是给父元素设置
overflow:hidden。 - 3. 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。
9. 如何设置小于 12px 的字体？
- • 使用 webkit 内核的:
-webkit-text-size-adjust: none;。chrome 27 版本后不可用了。 - • 使用 css3 的 transform 属性：
transform: scale(0.5); - • 内容固定不变的情况下，将文字内容做成图片，使用图片来解决
10. 单行/多行文本溢出？
/* 多行文本溢出 */ display: -webkit-box; /*作为弹性伸缩盒子模型显示。 */ -webkit-box-orient:vertical; /*设置伸缩盒子的子元素排列方式：从上到下垂直排列 */ -webkit-line-clamp:3; /*显示的行数 */ overflow: hidden; /*溢出隐藏 */ text-overflow: ellipsis; /*溢出用省略号显示 */ /* 单行文本溢出 */ white-space: nowrap; /*规定段落中的文本不进行换行 */ overflow: hidden; /*溢出隐藏 */ text-overflow: ellipsis; /*溢出用省略号显示 */
11. 实现一个三角形？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </body> </html> <style> div{ width: 0px; height: 0px; border: 50px solid transparent; } .div1{ border-top-color: red; } .div2{ border-bottom-color: red; } .div3{ border-left-color: red; } .div4{ border-right-color: red; } </style>
12. 实现一个扇形？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="div1"></div> </body> </html> <style> .div1{ width: 0; height: 0; border-radius: 100px; border: 100px solid transparent; border-top-color: red; } </style>
13. 画一条0.5px的线？
- • 使用 transform 的 scale 来完成
width: 250px; height: 1px; background-color: gray; transform: scaleY(0.5);
14. 常见的图片格式以及使用场景？
- 1. bmp: 无损的，此图片格式不会对数据进行压缩，所以 bmp 格式的图片通常都是较大文件
- 2. git: 无损的，特点是文件小，适用场景：对色彩要求不高且文件体积较小
- 3. jpeg,jpg: 有损的，有损压缩会导致图片模糊，文件类型比 gif 较大
- 4. png-8：无损的，png-8 比 gif 文件还小
- 5. png-24: 无损的，优点在于压缩了图片数据
- 6. svg: 无损矢量图，放大不会失真，适用场景：绘制 LOGO, Icon
- 7. webp: 同时支持有损和无损，同质量的图片，webp 拥有更小的文件体积，更好地提升用户体验，
- • 在无损压缩情况下：相同质量的 webp 图片，要比 png 小 26%
- • 在有损压缩情况下，具有相同精度的 webp 图片，文件大小要比 jpeg 小 25%~34%
- • webp 还支持图片透明度，一个无损压缩的 webp 图片，想要支持透明度，只需要 22% 的格外文件大小。
15. CSS 优化和提高性能的方法有哪些？
- • 加载性能
- 1. css 压缩
- 2. 减少使用属性简写方式
- 3. 减少使用 @import，建议使用 link,
- • 选择器性能
- 1. 减少选择器嵌套层级
- 2. 使用关键的选择器，不要逐层进行选择
- • 渲染性能
- 1. 慎重使用浮动和定位
- 2. 尽量减少重绘和回流的发生
- 3. 删除空规则,也就是预留样式->{}
- 4. 属性值为浮点值时，省略前面的 0
- 5. 不要使用 @import 前缀引用样式，会影响 css 加载速度
- 6. 避免选择器嵌套过深
- 7. 不滥用 web 字体
- • 可维护性，健壮性
- 1. 抽离公共样式
- 2. 样式与内容分离
16. ::before 和 :after 的双冒号和单冒号有什么区别？
- 1.
单冒号(:)表示伪类，双冒号(::)表示伪元素 - 2. 在 CSS2.1 中，伪元素都是使用
单冒号来表示伪元素的，但在 CSS3 规范中，伪元素的语法被修改为使用双冒号
17. CSS 预处理器/后处理器是什么？为什么要使用他们？
- • 预处理器：
less, sass, styuls，它们增加了 css 代码的复用性，例如：变量，循环，方法等 - • 后处理器：
postcss，最常做的是给 css 代码添加浏览器前缀，实现跨浏览器兼容性的问题、 - • 为什么要使用他们？
- 1. 结构清晰，便于扩展
- 2. 屏蔽浏览器私有语法的差异
- 3. 使用多重继承
- 4. 提到 css 代码的兼容性
