CSS面试题大盘点：从初始化样式到BFC解析

css样式

59 浏览量更新于2024-08-30 收藏 133KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

"本文是关于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
资源: 978

CSS面试题大盘点：从初始化样式到BFC解析

『豪横，让面试官无题可问』☛第一期-HTML面试题持续更新——猛男,你会了吗？

强悍豪横周易起名软件1

考研复习-英语二真题考试题集-带答案

2024中美独角兽公司发展分析报告.pdf

C++ 中的异步编程模型是什么

正则表达式Regex是一种文本模式.docx

基于struts+sqlserver网络购物系统毕业课程源码设计+论文资料

基于ssm的高校毕业生就业管理系统设计与实现.docx

退工、裁员培训讲义.ppt

认知实习decesion tree代码

Java 算法：冒泡，选择，插入排序算法

网约车出行预约系统数据库设计与数据操作

大学生竞赛管理系统代码系统 Springboot大学生竞赛管理系统，包括程序，中文注释，配置说明操作步骤

全球水草清除船行业总体规模、主要企业国内外市场占有率及排名（2024版）.docx

1999-2021年全国各地级市第一产业GDP数据

『人事流程图新』人力资源部工作流程 1.doc

用进化策略玩cartpole游戏(遗传算法)_evolution-cartpole.zip

半导体市场2024年第二季度总额高达1499亿美元，全球半导体产业稳步复苏

洛谷 1037 产生数.cpp

终止解除劳动合同通知书(全套).doc

最新资源