前端基础:100道CSS面试题总结

前端基础:100道CSS面试题总结前言CSS是层叠样式表(CascadingStyleSheets)的简称。CSS主要作用是美化网页、布局页面。CSS规则主要由两个主要部分构成:选择器及一条或多条声明。在前端基础面试中,CSS是不会缺席的,下面就给大家分享下CSS的常见面试题。CSS面试题:介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?CSS选择符有哪些?::before和:after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用。伪类与伪元素的区别CSS中

大家好,又见面了,我是你们的朋友全栈君。

前言

CSS 是层叠样式表(Cascading Style Sheets)的简称。CSS 主要作用是美化网页、布局页面。CSS 规则主要由两个主要部分构成:选择器及一条或多条声明。在前端基础面试中,CSS 是不会缺席的,下面就给大家分享下 CSS 的常见面试题

CSS面试题:

  1. 介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?
  2. CSS 选择符有哪些?
  3. ::before 和:after 中双冒号和单冒号有什么区别?解释一下这 2 个伪元素的作用。
  4. 伪类与伪元素的区别
  5. CSS 中哪些属性可以继承?
  6. CSS 优先级算法如何计算?
  7. 关于伪类 LVHA 的解释?
  8. CSS3 新增伪类有那些?
  9. 如何居中 div?
  10. display 有哪些值?说明他们的作用。
  11. position 的值 relative 和 absolute 定位原点是?
  12. CSS3 有哪些新特性?(根据项目回答)
  13. 请解释一下 CSS3 的 Flex box(弹性盒布局模型),以及适用场景?
  14. 用纯 CSS 创建一个三角形的原理是什么?
  15. 一个满屏品字布局如何设计?

前端基础:100道CSS面试题总结

  1. CSS 多列等高如何实现?
  2. 经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用 hack 的技巧?
  3. li 与 li 之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
  4. 为什么要初始化 CSS 样式?
  5. 什么是包含块,对于包含块的理解?
  6. CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的?在不同浏览器下以后什么区别?
  7. width:auto 和 width:100%的区别
  8. 绝对定位元素与非绝对定位元素的百分比计算的区别
  9. 简单介绍使用图片 base64 编码的优点和缺点。
  10. ‘dsplay’、’position’和’float’的相互关系?
  11. margin 重叠问题的理解。
  12. 对 BFC 规范(块级格式化上下文:block formatting context)的理解?
  13. IFC 是什么?
  14. 请解释一下为什么需要清除浮动?清除浮动的方式
  15. 使用 clear 属性清除浮动的原理?

前端基础:100道CSS面试题总结

  1. zoom:1 的清除浮动原理?
  2. 移动端的布局用过媒体查询吗?
  3. 使用 CSS 预处理器吗?喜欢哪个?
  4. CSS 优化、提高性能的方法有哪些?
  5. 浏览器是怎样解析 CSS 选择器的?
  6. 在网页中应该使用奇数还是偶数的字体?为什么呢?
  7. margin 和 padding 分别适合什么场景使用?
  8. 抽离样式模块怎么写,说出思路,有无实践经验?
  9. 简单说一下 css3 的 all 属性。
  10. 为什么不建议使用统配符初始化 css 样式。
  11. absolute 的 containingblock(包含块)计算方式跟正常流有什么不同?
  12. 对于 hasLayout 的理解?
  13. 元素竖向的百分比设定是相对于容器的高度吗?
  14. 全屏滚动的原理是什么?用到了 CSS 的哪些属性?
  15. 什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?

前端基础:100道CSS面试题总结

  1. 视差滚动效果,如何给每页做不同的动画?
  2. 如何修改 chrome 记住密码后自动填充表单的黄色背景?
  3. 怎么让 Chrome 支持小于 12px 的文字?
  4. 让页面里的字体变清晰,变细用 CSS 怎么做?
  5. font-style 属性中 italic 和 oblique 的区别?
  6. 设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别?
  7. layout viewport、visual viewport 和 ideal viewport 的区别?
  8. position:fixed; 在 android 下无效怎么处理?
  9. 如果需要手动写动画,你认为最小时间间隔是多久,为什么?
  10. 如何让去除 inline-block 元素间间距?
  11. 有一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的高度。
  12. png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?
  13. 浏览器如何判断是否支持 webp 格式图片
  14. 什么是 Cookie 隔离?
  15. style 标签写在 body 后与 body 前有什么区别?

