Css3 常见技术面试题

最新推荐文章于 2024-04-19 10:49:05 发布
最新推荐文章于 2024-04-19 10:49:05 发布
阅读量288 收藏 2
点赞数
原文链接：https://blog.csdn.net/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&utm_medium
版权

转载自https://blog.csdn.net/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&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-1-105

 

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
在这里插入图片描述

4 img标签上alt和title的区别

alt是图片不显示时显示的文字
title是鼠标放在图片上提示的文字

5 绝对定位和相对定位的区别

1、参照物不同，绝对定位的参照物是父元素，相对定位的参照物是元素本身
2、绝对定位将元素脱离文档流，因此不占空间。相对定位不破坏正常文档流顺序，依然占用空间

6 三栏布局（左右定宽，中间自适应）

左右两边固定宽度300px，中间自适应宽度

6.1 浮动

左右两边浮动，使元素脱离文档流，中间元素正常在文档流中
缺点：顺序问题，中间元素必须放在最后。当浏览器窗口很小时，右边元素会被挤到下一行

6.2 绝对定位

三块都加display：absolute;
然后左右加宽高left：0/right：0;
中间加left:300px; right:300px;
  • 1
  • 2
  • 3

6.3 flex布局

给父元素设置 display：flex;
左右设置宽高，中间设置 flex：1;
  • 1
  • 2

6.4 表格布局

给父元素设置 display：table;
三块都加上display: table-cell;
  • 1
  • 2

6.5 网格布局

给父元素设置

display：grid; 
grid-template-rows: 100px; 
grid-template-columns: 300px auto 300px;
  • 1
  • 2
  • 3

7 动效

让页面更加生动
为什么要用：简单说就是为了有趣、美观。

7.1 原理

动效是元素的移动、形状大小等随时间的变化

7.2 动效能解决什么问题

1、流畅
用动画效果可以使app、手机产品等操作更平滑，用户体验效果更好
2、高效反馈
让用户有操纵感、知道当前app的浏览状态 是等待加载还是正在下载或其他变化，通过各种动效给用户做出及时的反馈
3、引导作用
通过动效指导用户，使用户快速熟练应用app
4、层级显示
一款APP无论是简单还是复杂，都有自己的逻辑架构和逻辑层级，那当逻辑比较多的时候、层级比较深的时候，我们就需要让用户在APP使用过程当中不迷路，能够让用户知道自己处于哪一个层级，这个页面和下一个页面是什么层级关系。也可以通过动效的方法来展现。
5、增强操作
模拟现实，不需要提示，增强用户代入感
6、创新体验
在可用性良好的情况下，增加一些细节
7、吸引用户注意力

7.3 Css3动效

transition： 对元素设置transition时间（单位s）。
  • 1
transform：
	1、translate(0px,0px) 元素位置左右或者上下移动
	2、rotate(30deg)元素在自身的位置上逆时针或者顺时针旋转
	3、scale(2) 元素本身缩小放大的效果   （常用）
	4、skew以x、y轴为中心旋转
  • 1
  • 2
  • 3
  • 4
  • 5

下面是transform的四个栗子：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.4 动画（animation）

动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色
在这里插入图片描述

7.5 多列

在这里插入图片描述
在这里插入图片描述

8 伪类的使用

CSS伪类是用来添加一些选择器的特殊效果。

伪类的语法：
	selector:pseudo-class {property:value;}
常用伪类：
	:link               	未访问
	:visited   　　　　		已访问
	:hover               	鼠标悬停
	:active              	鼠标按下
	:not(s)              	匹配不含s选择器的元素
	:frist-child           	父元素的第一个元素
	:last-child            	父元素的最后一个元素
	:only-child            	父元素的唯一一个元素
	:checked              	选中 :checked+伪元素

如有侵权 及时联系

