CSS3实践手册

最新推荐文章于 2022-02-20 22:50:29 发布

D_SJ

最新推荐文章于 2022-02-20 22:50:29 发布

阅读量99

点赞数

原文链接：https://my.oschina.net/luozt/blog/500922

版权

##will-change

不要再使用translateZ()或者translate3d()去骗GPU硬件加速了，而应使用will-change提前通知浏览器我们需要对元素做什么动画，以便浏览器提前准备合适的优化设置

注意合理使用，不能泛滥使用造成系统资源浪费，同时给浏览器一定的准备时间。正确的使用姿势：

.element {
  transition: transform 1s ease-out;
}
.element:hover {
  will-change: transform;
}
.element:active {
  transform: rotateY(180deg);
}

更多关于will-change，参考这里

##pointer-events

设置pointer-events:none;可以使鼠标不会点击到该DIV层上，而是直接穿透点击其底下的元素。

.elem{pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit}

pointer-events属性有很多值，但是对于浏览器来说，只有auto和none两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

pointer-events属性值详解

auto: 效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。

none: 元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。

##zoom与transform-scale

transform-scale只是对元素进行视图缩放，但占位还是保持不变；而zoom不仅把元素缩放，其占位也相应地缩放；有点类似visibility:hidden;和display:none;的区别

##margin-top:%

margin-top:margin和padding不管是上下的还是左右的，其百分比%单位是以该容器的宽度作为计算的，与高度无关！宽度为500px，那么margin-top:1%等同margin-top:5px;，它是以宽度作为百分比来计算，而不是高度哦！

##border-width:%

border-width不支持以%为单位的

转载于:https://my.oschina.net/luozt/blog/500922

关注