CSS 面试题汇总（无答案版）.md · smiletolin/frontend-interview-css

# _CSS_ 面试题汇总

### 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. 两个相邻兄弟元素如代码所示，此时两个元素之间的间隔是多少？

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

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

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

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

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

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

### 106. 什么是 _HTML_ 实体？

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

### 108. 什么是 _hasLayout_? 触发 _hasLayout_ 会有什么后果？

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

### 110. 假设视口的宽是 _70px_，高为 _50px_，执行下面代码后，_div_ 元素的宽度为多少？

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

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

smiletolin/frontend-interview-css

简介

发行版

贡献者

近期动态

smiletolin/frontend-interview-css .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

smiletolin/frontend-interview-css