前端基础:100道CSS面试题总结

  1. 什么是 CSS 预处理器/后处理器?
  2. 阐述一下 CSSSprites
  3. 使用 rem 布局的优缺点?
  4. 画一条 0.5px 的线
  5. transition 和 animation 的区别
  6. 什么是首选最小宽度?
  7. 为什么 height:100%会无效?
  8. min-width/max-width 和 min-height/max-height 属性间的覆盖规则?
  9. 内联盒模型基本概念
  10. 什么是替换元素?
  11. 替换元素的计算规则?
  12. content 与替换元素的关系?
  13. margin:auto 的填充规则?
  14. margin 无效的情形
  15. border 的特殊性?

前端基础:100道CSS面试题总结

  1. 什么是基线和 x-height?
  2. line-height 的特殊性?
  3. vertical-align 的特殊性?
  4. overflow 的特殊性?
  5. 无依赖绝对定位是什么?
  6. absolute 与 overflow 的关系?
  7. clip 裁剪是什么?
  8. relative 的特殊性?
  9. 什么是层叠上下文?
  10. 什么是层叠水平?
  11. 元素的层叠顺序?
  12. 层叠准则?
  13. font-weight 的特殊性?
  14. text-indent 的特殊性?
  15. letter-spacing 与字符间距?

前端基础:100道CSS面试题总结

  1. word-spacing 与单词间距?
  2. white-space 与换行和空格的控制?
  3. 隐藏元素的 background-image 到底加不加载?
  4. 如何实现单行/多行文本溢出的省略(…)?
  5. 常见的元素隐藏方式?
  6. css 实现上下固定中间自适应布局?
  7. css 两栏布局的实现?
  8. css 三栏布局的实现?
  9. 实现一个宽高自适应的正方形
  10. 实现一个三角形

前端基础:100道CSS面试题总结
篇幅有限,需要文中 《100道CSS面试题总结》完整版(含解析)PDF文档可以【点击这里】免费领取!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/140707.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Intellij IDEA过期怎么激活(最新激活码)(JetBrains全家桶)2022.02.17

    (Intellij IDEA过期怎么激活(最新激活码))JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • 一个完整的java程序示例_write javabean error fastjson

    一个完整的java程序示例_write javabean error fastjsonimportorg.springframework.web.util.WebUtils;//導入方法依賴的package包/類/***Initializelogback,includingsettingthewebapprootsystemproperty.**@paramservletContextthecurrentServletContext*@seeW…

  • upx脱壳日记[通俗易懂]

    upx脱壳日记[通俗易懂]一、静态方法upx-d有时候可能会失败,需要切换使用正确的UPX版本。Windows下内置对各UPX版本的第三方图形化界面UPXShell工具,可以方便的切换版本,通过go按钮,可以切换upx加壳版本与脱壳版本二、动态方法(手脱)虽然UPX本身可以脱壳,但是UPX是基于加壳后可执行文件内存储的标识来查找并操作的,由于UPX是开源的,软件保护者可以随意修改这些标识,从而导致官方标准版本的UPX脱壳失败。因为UPX中可以改动的地方太多,所以人们在这种情况下一般采用动态脱壳x86的..

  • (4.31)quotename函数

    (4.31)quotename函数操作sqlserver尤其是写存储过程时,要用到各种各样的函数,今天就总结一个quotename()的用法。1.语法:quotename(‘character_string’[,‘quote_character’])[]里面的内容说明可以省略,缺省情况下,说明用‘[]’引用。character_string,unicode字符数据构成的字符串。character_string是s…

  • UNIX命令

    UNIX命令 一、UNIX命令格式1、UNIX命令提示符   在命令行下,操作系统会显示一提示符,提示用户在此提示符后可以输入一行命令。不同的Shell有不同的缺省提示符:       BShell和KShell的缺省提示符为”$”;       CShell的缺省提示符为”%”;       但当以root用户登录时,系统提示符统一缺省为”#”。用户可以更改自己的缺省Shell和提

  • 已刻游戏目录

    已刻游戏目录单机游戏1.生化奇兵1、2、32.蔷薇少女格斗3.全女格斗2.04.劲乐团5.魔兽争霸6.生化危机1-6启示录7.MaxPayne2+38.寄生前夜9.恐龙危机1、210.梦幻模拟战4、511.PS模拟器:北欧女神、放浪冒险谭、寄生前夜、寂静岭1、异度装甲、月下夜想曲、古惑狼1-3、封神演义、苍魔灯、鬼屋魔影、武藏传12.FC模拟器13.MD模拟器14.杀手4…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号