CSS 面试题汇总

CSS 面试题汇总（无答案版）

# 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