- opacity：用来设置透明度(0-1)
- display：用来定义建立布局时元素生成的显示框的类型(‘block’,‘inline’,‘inline-block’,‘table’,‘none’,‘list-item’)
- visibility：用来设置元素是否可见(‘visible’,‘hidden’)
是否占据了空间
- opacity、visibility 不显示仍占据空间
- display 不显示不占据空间
对子元素的影响
- 如果父元素和子元素的显隐性不同（父隐子显），opacity、display子元素的设置不起作用，显示效果和父元素一样
- visibility 不受父元素影响，可以显示出来
是否影响其他元素的触发事件
- visibility,display 不会影响其他元素触发事件
- opacity 属性如果能遮住其他元素，其他元素则不能触发事件（用在一个遮罩覆盖底层页面，并且不触发底层事件，却能触发自身事件的情形）
是否产生了回流（reflow，页面中的一部门因为元素尺寸，布局，显隐等改变需要重新构建）
- display 属性会产生回流
- opacity，visibility 属性不会产生回流
是否产生重绘（repaint，页面一些元素需要更新，而这些属性只影响外观、风格，不影响布局）[回流必将引起重绘，而重绘不一定会引起回流]
- display,opacity 属性会产生重绘
- opacity 属性不一定会重绘（元素提升为合成层后，transform 和 opacity 不会触发 repaint，如果不是合成层，则其依然会触发 repaint）
是否支持transition
- opacity 属性支持transition
- visibility 属性也支持transition。
visible-hidden的过渡有一个延时；hidden-visible的过渡没有延时。【注】触发自身事件时，元素不能完成从hidden-visible的过渡，但是触发其他元素的时候，可以完成该元素从visible-hidden-visible…的过渡效果 - display 不仅不支持transition，还会使得transition失效（display:none;的元素不会渲染在页面上，而transition要起作用，元素必须已经循环在页面上）
- 如果必须要使用display属性，可以加定时器来解决，代码如下：
doctype html>
<html lang="en"><head><meta charset="UTF-8"><style>.blue{width:200px;height:200px;background:blue;}.yellow{width:100px;height:100px;background:yellow;display:none;opacity:0;transition:1s;}style>head><body><div class='blue'><div class='yellow'>div>div><script> var blue = document.querySelector('.blue');blue.addEventListener('mouseenter',function(){var yellowDiv = document.querySelector('.yellow');yellowDiv.style.display = 'block';setTimeout(function(){yellowDiv.style.opacity = '1';},0);})script>body>
html>
补充 list-item,项目列表
<style>.list_box{display: list-item;list-style-type: disc;}
style>
<div class="list_box"><p>name:alicep> <p>age:18p>
div>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
