Css3 常见技术面试题（二）

最新推荐文章于 2024-10-31 19:12:08 发布
最新推荐文章于 2024-10-31 19:12:08 发布
阅读量1.1k 收藏 8
点赞数 2
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xqainyo/article/details/105137679
版权
本文详细探讨了CSS3中的Canvas与SVG的区别，包括它们的特性和应用场景。接着讨论了多种CSS实现水平居中的方法，以及清除浮动的策略。此外，还详细阐述了img标签的alt和title属性的功能差异，绝对定位与相对定位的异同，并介绍了三栏布局的多种实现方式。最后，文章深入讲解了CSS3动效的原理、作用和实现方法，以及伪类的使用技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Css3常见技术面试题

1 Canvas和SVG图形的区别是什么

1.1 Canvas

通过js绘制2D图形
逐像素进行渲染
位置发生改变会重新进行绘制

1.2 SVG

一种使用XML描述的2D图形的语言
SVG继续XML意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加js事件处理器
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

1.3 区别

Canvas依赖分辨率，SVG不依赖
Canvas不支持事件处理器，SVG支持
Canvas弱的文本渲染能力，SVG适合带有大型渲染区域的应用程序（比如谷歌地图）
Canvas最适合图像密集型的游戏，其中的许多对象会被频繁重绘 SVG不适合游戏应用
Canvas能够以 .png 或 .jpg 格式保存结果图像
SVG复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

2 Css如何实现水平居中

1、行内元素水平居中：text-align: center；
2、固定宽块状元素水平居中：margin：0 auto；
3、不固定宽块状元素水平居中：
（1）设置display：inline 然后给父元素设置text-align：center
（2）绝对定位让元素向右偏移50%，然后向左偏移自身的50%
在这里插入图片描述
（3）弹性布局1
在这里插入图片描述
（4）弹性布局2
CSS3的fit-content配合左右margin为auto实现水平居中方法
在这里插入图片描述

3 清除浮动的几种方法

1、在浮动元素下方加空div，设置clear：both

2、给浮动元素的父元素设置高度

3、以浮制浮（父元素同时浮动） 缺点：浮动多了容易出问题

4、结尾处加br 设置clear：both

5、给父级添加overflow:hidden

6、给父元素加overflow：auto

7、给父元素定义display：table

8、父级div定义伪类 :after和zoom
使用 zoom:1触发 hasLayout
在这里插入图片描述

