Web前端面试宝典:核心CSS与布局技巧详解
本篇文章是一份针对Web前端与移动开发面试的详细指南,着重于CSS基础知识和技术点。以下是部分内容的深入解析: 1. **垂直水平居中**:实现一个不定宽高的`<div>`元素水平垂直居中,通常采用CSS Flexbox或Grid布局,或者利用绝对定位配合top、bottom、left、right属性及`margin`负值来调整。 2. **position属性**:`static`是默认值,元素按照文档流排列;`relative`相对定位,元素保留其在正常文档流中的位置;`absolute`绝对定位,相对于最近的非静态定位祖先元素;`fixed`固定定位,相对于视口定位。 3. **单位转换**:`px`是像素单位,适用于视觉精确度高的场景;`em`相对单位,基于父元素字体大小;`rem`根元素相对单位,基于`html`元素的font-size。 4. **BFC**(Block Formatting Context)是CSS块级格式化上下文,用于隔离元素,影响元素与其他元素的布局交互,如清除浮动、影响元素的边距合并等。 5. **CSS引入**:通过`<link>`标签引入外部CSS文件,`@import`曾被推荐但已被弃用,因为可能导致延迟加载问题。`<link>`更优。 6. **CSS Reset**:消除不同浏览器的默认样式差异,统一用户界面的基础样式,便于设计一致性。 7. **CSS Sprites**:将多个小图片组合成一张大图,减少HTTP请求次数,优化网页性能。 8. **清除浮动**:通过伪类`:before`和`:after`添加clear属性、父元素设置`overflow:hidden`或使用`clearfix`类等方法来清除浮动。 9. **响应式设计**:使用媒体查询、百分比布局和弹性布局技术,根据设备视口调整样式,确保跨屏适配。 10. **渐进增强与优雅降级**:前者是先提供基本功能,再逐步添加高级特性;后者反之,先依赖现代浏览器,不支持则降级到低级版本。 11. **结构与表现分离**:结构关注内容组织,表现为HTML标签;表现关注样式呈现,通过CSS控制。 12. **Web语义化**:使用语义化的HTML标签来传达内容的含义,提升可访问性和SEO效果。 13. **CSS选择器优先级**:ID选择器最高,类和属性选择器次之,内联样式最低。 14. **display:none`与`visibility:hidden`**:前者完全隐藏元素及其占用的空间,后者只是隐藏内容可见性,空间仍保留。 15. **HTML与XHTML**:XHTML是HTML的一个严格版本,强调结构清晰,属性值必须闭合。 16. **Doctype**:声明文档类型,触发浏览器的兼容模式或严格模式,有助于统一渲染行为。 17. **盒模型差异**:标准模式(W3C)下元素尺寸不含边距和边框,而IE Quirks模式下包含。 18. **CSS Hack**:针对不同IE版本的特定CSS技巧,如`* html`、`expression`等。 19. **左侧固定+右侧自适应布局**:利用CSS定位和浮动实现,关键在于灵活运用百分比和`float`。 20. **`inline-block`间隙问题**:间隙出现是因为浏览器默认的空白行,可通过设置`font-size: 0`或添加`letter-spacing`消除。 21. **`overflow`属性**:控制内容溢出的处理方式,值包括`visible`(默认)、`hidden`、`scroll`和`auto`。 22. **移除iOS默认样式**:针对苹果设备,可能需要重置或覆盖某些样式,如按钮和列表项。 23. **CSS样式初始化目的**:创建统一的起点,减少浏览器间的差异,提升代码可维护性。 24. **div+css布局优点**:灵活、模块化、易于维护和SEO优化。 25. **表格对SEO影响**:表格虽然不利于SEO,但有时仍需使用,可以通过`alt`属性优化图片和表格标题。 26. **Console常用方法**:如`log()`、`alert()`、`warn()`、`error()`等,用于调试和检查浏览器环境。 以上知识点涵盖了CSS基础、布局、响应式设计、浏览器兼容性处理以及前端开发工具的使用,是前端面试中常见的核心问题。掌握这些内容对于求职者来说至关重要。
![](https://csdnimg.cn/release/download_crawler_static/86336458/bg10.jpg)
![](https://csdnimg.cn/release/download_crawler_static/86336458/bg11.jpg)
![](https://csdnimg.cn/release/download_crawler_static/86336458/bg12.jpg)
![](https://csdnimg.cn/release/download_crawler_static/86336458/bg13.jpg)
![](https://csdnimg.cn/release/download_crawler_static/86336458/bg14.jpg)
剩余96页未读,继续阅读
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/f013ca01c6ff4a74a3a76c2d35072825_weixin_35794280.jpg!1)
- 粉丝: 21
- 资源: 333
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Vue实现iOS原生Picker组件:详细解析与实现思路
- Arduino蓝牙小车:参数调试与功能控制
- 百度Java面试精华:200页精选资源涵盖核心知识点
- Swift使用CoreData填坑指南:CoreData在Swift 3.0的变化
- 微距离无线充电器创新设计及其实验探索
- MTK Android平台开发全攻略:44步详解流程
- RecyclerView全面解析:替代ListView的新选择
- Android开发:自动适配中英文键盘解决方案
- Android调用WebService接口教程
- Android开发:BitmapUtil图片处理全解析与实例
- Android多线程断点续传实现详解
- PCA算法在人脸识别会议签到系统中的应用
- EventBus 3.0:Android事件总线详解与实战应用
- Android FileUtil:全面解析文件操作实用技巧与实例
- RecyclerView添加头部和尾部实战教程
- Android实现微博滑动固定顶部栏实战与优化
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)