Css3 常见技术面试题（二）

一时失言乱红尘 2023-05-28 08:30 44阅读 0赞

### 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%  
![在这里插入图片描述][20200327114100485.png]  
（3）弹性布局1  
![在这里插入图片描述][20200327114008180.png]  
（4）弹性布局2  
CSS3的fit-content配合左右margin为auto实现水平居中方法  
![在这里插入图片描述][2020032711402417.png]

# 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  
![在这里插入图片描述][20200327114329333.png]

# 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的四个栗子：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70 3]

## 7.4 动画（animation） ##

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

## 7.5 多列 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70 6]

# 8 伪类的使用 #

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

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

[20200327114100485.png]: /images/20230528/a610942ac67746c29f5b057c13567da2.png
[20200327114008180.png]: /images/20230528/f6c7bcc6073c4ec99f52566feb51b78a.png
[2020032711402417.png]: /images/20230528/838bfb3c18f24adbafcc78a65be251e3.png
[20200327114329333.png]: /images/20230528/53222ab968ef430081cbcaefffaad400.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70]: /images/20230528/3aae552843094b67be2a07504e6e2083.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70 1]: /images/20230528/6550eb7dbddf4658a1aae1b7cbbade48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70 2]: /images/20230528/6f4f8153291d49bb97d8ea6e718cff7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70 3]: /images/20230528/ca344706aa124d53802ea98ff49f40f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70 4]: /images/20230528/5974cdae1d4545d4b14adf8da65849f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70 5]: /images/20230528/2e07e5c5c51d4d13b8abfed3c9f68085.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70 6]: /images/20230528/aec50d6fee48430fb18f31dcd7bc1b7d.png