最低0.47元/天 解锁文章
薛阳-
关注
面试必考15道CSS3基础面试题（含答案）
weixin_45819386的博客
04-26 6369
文章目录前言1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？？2、box-sizing属性？3、CSS选择器有哪些？优先级顺序？哪些属性可以继承？4.垂直居中几种方式有哪些？总结 前言 随着CSS的不断的发展，现在出现了CSS3，CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块；CSS3的新特征有很多，例如圆角效果、图形化边界
50道CSS基础面试题（附答案）
weixin_34242509的博客
02-22 9400
1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？ 用来控制元素的盒子模型的解析模式...
Css3 常见技术面试题
Lsh69的博客
08-15 309
转载自https://blog.youkuaiyun.com/xqainyo/article/details/105137679?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159745210919724842906407%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=159745210919724842906407&biz_id=0&
CSS3面试题合集
qq_42502919的博客
05-30 1699
1.margin合并问题 在正常布局流中上下两个含有内容的div的margin会发生合并，合并后的margin值为相对大的值，当div内容为空时也会自动忽略其margin 2.margin负值问题 当margin-top为负值时：元素会向上移动 当margin-bottom为负值时：元素本身不会发生移动，其下面的元素会上移 当margin-left为负值时：元素会向左移动 当margin-right为负值时：元素自身不会发生移动，其右边的元素会左移 3.BFC问题 BFC：Block formating
CSS面试题3
编程浪子的专栏
05-20 1673
微软技术支持中心面试题 刚刚结束在上海美罗大厦的微软面试，一起两轮估计没什么希望，因为人都说微软一般最少是四轮面试的，不管怎么我把我他们的面试题记录下来了，希望对浏览此网页的网友有益，谢谢！ Time：2009/3/27 Address：Metro Tower floor23 Interviewee: Bruce First round：Interviewer is a Chinese
HTML5和CSS3常见面试题
小田是个程序员的博客欢迎你的到来呀~
10-31 1101
这篇博客概述了HTML5与CSS3的关键特性，包括HTML5中的语义化标签、增强的表单功能、多媒体支持、绘图与动画能力，以及CSS3提供的布局方案如Flexbox与Grid，还有媒体查询、自定义字体、透明度等功能。同时，文章解释了rem与em作为长度单位的不同，并展示了实现自适应布局的多种方法，以及如何解决清除浮动的问题。
html5+css3面试题答案.docx
07-02
HTML5 和 CSS3 是当前 Web 开发中两个非常重要的技术，以下是关于 HTML5 和 CSS3 的一些常见面试题答案： 优雅降级和渐进增强 优雅降级（Gracious Degradation）和渐进增强（Progressive Enhancement）是两种不同...
HTML+CSS常见布局面试题总结
10-31
HTML和CSS是构建网页布局的基础，这两门技术的掌握...以上是HTML+CSS常见布局面试题的主要知识点，熟练掌握这些概念和技术，有助于提升前端开发的效率和质量。在实践中不断探索和应用，才能真正成为布局设计的专家。
一些html5和css3的一些常见面试题
weixin_30920597的博客
08-22 364
最近总结了一些有关于html5和css3的一些常见面试题，希望对正在找工作的你有所帮助。 还有欢迎大家补充~~~ 一、HTML5 CSS3 CSS3有哪些新特性？ 1. CSS3实现圆角（border-radius），阴影（box-shadow）， 2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） 3.transform:...
CSS3的面试题
qq_42431718的博客
12-29 1305
CSS3中的变形（transform）属性可以实现哪些效果？请列举几个常见的变形效果并给出相应的代码示例。请简要介绍CSS3中的Flexbox布局，并提供一个简单的Flexbox布局示例。请解释一下CSS3中的渐变（gradient）是如何工作的，以及它的应用场景。解释一下CSS3中的伪类和伪元素的区别，并举例说明它们的使用场景。请列出至少五个CSS3中常用的动画属性，并简要说明它们的作用。解释一下CSS3中的选择器级别以及它们的优先级顺序。CSS3中的盒模型与CSS2中的盒模型有何区别？
（44）css面试题集锦一
Java田根旺
12-20 686
1.box-sizing box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。 content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高 border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + conten
CSS3面试题
wjunhua的博客
10-05 457
css面试
五个关于CSS3的常见面试题
qq_42431718的博客
04-19 787
答案：CSS3中的字体图标是一种使用字体文件来显示图标的方法，通常使用特定的字体图标库（如Font Awesome、Material Icons等）。答案：CSS3中的渐变是一种可以在元素背景、边框或文本中创建平滑过渡效果的技术。答案：CSS3中的过渡是一种可以在元素的属性值发生变化时平滑过渡的技术。答案：CSS3中的网格布局是一种用于二维布局的强大的布局系统，通过将容器划分为行和列的网格来控制元素的布局。答案：CSS3中的伪类是用来选择元素的特定状态或位置的选择器，通常以冒号（:）开头。
css/3的相关面试题目
qq_34184143的博客
08-26 1081
1，CSS 选择器有哪些？优先级算法如何计算？ CSS3新增伪类有那些？      1.id选择器（ # myid）        2.类选择器（.myclassname）      3.标签选择器（div, h1, p）    4.相邻选择器（h1 + p）          5.子选择器（ul）          6.后代选择器（li a）      7.通配符选择器（ * ）
CSS3面试笔记
实习生流浪记
11-01 371
选择器 属性选择器： E[attr=val] 1、E[attr] 表示存在attr属性即可； div[class] 2、E[attr=val] 表示属性值完全等于val； div[class=mydemo] 3、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置； div[class*=mydemo] 4、E[attr^=val] 表示的属性值里包含val字符并...
css3常用技巧_您可能错过的5个CSS3技巧和窍门
从零开始的教程世界
07-10 432
css3常用技巧Though, CSS3 isn’t a complex language but you’ll there are greater chances that you’ll stumble across certain new things that’ll probably leave you in a puzzled state. For instance, adding pro...
CSS3 常用技巧
苦涩
05-26 270
hover使用技巧 可以设置自己或后代元素的属性 可以设置自己之后兄弟元素的属性 不能设置祖先元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hover使用技巧</title> <style type="text/css"> #zxw{ width: 400.
【面试常考】CSS3常考面试题
yz的博客
12-26 484
CSS3常考面试题： position display BFC 浮动与清除浮动 垂直、水平、垂直水平居中元素 margin重合问题及解决方法 CSS常用选择器以及优先级 伪元素与伪类 盒模型 动画 2D、3D转换 弹性盒布局 重绘与重排(回流) overflow CSS3新特性 CSS常见的可继承的样式 last-child与nth-of-child的区别？ css引入的方式有哪些？优先级？区别？ css隐藏元素的方式有哪些？区别是什么？ css sprites 如何用CSS进行性能优化？ a标签的伪类:
前端开发面试题总结之——CSS3
我是一只蘑菇17的博客
12-30 206
http://www.jianshu.com/p/f60b619aa52b 相关知识点 布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 hack写法...... 题目&答案 如何理解CSS的盒子模型？ 每个HTML元素都是长方形盒子。（1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。（2）标...
vue 常见css面试题
最新发布
05-09
### 关于 Vue 和 CSS 的常见面试题整理 以下是关于 Vue 和 CSS 的一些常见的面试题目及其解答： #### Vue 部分 1. **什么是 Vue.js 中的响应式数据绑定？它是如何工作的？** - 响应式数据绑定是通过观察者模式实现的数据与视图之间的双向绑定。当数据发生变化时，视图会自动更新；反之亦然[^1]。 2. **Vue.js 中 `v-model` 双向绑定的工作原理是什么？** - `v-model` 实现的核心在于监听输入框的变化事件并同步到模型中，同时将模型中的值应用到 DOM 上。具体来说，它利用了 JavaScript 的 getter 和 setter 方法以及依赖追踪机制来完成这一过程[^1]。 3. **解释一下 Vue.js 生命周期钩子函数的作用和顺序。** - Vue 组件生命周期包括多个阶段：创建 (`beforeCreate`, `created`)、挂载 (`beforeMount`, `mounted`)、更新 (`beforeUpdate`, `updated`) 和销毁 (`beforeDestroy`, `destroyed`)。这些钩子允许开发者在特定时刻执行自定义逻辑[^2]。 4. **组件化的意义是什么？Vue 如何支持组件化开发？** - 组件化是一种软件设计方法论，旨在提高代码复用性和可维护性。Vue 提供了一套完整的 API 来构建独立的功能模块——即组件，并且可以通过单文件组件 (.vue 文件) 将模板、脚本和样式封装在一起[^1]。 --- #### CSS 部分 1. **CSS Flexbox 是什么？它的主要用途有哪些？** - Flexbox（弹性盒子布局）是一个一维布局方案，用于解决复杂页面布局问题。它可以轻松处理水平居中、垂直排列等问题，非常适合动态调整大小的内容区域[^3]。 2. **BEM 命名法的意义是什么？为什么推荐使用 BEM？** - BEM 表示 Block Element Modifier，这是一种基于模块化原则的命名约定方式。采用这种风格可以帮助团队成员更清晰地理解 HTML/CSS 结构关系，减少冲突风险的同时提升协作效率[^4]。 3. **伪类选择器和伪元素有什么区别？举例说明它们的应用场景。** - 伪类用来匹配某些状态下的元素（如`:hover`, `:active`），而伪元素则表示实际存在于文档流之外的部分（比如首字母或行内生成内容）。两者虽然都以冒号开头但功能完全不同[^5]。 4. **媒体查询 Media Query 在响应式网页设计中有何作用？** - 使用 @media 规则可以根据不同的设备特性设置相应的样式规则，从而让同一个网站适应多种屏幕尺寸需求。这是现代前端开发不可或缺的技术之一[^6]。 --- ### 示例代码片段 以下是一些简单的 Vue 和 CSS 示例代码展示其基本概念： ```html <!-- Vue 单文件组件 --> <template> <div class="container"> <input type="text" v-model="message" /> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: &#39;Hello Vue!&#39; }; } }; </script> <style scoped> .container { display: flex; justify-content: center; } </style> ``` ```css /* 简单的 Flexbox 应用 */ .parent { display: flex; align-items: center; /* 垂直居中 */ } .child { margin-right: 10px; } ``` ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值