校招考点汇总-CSS

考点

• 布局
  • flex
  • grid
  • 双飞翼,圣杯，瀑布流等等布局（ TODO: 等待补全）
• css动画
• 预处理器（scss or less, 会简单使用即可）
• 样式优先级
• css变量
• css函数
• 伪类与伪元素
• 文档流
  • 脱离普通文档流方案
• BFC
• IFC
• 定位
• visible/display/opacity
• 单位
  • px
  • em
  • rem
  • rpx
  • vh/wh
• 居中
  • 水平
  • 垂直
  • 水平垂直
• 响应式
• 媒体查询
• 层级关系
• 盒模型
• 斑马纹
• 继承
  • 哪些属性能继承
  • 哪些属性不能继承

面试题

理论

1. css是否会阻塞页面渲染
2. 如果是，如何解除
3. display:none visible:hidden opacity:0; 三者有何区别?分别有作用?都会有什么副作用
4. 有哪些属性是不可以被继承的，哪些可以被继承
5. 响应式布局是如何实现的
6. 一个div的高度100px是被其内容撑开的，如果为其添加样式height:50px;overflow:hidden，会触发回流重绘吗？如果其先有样式position:absolute，再添加上述样式会触发哪些
7. 文档流有哪几种
8. 脱离普通文档流有哪些方式
9. 什么是BFC
10. 什么是盒模型
11. position 有哪些属性，分别是什么作用（用于什么场景）
12. 如何实现响应式布局
13. 什么是媒体查询
14. 媒体查询有哪些使用场景
15. 如何书写媒体查询
16. 如何保证h5和pc在显示上的一致性
17. px,rem,em,vw,vh,rpx这些单位分别是什么意思,使用场景是什么
18. 如何实现rem布局
19. 如何实现弹性布局
20. 伪类与伪元素的区别
21. css选择器有哪些
22. 简述一下CSS盒模型，可以手动去改变吗
23. box-sizing的属性有哪些，分别是什么作用
24. 样式优先级怎么计算，样式优先级计算策略
25. 设置样式的方法有哪些
26. display有哪些属性
27. 如何做主题(皮肤)切换
28. css变量如何使用
29. 元素层级关系,如何确定任意两个标签在屏幕上的谁层级更高
30. position值有哪些
31. 隐藏元素的方式有哪些
32. 实现动画的方案有哪些
33. transition和animation的区别
34. 清除浮动的方法有哪些
35. 隐藏页面中某个元素的方法有哪些
36. 常见css函数有哪些
37. 什么是回流，什么是重绘

场景/代码

1. css计算规则考查

<div class="app">
    <div>
        <h1>标题</h1>
        <p class="color-blue color-red color-yellow">什么颜色</p>
    </div>
</div>

.app p{
    color: black;
}
.app .color-yellow{
    color: yellow;
}

.app .color-red{
    color: red;
}

p.color-color-blue{
    color: blue;
}

1. 运行后上面的p标签什么颜色
2. css样式权重如何计算的？
3. 存在冲突时，层叠值（一个元素有多个样式规则）计算规则是怎样的？

2. 居中方案考查

<div id="parent">
    <div id="child">child</div>
</div>

1. 子元素水平居中的方式有哪些
2. 子元素垂直居中的方式有哪些
3. 子元素垂直居中的方式有哪些

4. 简单响应实现

如果期望实现以下的div，该如何书写样式

• 在视口宽度 <=750px展示为长宽都为200px的红色方块
• 在视口宽度 >750px且 <=1400px 时展示为 长宽400px的蓝块
• 在视口宽度 >1400px 是展示为 长宽 600px 的黑色方块

<div class='container'></div>

5. 如何实现表格斑马纹

6. 实现一个头部导航的吸顶方案有哪些

7. 主题换肤实现方案(如黑夜模式)

布局

1.两列瀑布流布局如何实现

2. 三栏布局实现方案

动画/图形

1. 实现一个雪花飘落的动画
2. 实现一个箭头
3. 实现一个圆从左右来回滚动100px的动画
4. 画三角形
5. 画正方体
6. 画梯形
7. 画圆形
8. 画五角星