CSS 面试题汇总

1. 介绍下 BFC 及其应用

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

3. flex 布局如何使用？

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

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

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

<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 盒模型中的宽度。

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

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

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

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

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

 <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 元素的宽度为多少？

 <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 元素的字体大小。

 <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 的水平、垂直位置距离。

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. 手写一个三栏布局，要求：垂直三栏布局，所有两栏宽度固定，中间自适应

0