CSS面试必备:Flex布局与关键属性解析
"这是一份关于CSS面试题的文档,涵盖了从Flex弹性盒子模型到CSS选择符,优先级,以及新特性的多个知识点。" 1. Flex弹性盒子模型:Flex布局是CSS3的一项重要特性,用于解决复杂的网页布局问题。通过设置`display: flex`,父元素变为flex容器,其子元素称为flex项目。主轴(默认水平方向)和交叉轴(垂直于主轴)定义了项目的排列方式。关键属性包括: - `flex-direction`:控制项目的排列方向,如`row`(默认)、`row-reverse`、`column`和`column-reverse`。 - `flex-wrap`:控制是否允许项目换行,可设置为`nowrap`(默认,不换行)、`wrap`(换行)和`wrap-reverse`。 - `justify-content`:沿主轴调整项目之间的空间,有`flex-start`、`flex-end`、`center`、`space-between`、`space-around`和`space-evenly`等选项。 - `align-items`:沿交叉轴调整项目,可选值有`flex-start`、`flex-end`、`center`、`baseline`和`stretch`。 2. 外边距塌陷:当两个或多个盒模型的相邻外边距相遇时,会发生塌陷,通常发生在同一级别的块级元素中。可以通过设置`margin`为负值,或者使用`overflow`、`border`、`padding`等方式来避免。 3. 清除浮动:为了解决浮动元素导致的父元素高度塌陷问题,可以使用`clear:both`、`clearfix`类或者`overflow:hidden`等方法。 4. 定位:CSS中的定位包括`static`(默认值,不进行定位)、`relative`(相对于其正常位置定位)、`absolute`(相对于最近的非静态定位祖先元素定位)和`fixed`(相对于浏览器窗口定位)。 5. 行内元素与行内块元素:行内元素如`<span>`不会影响周围元素的布局,而行内块元素如`<img>`在保持行内元素特性的同时,宽度和高度可以设置。消除行内块的空白间隙,可以设置`font-size: 0`或使用`display`属性。 6. 浮动的影响:浮动元素会脱离标准文档流,影响周围元素布局。可能导致父元素高度塌陷,需要通过清除浮动来解决。 7. 代替浮动的方案:使用`display: inline-block`、`display: flex`或`display: grid`等现代布局方式。 8. 水平垂直居中:有多种方法实现,如`text-align: center`配合`vertical-align: middle`(适用于行内元素),`margin: auto`(适用于块级元素且需设定固定宽度),`display: flex`或`display: grid`的居中属性等。 9. CSS引入方式:`link`和`@import`都是引入外部样式表的方式。`link`是HTML标签,可以并行加载,支持浏览器缓存,而`@import`是CSS语句,需等待整个页面解析完后才加载,但支持媒体查询。 10. CSS选择符和优先级:选择符包括元素选择器、类选择器、ID选择器、属性选择器等。可继承的属性有`color`、`font`等。优先级计算为:内联样式`!important` > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器/伪元素选择器。内联样式和`!important`具有相同优先级,但`!important`在两者冲突时胜出。 11. 隐藏元素:可用`display: none`、`visibility: hidden`或`opacity: 0`等方式实现。 12. 实现三角形:利用边框塌陷和透明边框创建。 13. 2D、3D变换和动画:CSS3提供了`transform`、`transition`和`animation`属性,实现元素的位移、旋转、缩放等2D和3D效果。 14. 回流与重绘:回流(reflow)是元素几何尺寸或位置的改变,导致整个或部分渲染树需要重新布局;重绘(repaint)是元素外观的改变,如颜色、背景等,只涉及视觉效果的更新。 15. `src`与`href`:`src`用于引入外部资源,如图片、脚本等;`href`用于链接外部资源,如链接到其他页面或样式表。 16. 英文单词首字母大写:可以使用CSS的`text-transform: capitalize`属性实现。 17. `px`、`em`和`rem`:`px`是固定单位,`em`基于父元素字体大小,`rem`基于根元素字体大小。 18. CSS3新特性:包括但不限于渐变、阴影、动画、过渡、多列布局、Flexbox、Grid布局、伪元素和伪类、边框圆角、 rgba()颜色、透明度、响应式设计等。 19. CSSprites(精灵图):将多个小图像合并到一张大图上,通过CSS的背景定位来显示需要的部分,减少HTTP请求,提高页面加载速度。优点是减少网络请求,缺点是图片管理复杂,不易维护。 20. `:link`、`:visited`、`:hover`、`:active`顺序:LVHA,即链接未访问、已访问、鼠标悬停和活动状态的顺序。 21. BFC(块格式化上下文):BFC是块级元素渲染规则的一个独立区域,用于解决元素间的布局相互影响问题。可通过创建新的BFC来避免外边距塌陷、实现自适应两栏布局等。 以上是CSS面试题中的关键知识点,这些内容对于理解和掌握CSS布局、样式控制及优化至关重要。
![](https://csdnimg.cn/release/download_crawler_static/28806284/bg5.jpg)
剩余23页未读,继续阅读
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.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://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/60adec6d5c92438b83b412df1d94ad2c_ksjdbdh.jpg!1)
- 粉丝: 5209
- 资源: 8
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 中国微型数字传声器:技术革新与市场前景
- 智能安防:基于Hi3515的嵌入式云台控制系统设计
- 手机电量低时辐射真增千倍?解析手机使用谣言
- 56F803型DSP驱动的高精度大功率超声波电源控制策略研究
- ARM与GPRS结合的远程监测系统设计
- GPS与RFID技术结合的智能巡检系统设计
- CPLD驱动的低功耗爆炸场温度测试系统设计
- 基于FPGA的智能驱动控制系统:可扩展设计与工业网络协议
- 基于ATmega128和CH374的嵌入式USB接口设计
- 基于AT89C52的温度补偿超声波测距仪:高精度设计与应用
- MSP430F448单片机在交流数字电压表中的应用
- 提升变频器应用效率的12项实用技巧
- STM32F103在数字电镀电源并联均流系统中的应用
- PSpice仿真下的升压开关电源设计:拓扑分析与CCM稳定性提升
- 轻巧高效:MSP430主导的低成本无线传感器网络节点设计
- FPGA在EDA/PLD中实现LVDS接口的应用解析
![](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)