前端知识点（面试可看）—— CSS篇

摘要

马上就要毕业啦，没有参加2023年的秋招，准备在最近开始找全职或者实习工作，然后也马上过年了，总结和理一下自己的知识要点，参加2024年的春招。

1. link和@import区别

• link是XHTML标签，除了加载CSS之外，还可以定义RSS等其他业务；@import属于CSS范畴，只能用于加载CSS
• link加载CSS，在页面载入时加载；@import需要页面完全载入完后加载
• link时XHTML标签，无兼容问题；@import时CSS2.1提出的
• link支持JS使用DOM去改变样式；而@import不支持

2. display:none和visibility：hidden的区别

• 前者会让元素完全从渲染树中消失
• 后者不会消失，且会占据原来的空间，只是内容不可见

3. 伪元素和伪类的区别和作用

• 伪元素： 在内容元素的前后插入额外的元素或者样式，但是这些元素不在文档中生成，只在外部中可以找到。
• 伪类： 将特殊的效果添加到特定选择器上，他是已有元素上添加类别的，不会产生新的元素。

4. RequestAnimationframe

实现动画的方法：

• JS：通过setTimeout实现
• CSS3：transition和animation
• HTML5：canvas

此外HTML专门用于请求动画的API，就是window.requestAnimationFrame0(callback)。主要是告诉浏览器，下次重绘之前调用指定的回调函数更新函数，参数为一个回调函数，会在下次进入浏览器时执行。该方法属于宏方法，会在微任务执行完后去执行。

如何取消： RequestAnimationframe会返回一个id，可以调用`window.cancelAnimationFrame(id)``来取消动画。

优势：

1. CPU节能
2. 函数节流
3. 减少DOM操作

5. CSS3新特性

• 新增各种CSS选择器(:not(.input): 所有不是input的元素)
• 圆角
• 多列布局
• 阴影和反射
• 文字特效
• 文字渲染
• 线性渐变
• 动画：旋转、缩放、定位、倾斜、多背景等

6. CSS Sprites（精灵图）

其实就是一张大图片，将页面中要用的所有图片包含进去，然后使用CSS中的background-image、background-repeat、background-position都没后文哦

优点：

1. 可以减少http的请求，提高性能
2. 可以减少图片字节，将三张合成一张

缺点：

1. 图片合并时需要有序，有间隔的，以免出现不必要的背景。
2. 维护成本高

7. CSS优化和提高性能的方法

1. css压缩
2. css单一模式
3. 减少使用@import

8. CSS预处理器/后处理器

预处理器： less、sass、stylus

后处理器： postcss，通常是在完成的样式表根据css规范处理css，让其更有效。目前最有效地就是给css属性添加前缀，实现跨浏览器兼容性问题。

优势：

1. 结构清晰，便于扩展
2. 可以很方便的屏蔽浏览器私有语法的差异
3. 可以轻松实现多重继承
4. 完美兼容CSS代码

9. ::before和:after为什么一个双冒号一个单冒号

冒号属于伪类，双冒号属于为元素

文本溢出

.single{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.more{
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
}

10. 媒体查询

语法格式：

@media(max-width:1280px){
	.test{
		background:yellow;
	}
}

其实简单来说，就是可以针对不同设备的页面宽度来使用对应的css样式，从而达到响应式的目的。

11. CSS工程化

为了解决什么：

1. 宏观设计
2. 编码优化
3. 构建
4. 可维护性

怎么做最好：

1. 使用预处理器
2. 使用PostCss
3. 使用Webpack loader

12. BFC

什么是BFC？

• B就是box是CSS布局对象和基本单位，一个页面是由多个盒子模型（box）组成的
• FC就是formatting context，表示上下文格式化，他是页面的一块渲染区域并且有一条渲染规则，是布局过程中生成块级盒子的区域。

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

创建条件：

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

特点：

1. 垂直方向上、由上而下，和文档流一样
2. 上下相邻的margin会重叠
3. 计算高度时，需要计算浮动元素的高度
4. 不会与浮动的容器发生重叠
5. 是独立的元素，不会影响外部元素
6. 每个元素的左margin值和左border相接触

作用：

1. 解决margin重叠问题，如果是两个BFC那他们相互是独立的，彼此不影响。
2. 解决高度塌陷问题
3. 创建自适应两栏布局

13. 场景应用

13.1 实现一个三角形

.triangle{
	border:100px solid transparent;
	border-top-color:red;
}

13.2 实现一个扇形

.sector{
	border:100px solid transparent;
	border-top-color:red;
	border-radius:100px;
}

13.3 自适应正方形

.square{
width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

14. 字体问题

14.1 设置小于12px字体

1. 使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决。-webkit-text-size-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。
2. 使用transform的scale属性
3. 使用图片

14.2 1px问题

1px问题主要是在Retina屏幕的机器中会显示的很粗，因为他和移动设备中的1px不一样，需要去专门设置一个属性，就是window.devicePixelRatio = 物理像素 / CSS像素