TAYUN

切换日光/暗黑模式

CSS 面试题汇总 ​

16 天前更新

1. 介绍下 BFC 及其应用 ​

2. 介绍下 BFC、IFC、GFC 和 FFC ​

3. flex 布局如何使用？ ​

4. 怎么让一个 div 水平垂直居中 ​

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

6. 已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。 ​

js
<img src="1.jpg" style="width:480px!important;”>

7. 如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性 ​

8. 居中为什么要使用 transform（为什么不使用 marginLeft/Top）（阿里） ​

9. 介绍下粘性布局（sticky）（网易） ​

10. 说出 space-between 和 space-around 的区别？（携程） ​

11. CSS3 中 transition 和 animation 的属性分别有哪些（哔哩哔哩） ​

12. 隐藏页面中的某个元素的方法有哪些？ ​

13. 层叠上下文 ​

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

15. 讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理 ​

16. 说说渐进增强和优雅降级 ​

17. 介绍下 positon 属性 ​

18. 如何用 CSS 实现一个三角形 ​

19. 如何实现一个自适应的正方形 ​

20. 如何实现三栏布局 ​

21. import 和 link 区别 ​

22. 说说你对 BFC 的理解 ​

23. 清除浮动的方法 ​

24. 说说选择器的权重计算方式 ​

25. css reset 和 normalize.css 有什么区别？ ​

26. 说说两种盒模型以及区别 ​

27. 如何避免重绘或者重排？ ​

28. 如何触发重排和重绘？ ​

29. 重绘与重排的区别？ ​

30. 如何优化图片 ​

31. 说说重绘（Repaint）和回流（Reflow） ​

32. 你能描述一下渐进增强和优雅降级之间的不同吗? ​

33. 如何在页面上实现一个圆形的可点击区域？ ​

34. 什么是渐进式渲染（progressive rendering）？ ​

35. CSS3 新增了那些东西？ ​

36. 我想实现一根只有 1px 的长线怎么实现? ​

37. 三角形怎么实现？要设置宽高吗？ ​

38. box-sizing 有什么作用？ ​

39. img 标签在页面中有 1px 的边框，怎么处理 ​

40. 如何绝对居中（不用定位）（看书网） ​

41. CSS 选择器权重值 ​

42. 我有 5 个 div 在一行，我要让 div 与 div 直接间距 10px 且最左最右两边的 div 据边框 10px，同时在我改变窗口大小时，这个 10px 不能变，div 根据窗口改变大小（长天星斗） ​

43. bootstrap 响应式的原理是什么 ​

44. 如何做响应式？ ​

45. 什么是响应式设计 ​

46. 块级元素转行内元素除了 display:inline 还有什么？ ​

47. 对 CSS hack 技术的理解 ​

48. px 和 em 的区别 ​

49. div 之间的间隙是怎么产生的，应该怎么消除？ ​

50. position 有哪些值，各自的用法如何？ ​

51. 相对定位、绝对定位、固定定位的区别 ​

52. display:none 和 visibility:hidden 的区别 ​

53. 触发 BFC 的机制 ​

54. div 怎么垂直居中 ​

55. less、sass 是什么？为什么要用它？ ​

56. 如何隐藏一个 DOM 元素 ​

57. 你怎么处理页面兼容性问题？ ​

58. CSS 引用的方式有哪些？link 和 @import 的区别？ ​

59. CSS 动画如何实现？ ​

60. display：inline-block 在什么情况下会产生间隙？ ​

61. position 和 display、overflow 发生重叠时会发生什么？ ​

62. 什么是选择器？有哪些选择器？ ​

63. 什么是继承？CSS 中哪些属性可以继承？哪些不可以继承？ ​

64. 谈谈你对响应式的理解。 ​

65. CSS 的计算属性知道吗 ​

66. 为何 CSS 放在 HTML 头部？ ​

67. background-size 有哪 4 种值类型？ ​

68. transition、transform、animate 的区别？ ​

69. 描述 CSS reset 的作用和用途？ ​

70. 在 CSS 中，关于盒子的 margin 属性叙述正确的是 ​

A. 边距 margin 只能取一个值

B. margin 边距的属性有 margin-left、margin-right、margin-top、margin-bottom

C. margin 属性的值不可为 auto

D. margin 的参数值不能全部设置为 0px

71. 以下代码中，属于相对定位的是 ​

A. #b{width:100px; position:relative}

B. #b{width:100px; position:static}

C. #b{width:100px;}

D. #b{width:100px; position:absolute}

72. 以下选项中不能实现清除浮动的是（ ） ​

A. 空 div

B. hover 伪选择器

C. clear 属性

D. overflow 属性

73. 关于 z-index 属性叙述正确的是（ ） ​

A. 必须与 postion 一起使用才能生效，此时 postion 取任何值都可以

B. 此值越大，层的顺序越往下

C. 一般后添加的元素，其 z-index 值越大

D. 即使上面的层没有任何内容也会挡住下面的层，使下面的层显示不出来

74. 有一个高度自适应的 div，里面有 2 个 div，一个高度 100px，希望另一个填满剩下的高度？（CSS 实现） ​

75. display 有哪些值？说明他们的作用。 ​

76. position 的值 relative 和 absolute 的定位原点是？ ​

77. 当 margin-top、padding-top 的值是百分比时，分别是如何计算的？ ​

A. 相对父级元素的 height，相对自身的 height

B. 相对最近父级块级元素的 height，相对自身的 height

