CSS基础知识总结2

transition和animation的区别

transition是过渡属性，他的实现需要触发一个事件（比如鼠标移上去），才会执行。设置一个开始关键帧和结束关键帧。

animation是动画属性。他的实现不需要触发事件，可以自己执行，可以设置多个关键帧（@keyframe）

@keyframes animateName{
    0%   { width:50px; height:50px; }	
    50%  { width:100px; height:100px; }	
    100% { width:50px; height:50px; }
}

若某个元素想要使用对应名称的动画，需要配置animation-name: animateName属性进行锁定。

animation-duration可用于设置动画持续时间。

display:none和visibility:hidden的区别

都可以用来隐藏元素。

display:none;页面中不占位置，render tree中不渲染，不会响应绑定的事件。会造成回流。

visibility: hidden；页面中占位置，不会响应绑定的事件，是继承属性。只会造成重绘。

伪元素和伪类

伪元素：在内容元素前后插入额外的元素，比如::before和::after，但他们只在外部显示可见，不会在文档的源代码中找到。

伪类：匹配的是元素的某种状态，用于选中这种状态并设置样式。如:hover、:first-child

requestanimationframe是什么？

相比于setInterval更流畅，setInterval去实现动画会有抖动的情况。

是浏览器的宏任务。

全面理解 requestAnimationFrame - 掘金 (juejin.cn)

对于盒子模型的理解

标准盒子模型和IE盒子模型

标准盒子模型： width就是代表内容的宽度

盒子大小 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right。默认就是标准盒子模型，也可以通过box-sizing=content-box;来设置。

IE盒子模型： width相对于内容的宽度+padding+border

所以盒子大小=width+margin-left+margin-right, 可以通过box-sizing=border-box来设置。

为什么有时候使用translate来改变位置而不是定位

translate是transform的一个属性，改变transform不会引起回流或重绘。只会触发复合。

使用定位会触发重绘和复合。transform使浏览器为元素创建一个GPU图层，而定位会使用到CPU，因此transform更高效。

translate改变位置时元素依然会占据原始空间，而绝对定位不会发生这种情况。

li与li之间为什么有空白间隙？如何解决？

浏览器会把Inline内联元素之间的空白字符渲染成一个空格

j解决方法： li都写在同一行、ul中font-size设置为0(Safari中还是会有空隙)

CSS3有哪些新特性

选择器： nth-child()等

border-radius圆角、box-shadow盒子阴影

text-shadow、text-overflow(ellipsis)

颜色rgba、渐变

transition、transform、animation

flex与girid布局