共计 3121 个字符，预计需要花费 8 分钟才能阅读完成。
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
8. 说一下什么是盒子模型？
box-sizeing: content-box：标准盒模型的 width 和 height 属性的范围只包含了 content。
box-sizeing: border-box：IE 盒模型的 width 和 height 属性的范围包含了 border、padding 和 content。
9. 说一下媒体查询 / 栅格布局?
❌10.margin 和 padding 的使用场景？
11. 说一下隐藏元素的方法有哪些？
12.CSS3 中的 transform 有哪些属性？
translate 位移
rotate 旋转
scale 缩放
skew 斜切
13…说一下 display:none 与 visibility:hidden 的区别？
14. 常见的图片格式及使用场景？
二. 基础知识（二）
1.✅CSS 优化和提高性能的方法有哪些？
使用 link 样式分离
css 压缩
选择器性能问题，别让 css 做太多计算
渲染性能问题，减少重绘回流
http 问题，如使用精灵图
2.📢✅z-index 属性在什么情况下会失效?
父元素 position 为 relative 时，子元素的 z-index 失效。解决：父元素 position 改为 absolute 或 static；
元素没有设置 position 属性为非 static 属性。解决：设置该元素的 position 属性为 relative，absolute 或是 fixed 中的一种；
元素在设置 z-index 的同时还设置了 float 浮动。解决：float 去除，改为 display：inline-block；
3.📢📢✅说一下对 requestAnimationframe 的理解？
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
用 cancelAnimationFrame()来取消执行动画
优势：
- CPU 节能、函数节流、减少 DOM 操作
4. 为什么有时候⽤ translate 来改变位置⽽不是定位？
5.li 和 li 之前有看不见的空白间隔是什么原因，如何解决？
6. 对 CSSSprites 的理解？
7. 什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到 @3x, @2x 这种图片？
8. 对 line-height 的理解及其赋值方式？
9.dispaly:inline-block 什么时候会产生间隙？
10. 对 CSS 工程化的理解？
三、定位与浮动
1.✅说一下清除浮动有哪些方式？
给父级 div 定义
height属性最后一个浮动元素之后添加一个空的 div 标签，并添加
clear:both样式包含浮动元素的父级标签添加
overflow:hidden或者overflow:auto使用 :after 伪元素。由于 IE6-7 不支持 :after，使用 zoom:1
2.✅说一下 clear 属性清除浮动的原理？
官方对 clear 属性解释：“元素盒子的边不能和前面的浮动元素相邻”，对元素设置 clear 属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。
clear 属性只有块级元素才有效的，而::after 等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置 display 属性值的原因。
3.✅📢说一下什么是 margin 重叠问题？如何解决？
4.✅📢说一下对 BFC 的理解？怎么创建 BFC?
根元素：body；
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex 等；
overflow 值为：hidden、auto、scroll；
5.✅说一下 position 的属性 / 作用有哪些？
6.✅说一下 sticky 定位怎么使用？是在哪两个定位间切换？
- 如设置 top：0 可以粘滞效果，在 fixed 和 relative 直接切换
7.absolute 与 fixed 共同点与不同点?
共同点：
改变行内元素的呈现方式，将 display 置为 inline-block
使元素脱离普通文档流，不再占据文档物理空间
覆盖非定位文档元素
8.📢display、float、position 的关系?
- 总的来说，可以把它看作是一个类似优先级的机制，”position:absolute” 和 ”position:fixed” 优先级最高，有它存在的时候，浮动不起作用，’display’的值也需要调整；其次，元素的’float’特性的值不是 ”none” 的时候或者它是根元素的时候，调整’display’的值；最后，非根元素，并且非浮动元素，并且非绝对定位的元素，’display’特性值同设置值。
9.📢说一下元素的层叠顺序？
四. 布局问题
1.✅说一下常见的 CSS 布局单位 /px、em、rem 的区别及使用场景？
2.✅说一下 Flex 布局 /grid 布局的区别？
- Flex 一维布局、grid 二维布局
3.✅说一下三栏布局怎么实现？
绝对定位，中间绝对定位，两边 margin 值
浮动，两边固定大小，对应方向浮动，中间设置 margin 值，且中间一栏放最后
利用 flex:1
利用 grid-template-rows
圣杯布局：利用浮动和负边距来实现，margin 负值将其移动到上一行
双飞翼布局：双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。
4.✅说一下水平垂直居中有哪些方式？
5. 说一下两栏布局怎么实现？
6. 怎么根据设计稿进行移动端适配？
7. 说一下响应式设计的概念及基本原理？
8. 说一下 grid 布局？
五. 场景应用 / 如何实现
1.✅怎么实现一个三角形 / 梯形？
2.✅怎么画一条 0.5px 的线？
transform: scale(0.5,0.5);
3.✅怎么实现一个扇形？
div{
border: 100px solid transparent;
width: 0;
heigt: 0;
border-radius: 100px;
border-top-color: red;
}
4.✅怎么设置小于 12px 的字体？
5.✅如何解决 1px 的问题？
window.devicePixelRatio = 设备的物理像素 / CSS 像素。
#container[data-device=“2”] {
border:0.5px solid #333
}
- 利用 tranform：scale（0.5）
6.✅如何判断元素是否到达可视区域？
window.innerHeight是浏览器可视区的高度；document.body.scrollTop || document.documentElement.scrollTop是浏览器滚动的过的距离；imgs.offsetTop是元素顶部距离文档顶部的高度（包括滚动条的距离）；内容达到显示区域的：
img.offsetTop
7. 怎么实现一个宽高自适应的正方形？
原文地址: CSS 面试题整理
