Css3常见技术面试题

1 Canvas和SVG图形的区别是什么
- 1.1 Canvas
- 1.2 SVG
- 1.3 区别
2 Css如何实现水平居中
3 清除浮动的几种方法
4 img标签上alt和title的区别
5 绝对定位和相对定位的区别
6 三栏布局（左右定宽，中间自适应）
- 6.1 浮动
- 6.2 绝对定位
- 6.3 flex布局
- 6.4 表格布局
- 6.5 网格布局
7 动效
- 7.1 原理
- 7.2 动效能解决什么问题
- 7.3 Css3动效
- 7.4 动画（animation）
- 7.5 多列
8 伪类的使用

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;

6.3 flex布局

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

6.4 表格布局

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

6.5 网格布局

给父元素设置

display：grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;

7 动效

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

7.1 原理

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

7.2 动效能解决什么问题

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

7.3 Css3动效

transition： 对元素设置transition时间（单位s）。

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

下面是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+伪元素

Css3 常见技术面试题（二）相关推荐

Java实习生常规技术面试题每日十题Java基础（二）
目录 1. JAVA 的反射机制的原理. 2.静态嵌套类(Static Nested Class)和内部类(Inner Class)的不同? 3.如何将String类型转化成Number类型. 4.什 ...
最新阿里Java技术面试题，看这一文就够了！
金三银四跳槽季即将到来,作为 Java 开发者你开始刷面试题了吗?别急,小编整理了阿里技术面试题,看这一文就够了! 阿里面试题目目录 1:技术一面(基础面试题目) 2:技术二面(技术深度.技术原理) ...
Java实习生常规技术面试题每日十题Java基础（八）
目录 1.解释内存中的栈(stack).堆(heap)和静态区(static area)的用法. 2.怎样将GB2312编码的字符串转换为ISO-8859-1编码的字符串? 3.运行时异常与受检异常有 ...
2019最新 BAT、TMD等公司技术面试题及其答案
点击上方"码农突围",马上关注这里是码农充电第一站,回复"666",获取一份专属大礼包真爱,请设置"星标"或点个"在看&quo ...
web前端HTML和CSS3常见面试题
web前端HTML和CSS3常见面试题 1.你常用的浏览器有哪些? 1: Chrome 内核 Webkit -> Blink 2: FireFox 火狐内核 Gecko 开源 3: IE Tr ...
「最新大厂常考架构技术面试题 + 详细解答」
很多没有收到offer的朋友一直在后台问我,怎么梳理面试要考的知识点.这里必须要和大家再强调一下要准备的7大方面!总结起来包括:JAVA编程语言+数据结构和算法题+计网+操作系统+设计模式+数据库+ ...
Unity技术面试题
原文链接:http://www.jianshu.com/p/39c383f45d4e Unity技术面试题一:什么是协同程序? 答:在主线程运行时同时开启另一段逻辑处理,来协助当前程序的执行.换句话 ...
肖sir___面试就业课__非技术面试题
非技术面试题一. 请你自我介绍一下你自己? 回答提示:一般人回答这个问题过于平常,只说姓名.年龄.爱好.工作经验,这些在简历上都有,其实,企业最希望知道的是求职者能否胜任工作,包括:最强的技能.最深 ...
2019秋招最新 BAT、TMD等大厂技术面试题及其答案
随着各大厂商的招聘季接近尾声,各种各样的技术面试题也浮出了水面.Github大神联合众多贡献者,总结了2019年的BAT(百度.阿里.腾讯),TMD(头条.美团.滴滴)等众多互联网科技公司的面试题目, ...

Css3 常见技术面试题（二）