CSS面试题大盘点：从初始化样式到BFC解析
133KB |
更新于2024-08-30
| 133 浏览量 | 举报
收藏
立即下载 "本文是关于CSS面试题的详细解析，涵盖了从基础到高级的各种知识点，旨在帮助读者全面理解和掌握CSS技术。"
在CSS面试中，一些看似平常的问题却常常被忽视，但它们对于构建高效、兼容的网页至关重要。以下是对部分问题的详细解答：
1. **初始化CSS样式**：初始化CSS样式是为了消除不同浏览器之间默认样式差异，确保在所有浏览器中页面显示一致。然而，过度的初始化可能会影响页面性能和SEO。
2. **BFC（Block Formatting Context）规范**：BFC是一个独立的布局环境，其内部元素不会影响外部元素，反之亦然。形成BFC的条件包括浮动元素、定位元素、特定display值或overflow设置。BFC特性包括垂直排列元素、margin重叠、避免与浮动元素重叠等，常用于解决浮动元素导致的高度塌陷问题。
3. **CSS3新特性**：CSS3引入了如边框圆角、阴影、过渡、动画、多列布局、梯度、透明度、选择器增强等，大大丰富了网页设计的可能性。
4. **隐藏元素方法**：可以通过`display:none`、`visibility:hidden`、`opacity:0`或使用CSS3的`clip`属性来隐藏元素。
5. **重绘和重排**：重绘是指元素外观改变，如颜色、背景色变化，而重排则涉及到元素几何结构的改变，如尺寸、位置变化，重排通常比重绘更耗性能。
6. **定位方式**：相对定位使元素相对于其原始位置定位；绝对定位脱离正常文档流，相对于最近的非 static 定位祖先元素定位；固定定位相对于浏览器窗口定位，即使滚动页面仍保持位置不变。
7. **CSS选择器与继承**：基本选择器（id、class、元素选择器）、伪类选择器、属性选择器等。可继承的属性包括颜色、字体、行高、列间距等，不可继承的如边框、背景、宽度、高度等。
8. **CSS3新增伪类**：例如`:nth-child(n)`, `:hover`, `:active`, `:focus`, `:checked`等，增强了交互设计。
9. **优雅降级与渐进增强**：优雅降级是先构建完整功能的网站，然后针对老版本浏览器做兼容；渐进增强则是先保证基础功能，然后逐步添加高级特性。
10. **style标签位置**：`<style>`标签放在`<head>`中可以提高页面加载速度，但放在`<body>`底部可以让页面先呈现内容，提高用户体验。
11. **FOUC（Flash of Unstyled Content）**：在页面加载时，未加载CSS时短暂显示无样式的元素，通过异步加载CSS或内联样式可以避免。
12. **创建CSS三角形**：利用边框塌陷和非透明边框的特性，可以创建出一个纯CSS的三角形。
13. **清除浮动**：常见的清除浮动方法有clearfix类、父元素设置`overflow:auto`或`zoom:1`，以及使用伪元素`::before`或`::after`。
14. **CSS布局方式**：包括流式布局、网格布局、响应式布局、Flexbox和Grid布局等。
15. **::before和::after伪元素**：单冒号用于CSS2.1中的伪元素，双冒号是CSS3中的写法，两者作用相同，用于在元素内容前后插入内容，常用于添加装饰或布局辅助。
16. **CSSprites原理与优缺点**：CSS Sprites是一种合并多个小图到一张大图的技术，减少HTTP请求，提高页面加载速度。优点在于节省加载时间，缺点是维护困难，图片更新时需要重新调整大图。
这些面试题涵盖了CSS的基础和高级概念，是提升CSS技能和准备面试的重要参考。深入理解并熟练运用这些知识点，将有助于构建更加高效、优雅的网页设计。
『豪横，让面试官无题可问』『豪横，让面试官无题可问』☛第二期第二期-Css让人忽视的面试题让人忽视的面试题
—–猛男猛男,你还记得吗？你还记得吗？
引言引言
文章目录文章目录引言1.谈一下为什么要初始化CSS样式？2.谈一下你对BFC规范的理解3.谈一下CSS3有哪些新增的特性？4.谈一下在
页面上隐藏元素的方法有哪些？5.说说什么是重绘和重排？6.谈谈你对相对定位、绝对定位、固定定位的理解7.CSS选择器有
哪些？哪些属性可以继承？8.CSS3新增伪类有哪些并简要描述?9.谈谈你理解的优雅降级和渐进增强？10.style标签写在body
前和body后的区别是什么？11.什么是FOUC？你是如何避免FOUC的？12.用css创建一个三角形，并简述原理？13.谈一下清
除浮动的几种方法14.谈一下css常用的布局方式有哪些？15.谈一下::before和:after中单冒号和双冒号的区别是什么，这两个伪
元素有什么作用？16.谈一下CSS sprites的原理和优缺点分别是什么？
欢迎学习完第一期的猛男来和快活呀，讨论讨论、切磋切磋，来啊，豪横起来！！！
喜欢的猛男，记得对我关注，点赞，评论讨论沃！
1.谈一下为什么要初始化谈一下为什么要初始化CSS样式？样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示
差异
初始化样式会对 SEO 有一定的影响，不友好
2.谈一下你对谈一下你对BFC规范的理解规范的理解
BFC是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部
的布局也不会影响到它。
形成条件（任意一条即可）形成条件（任意一条即可）
浮动的元素
定位元素（绝对定位和固定定位）
display的值是inline-block,table-cell,flex,table-caption或者inline-flex
overflow的值为hidden auto scroll
特性特性
内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
应用案例：应用案例：
浮动后高度塌陷，会影响到外界，开启浮动后高度塌陷，会影响到外界，开启BFC不会影响到外界不会影响到外界
已知宽高的元素水平垂直居中
不写宽高的margin：auto属性
左边固定右边自适应
等高布局等
3.谈一下谈一下CSS3有哪些新增的特性？有哪些新增的特性？
边框边框(borders):
border-radius 圆角
box-shadow 盒阴影
border-image 边框图像
背景背景:
background-size 背景图片的尺寸
background_origin 背景图片的定位区域
background-clip 背景图片的绘制区域
渐变：渐变：
linear-gradient 线性渐变
radial-gradient 径向渐变
文本效果文本效果:
下载后可阅读完整内容，剩余4页未读，立即下载
相关推荐
weixin_38682790
- 粉丝: 3
我的内容管理
展开
最新资源
- Java实现Ajax二级联菜单的教程与示例
- C++面向对象编程实践课程设计完整源码
- 彻底清理电脑注册信息：Spyware Doctor工具解析
- 提升网站安全的SQL注入防护系统3.0版
- 掌握C++：100个趣味程序实例大解析
- Flex实现XML文件的读取、生成与保存操作流程图
- JCreatorPro 350中文汉化版免费下载
- 掌握ASP.NET下SqlServer数据库的备份与恢复
- 《Thinking in Java》与《精通Swing程序设计》电子书合集分享
- 掌握Java数据结构，提高编程水平
- 深入解析PHP验证码图片生成技术
- C#实现TS流构造代码及演示示例
- Windows系统右键菜单新增显示隐藏文件功能
- 1602 LCD驱动程序的初学者指南与应用
- UML面向对象建模实践：方法、流程及应用
- C#纯代码实现Excel文件读取器教程
- 企业级信息发布平台功能介绍与操作指南
- 紫光清华MP3固件刷机教程与软件下载
- 网络习题集精解与实练指南
- Java图遍历算法教程：广度与深度优先遍历入门
- 自定义电脑垃圾清理工具，优化电脑性能的必备程序
- ADSL用户必备：自动换IP与断线工具介绍
- 个人旅游信息动态网页设计与ASP.NET技术实现
- 手机商城项目：基于JSP技术的网上交易系统研究
