# CSS3 🎉 💯

# CSS3有哪些新特性？

# position的absolute与fixed共同点与不同点

A：共同点： 1.改变行内元素的呈现方式，display被置为inline-block； 2.让元素脱离普通流，不占据空间； 3.默认会覆盖到非定位元素上

B不同点： absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。 当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

# 请列举几种清除浮动的方法(至少两种)

父级div定义 overflow:hidden 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 优点：简单、代码少、浏览器支持好 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。 建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。 父级div定义 overflow:auto 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 优点：简单、代码少、浏览器支持好 缺点：内部宽高超过父级div时，会出现滚动条。 建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。 盒模型 盒模型有两种， IE 怪异盒子模型、W3C标准盒子模型； 盒模型是由： 内容(content)、内边距(padding)、边框(border)、外边距(margin) 组成的。 标准模型的宽高是指的content区宽高； IE盒模型的宽高是指的content+padding+border的宽高。 CSS如何设置这两种盒模型？ 标准盒模型： box-sizing: content-box; 怪异盒模型： box-sizing: border-box; a、box-sizing:content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。 b、box-sizing:border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。

# 隐藏元素display: none; 与 visibility: hidden; 的区别

相同： 它们都能让元素不可见 区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见 display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible;可以让子孙节点显式 修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘 读屏器不会读取 display: none;元素内容；会读取 visibility: hidden 元素内容

# 居中方式

水平垂直居中 被居中元素宽高固定 绝对定位，top和left 为 50%， margin的left和top为自身宽高一半 .center { position: absolute; top: 50%; left: 50%; margin-left: -9rem; margin-top: -5rem; } 绝对定位，top和lefe为父元素一半剪自身一半 .center { position: absolute; top: calc(50% - 5em); left: calc(50% - 9em); } 被居中元素宽高不定 使用CSS3 的 transform将位置在中心点平移自身宽高一半 .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } css的flex 使用flex布局居中 .wrapper { display: flex; } .center { margin: 0 auto; } flex布局，父元素指定子元素居中。 .wrapper { display: flex; align-items: center; justify-content: center; } 在浏览器窗口中居中 基于视口的垂直居中。不要求原生有固定的宽高，但是这种居中是在整个页面窗口内居中，不是基于父元素

.center{ margin: 50vh auto; transform: translateY(-50%); }

# 怎么实现动画，canvas动画与svg区别

canvas H5 画布
通过Javascript来绘制2D图形。 是逐像素进行渲染的。 其位置发生改变，会重新进行绘制 svg 只能绘矢量图 一种使用XML描述的2D图形的语言 SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

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