css面试大全

傷城~ 2022-11-12 13:50 137阅读 0赞

## 1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70]

## 2、box-sizing属性？ ##

![在这里插入图片描述][2021032221074992.png]

## 3、CSS选择器有哪些？哪些属性可以继承？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 1]

## 4、CSS优先级算法如何计算？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 2]

## 5、CSS3新增伪类有那些? ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 3]

## 6、display有哪些值？说明他们的作用? ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 4]

## 7、position的值？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 5]

## 8、CSS3有哪些新特性？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 6]

## 9、请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？ ##

![在这里插入图片描述][20210322211114983.png]

## 10、常见的兼容性问题？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 7]

## 11、为什么要初始化CSS样式 ##

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

## 12、absolute的containing block计算方式跟正常流有什么不同？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 8]

## 13、display:none与visibility：hidden的区别？ ##

![在这里插入图片描述][2021032410581971.png]

## 14、position跟display、overflow、float这些特性相互叠加后会怎么样？ ##

![在这里插入图片描述][20210324105824825.png]

## 15、对BFC规范(块级格式化上下文：block formatting context)的理解？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 9]

## 16、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 10]

## 17、上下margin重合的问题 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 11]

## 18、设置元素浮动后，该元素的display值是多少？ ##

自动变成display:block

## 19、移动端的布局用过媒体查询吗？ ##

![在这里插入图片描述][20210324111858421.png]

## 20、使用 CSS 预处理器吗？ ##

Less sass

## 21、CSS优化、提高性能的方法有哪些？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 12]

## 22、浏览器是怎样解析CSS选择器的？ ##

![在这里插入图片描述][20210324112023496.png]

## 23、在网页中的应该使用奇数还是偶数的字体？为什么呢？ ##

![在这里插入图片描述][20210324112101959.png]

## 24、margin和padding分别适合什么场景使用？ ##

![在这里插入图片描述][20210324112134850.png]

## 25、元素竖向的百分比设定是相对于容器的高度吗？ ##

![在这里插入图片描述][20210324112210163.png]

## 26、全屏滚动的原理是什么？用到了CSS的哪些属性？ ##

![在这里插入图片描述][20210324112251267.png]

## 27、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 13]

## 28、视差滚动效果？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 14]

## 29、 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用 ##

![在这里插入图片描述][20210324112432649.png]

## 30、你对line-height是如何理解的？ ##

![在这里插入图片描述][20210324112526858.png]

## 31、怎么让Chrome支持小于12px 的文字？ ##

![在这里插入图片描述][20210324112802405.png]

## 32、让页面里的字体变清晰，变细用CSS怎么做？ ##

![在这里插入图片描述][20210324112844442.png]

## 33、position:fixed;在android下无效怎么处理？ ##

![在这里插入图片描述][20210324112907174.png]

## 34、如果需要手动写动画，你认为最小时间间隔是多久，为什么？ ##

![在这里插入图片描述][20210324112940624.png]

## 35、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法 ##

![在这里插入图片描述][20210324113014467.png]

## 36、display:inline-block 什么时候会显示间隙？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 15]

## 37、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 ##

![在这里插入图片描述][20210324113117874.png]

## 38、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？ ##

![在这里插入图片描述][20210324113146127.png]

## 39、style标签写在body后与body前有什么区别？ ##

![在这里插入图片描述][20210324113209684.png]

## 40、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? ##

![在这里插入图片描述][20210324113235882.png]

## 41、阐述一下CSS Sprites ##

![在这里插入图片描述][20210324113306681.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70]: /images/20221022/bf2e6d6654ef406f8794486a046d97b9.png
[2021032221074992.png]: /images/20221022/9000da83356541e8947c757857ba7297.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 1]: /images/20221022/7ae0921fd0a948b6a63c613102fc57f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 2]: /images/20221022/7646a4281e9f4965a75c1a9d65d989ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 3]: /images/20221022/b96c6805e9b145bbbd0bcb7f5edfb583.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 4]: /images/20221022/9b1b787305f54713a9dfb0cb68f57d7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 5]: /images/20221022/b39a4438fab04e6e80a30208a5590dfa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 6]: /images/20221022/9db1be1290e04de89d4adcef40e44f43.png
[20210322211114983.png]: /images/20221022/365e7906ecc94bbdab7e5eec1ead173b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 7]: /images/20221022/285b2a346fc9485cb54497301bd2336a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 8]: /images/20221022/3c19961413724d97bd15cfe52962aa39.png
[2021032410581971.png]: /images/20221022/bd644ced92624f549333a2db97041aba.png
[20210324105824825.png]: /images/20221022/25f430dc9aa746428be477f73a5953b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 9]: /images/20221022/53ee4899aba64567aefddaffbe1dc808.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 10]: /images/20221022/06eaa50123a4454b8a236e4e2a998ae6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 11]: /images/20221022/9fd4a634452249c3a4e35fa14fa9a65e.png
[20210324111858421.png]: /images/20221022/9c290415ee314a92b1096b3368a05bfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 12]: /images/20221022/923d2f1f157c4d3f8f5132163ab62675.png
[20210324112023496.png]: /images/20221022/eb47ec5d18294dc592cf467732487342.png
[20210324112101959.png]: /images/20221022/2da4026be366463ca8309833ac86d71b.png
[20210324112134850.png]: /images/20221022/017cdc41368747f9b08ed616669242e7.png
[20210324112210163.png]: /images/20221022/0cb0855a47f24c18ad3399e331f8dfd5.png
[20210324112251267.png]: /images/20221022/79bf46a70290402d90b37f2ea5d4af0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 13]: /images/20221022/ebb155170c7445ddb55b35cb692c1320.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 14]: /images/20221022/c737412bef434f0582c929b9500c0a0c.png
[20210324112432649.png]: /images/20221022/178306b4c9a8467dafce57994bd354bf.png
[20210324112526858.png]: /images/20221022/e2ddf31335e146878c2ed213bc929014.png
[20210324112802405.png]: /images/20221022/a41d027f47e3471b809f782ebfbd8bc4.png
[20210324112844442.png]: /images/20221022/fa68fc54f14443e9941500fafcda63f5.png
[20210324112907174.png]: /images/20221022/5417665481184d48b1c2aa057081ee55.png
[20210324112940624.png]: /images/20221022/e6df3def916f46e3b814828a339a5a15.png
[20210324113014467.png]: /images/20221022/07e044776b3f492ca38f8c28c68dbd74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 15]: /images/20221022/c9bfb07b3ee84f31b27152f285493b41.png
[20210324113117874.png]: /images/20221022/bca2175591a848bd9076cf5d650b4563.png
[20210324113146127.png]: /images/20221022/9dc9ae67739746c68e25355566f46bf9.png
[20210324113209684.png]: /images/20221022/67995f2a212a42019bb65c6d54d308ca.png
[20210324113235882.png]: /images/20221022/ba997874f22f43f8a5f261628a330424.png
[20210324113306681.png]: /images/20221022/dc7c804aa0004d7aa241f122bccab000.png