C. 相对父级元素的 width，相对自身的 width

D. 相对最近父级块级元素的 width，相对最近父级块级元素的 width

78. 伪元素 :before :after 的作用？ ​

79. 如何使用选择器来隐藏第一个列表项目？ ​

80. transition 和 animation 的区别以及应用场景？ ​

81. 在 rem 自适应页面中使用 sprite 会出现背景图不随元素放大缩小的情况，如何解决？ ​

82. Normalize 是什么？ ​

83. 谈一谈 CSS 中的 2D 转换。 ​

84. 谈一谈 CSS3 多列属性是什么？以及其使用场景 ​

85. vw、vh 是什么？ ​

86. 如何通过选择器选择 3 的倍数？ ​

87. 页面布局有几种方式？ ​

88. 什么是流式布局？ ​

89. 什么是静态布局？ ​

90. 什么是自适应布局？什么是响应式布局？ ​

91. 对比各种布局方式的特点。 ​

92. 文字超出了元素的宽度如何使用 CSS 处理？ ​

93. 内外边距取值 1 个、2 个、3 个、4 个参数分别表示什么意思？ ​

94. 处理长宽不固定的元素居中方案？ ​

95. 三角形如果不使用图片实现，CSS 如何实现？ ​

96. 你在工作中是如何使用伪类的？列举一些常用的伪类以及用途。 ​

97. 列举 flex 布局在你的实际项目里的使用，它能很方便的帮你做一些什么事情？ ​

98. 如何将大量可变化的图片显示到页面并不影响浏览器性能？ ​

99. 图片与图片之间默认存在的间距如何去除？ ​

100. 阅读代码，计算元素在 W3C 盒模型中的宽度，和在 IE 盒模型中的宽度。 ​

css
div {
  width: 100px;
  padding: 10px;
  border: 1px solid;
  margin: 10px;
}

101. 两个相邻兄弟元素如代码所示，此时两个元素之间的间隔是多少？ ​

vue
<div style="margin-bottom: 20px;"></div>
<div style="margin-top: 10px;"></div>

102. 不使用 border 属性，使用其他属性模拟边框。 ​

103. 阅读代码，计算 ul 的高度。 ​

vue
 <ul style="overflow: hidden;">
   <li style="height: 100px; float: left;"></li>
 </ul>

104. 有哪些方式可以将 p 文字设置为红色？ ​

105. 如何使用媒体查询实现视口宽度大于 320px 小于 640px 时 div 元素宽度变成 30%？ ​

106. 什么是 HTML 实体？ ​

107. 什么是全局属性？列举两个全局属性。 ​

108. 什么是 hasLayout? 触发 hasLayout 会有什么后果？ ​

109. 在定位属性 position 中，哪个值会脱离文档流? ​

110. 假设视口的宽是 70px，高为 50px，执行下面代码后，div 元素的宽度为多少？ ​

vue
 <style>
   section{
     margin: 6px;
   }
   div{
     width: 50vw;
     height: 50vh;
   }
 </style>
 <section>
    <div></div>
 </section>

111. 伪元素 ::before 和 :before 有什么区别？ ​

112. cale( ) 函数是什么？有什么作用？ ​

113. :first-child 和 :first-of-type 有什么不同？ ​

114. 什么叫 web 安全色？ ​

115. 在 CSS 中，background-color: transparent 和 opacity: 0 有什么区别？ ​

116. 阅读代码分析 p 元素的字体大小。 ​

vue
 <style>
   section{font-size: 32px;}
   section>div{font-size: 50%;}
 </style>
 <section>
    <div>
     <p>lorem</p>
   </div>
 </section>

117. @font-face 有什么作用？ ​

118. 绝对定位和浮动有什么异同？ ​

119. 字体风格 font-style 的关键字有两个：italic 和 oblique 它们有什么区别？ ​

120. 文本“强制换行”的属性是什么？ ​

121. 阅读代码，分析最终执行结果 div 的水平、垂直位置距离。 ​

css
div {
  width: 200px;
  height: 100px;
  padding: 10px;
  transform: translate(50%, 50%);
}

122. 设置了元素的过渡后需要有触发条件才能看到效果，列举出可用的触发条件。 ​

123. 怎样把背景图附着在内容上？ ​

124. CSS 优化、提高性能的方法有哪些？ ​

125. 网页中应该使用奇数还是偶数的字体？ ​

126. margin 和 padding 分别适合什么场景使用？ ​

127. 对于 line-height 是如何理解的？ ​

128. 如何让 Chrome 支持小于 12px 的文字？ ​

129. 如果需要手动写动画，你认为最小时间间隔是多久？ ​

130. 简述 png、jpg、gif 这些图片格式的适用场景，有没有了解过 webp? ​

131. style 标签写在 body 后面与 body 前面有什么区别？ ​

132. 阐述一下 CSS Sprites ​

133. 写出背景色渐变的 CSS 代码 ​

134. 写出添加下划线的 CSS 代码 ​

135. 写出让对象顺时针旋转 90 度的 CSS 代码（最好附带动画效果） ​

136. CSS 优先级顺序正确的是（ ） ​

A. !important > class > id > tag

B. !important > tag > class > id

C. !important > id > class > tag

D. Class > !important > id > tag

137. 如何产生带有正方形项目的列表 ​

A. type:square

B. type:2

C. list-style-type:square

D. list-type:square

138. 手写一个三栏布局，要求：垂直三栏布局，所有两栏宽度固定，中间自适应 ​