Lsh69
关注
面试必考15道CSS3基础面试题（含答案）
weixin_45819386的博客
04-26 6185
文章目录前言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 9172
1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？ 用来控制元素的盒子模型的解析模式...
CSS3面试题合集
qq_42502919的博客
05-30 1657
1.margin合并问题 在正常布局流中上下两个含有内容的div的margin会发生合并，合并后的margin值为相对大的值，当div内容为空时也会自动忽略其margin 2.margin负值问题 当margin-top为负值时：元素会向上移动 当margin-bottom为负值时：元素本身不会发生移动，其下面的元素会上移 当margin-left为负值时：元素会向左移动 当margin-right为负值时：元素自身不会发生移动，其右边的元素会左移 3.BFC问题 BFC：Block formating
Css3 常见技术面试题（一）
山水一程
03-27 735
Css31 标准的CSS盒子模型与IE的盒子模型有什么不同？2 link和@import的区别2.1 从属关系2.2 加载顺序2.3 兼容性2.4 DOM可控性2.5 注意3 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用4 Css优化、提高性能的方法5 CSS的实现方式有几种？那种CSS实现方式优势更突出？相对其他实现方式而言其优点有哪些？6 全屏滚动的...
CSS3的面试题
qq_42431718的博客
12-29 1273
CSS3中的变形（transform）属性可以实现哪些效果？请列举几个常见的变形效果并给出相应的代码示例。请简要介绍CSS3中的Flexbox布局，并提供一个简单的Flexbox布局示例。请解释一下CSS3中的渐变（gradient）是如何工作的，以及它的应用场景。解释一下CSS3中的伪类和伪元素的区别，并举例说明它们的使用场景。请列出至少五个CSS3中常用的动画属性，并简要说明它们的作用。解释一下CSS3中的选择器级别以及它们的优先级顺序。CSS3中的盒模型与CSS2中的盒模型有何区别？
Css3 常见技术面试题（二）
山水一程
03-27 1108
Css3常见技术面试题1 Canvas和SVG图形的区别是什么1.1 Canvas1.2 SVG1.3 区别2 Css如何实现水平居中3 清除浮动的几种方法4 img标签上alt和title的区别5 绝对定位和相对定位的区别6 实现布局中间自适应宽度，左右两栏固定宽度6.1 浮动6.2 绝对定位6.3 flex布局6.4 表格布局6.5 网格布局 1 Canvas和SVG图形的区别是什么 1.1 ...
html5+css3面试题答案.docx
07-02
HTML5 和 CSS3 是当前 Web 开发中两个非常重要的技术，以下是关于 HTML5 和 CSS3 的一些常见面试题答案： 优雅降级和渐进增强 优雅降级（Gracious Degradation）和渐进增强（Progressive Enhancement）是两种不同...
HTML+CSS常见布局面试题总结
10-31
HTML和CSS是构建网页布局的基础，这两门技术的掌握...以上是HTML+CSS常见布局面试题的主要知识点，熟练掌握这些概念和技术，有助于提升前端开发的效率和质量。在实践中不断探索和应用，才能真正成为布局设计的专家。
十五道css面试题
m0_65450343的博客
04-25 6997
目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 中哪些属性可以继承？ 3.CSS3 新增伪类有那些？ 4、请解释一下 CSS3 的 Flexbox（弹性盒布局模型），以及适用场景？ 5、浏览器是怎样解析 CSS 选择器的？ 6、在网页中应该使用奇数还是偶数的字体？为什么呢？ 7、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题] 8、为什么不建议使用统配符初始化 css 样式。 9、如果需要手动写动画，你认为最小时间间隔是
CSS面试题3
编程浪子的专栏
05-20 1647
微软技术支持中心面试题 刚刚结束在上海美罗大厦的微软面试，一起两轮估计没什么希望，因为人都说微软一般最少是四轮面试的，不管怎么我把我他们的面试题记录下来了，希望对浏览此网页的网友有益，谢谢！ Time：2009/3/27 Address：Metro Tower floor23 Interviewee: Bruce First round：Interviewer is a Chinese
前端开发面试题总结之——CSS3
zdy0_2004的专栏
02-19 791
http://www.jianshu.com/p/f60b619aa52b 相关知识点 布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 hack写法...... 题目&答案 如何理解CSS的盒子模型？ 每个HTML元素都是长方形盒子。 （1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border
【面试常考】CSS3常考面试题
yz的博客
12-26 454
CSS3常考面试题： position display BFC 浮动与清除浮动 垂直、水平、垂直水平居中元素 margin重合问题及解决方法 CSS常用选择器以及优先级 伪元素与伪类 盒模型 动画 2D、3D转换 弹性盒布局 重绘与重排(回流) overflow CSS3新特性 CSS常见的可继承的样式 last-child与nth-of-child的区别？ css引入的方式有哪些？优先级？区别？ css隐藏元素的方式有哪些？区别是什么？ css sprites 如何用CSS进行性能优化？ a标签的伪类:
CSS3面试题
wjunhua的博客
10-05 416
css面试
一些html5和css3的一些常见面试题
weixin_30920597的博客
08-22 341
最近总结了一些有关于html5和css3的一些常见面试题，希望对正在找工作的你有所帮助。 还有欢迎大家补充~~~ 一、HTML5 CSS3 CSS3有哪些新特性？ 1. CSS3实现圆角（border-radius），阴影（box-shadow）， 2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） 3.transform:...
五个关于CSS3的常见面试题
最新发布
qq_42431718的博客
04-19 733
答案：CSS3中的字体图标是一种使用字体文件来显示图标的方法，通常使用特定的字体图标库（如Font Awesome、Material Icons等）。答案：CSS3中的渐变是一种可以在元素背景、边框或文本中创建平滑过渡效果的技术。答案：CSS3中的过渡是一种可以在元素的属性值发生变化时平滑过渡的技术。答案：CSS3中的网格布局是一种用于二维布局的强大的布局系统，通过将容器划分为行和列的网格来控制元素的布局。答案：CSS3中的伪类是用来选择元素的特定状态或位置的选择器，通常以冒号（:）开头。
CSS3 面试题（1）
明天也要努力的博客
02-24 749
1. 介绍一下标准的 CSS 的盒子模型？与低版本 IE 的盒子模型有什么不同的？ 标准盒子模型：宽度 = 内容的宽度（content）+ border + padding + margin； 低版本 IE 盒子模型：宽度 = 内容宽度（content+border+padding）+ margin； 2. box-sizing 属性 用来控制元素的盒子模型的解析模式，默认为 content-box； context-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 c
（44）css面试题集锦一
Java田根旺
12-20 641
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
【前端面试题】04—33道基础CSS3面试题(附答案)
web前端开发
03-04 960
伴随着大量让人欣喜的功能加入HTML5，CSS3也同样为我们带来了更加绚丽的样式效果。而CSS3面试题主要考察的仍然是那些已经应用在项目中的样式属性，以及应用过程中的一些常见问题，这些知识...
精选前端CSS面试题解析集锦
资源摘要信息: "前端面试题之Css相关题集.zip" 标题: "前端面试题之Css相关题集.zip" 描述: "前端面试题之Css相关题集" 标签: "前端 css 前端面试题" 文件名称列表: "前端面试题之Css相关题集" 知识点详细说明: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值