display:none;与visibility:hidden;

display

display 属性可以设置元素的内部和外部显示类型display types。
元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素
元素的内部显示类型inner display types可以控制其子元素的布局（例如：flow layout，grid 或 flex）

将 display 设置为 none 会将元素从可访问性树accessibility tree中移除。这会导致该元素及其所有子代元素不再被屏幕阅读技术screen reading technology访问

<div>
        <strong>给元素设置display:none样式</strong>
        <p>A</p>
        <p style='display:none;'>B</p>
        <p>C</p>
</div>

visibility

CSS属性visibility显示或隐藏元素而不更改文档的布局。该属性还可以隐藏table元素中的行或列。
visibility:hidden;隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。

<div>
        <strong>给元素设置visibility:hidden;样式</strong>
        <p>A</p>
        <p style='visibility:hidden;'>B</p>
        <p>C</p>
</div>

区别

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden;不会影响计数器的计数，visibility: hidden;虽然让一个元素不见了，但是其计数器仍在运行。这和display: none;完全不一样

3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。(原因是透明度是数字，数字是可变的)

与display:none;相关

CSS里选择一个页面上的元素，设置了背景图片，但设置该元素display:none;浏览器是否发生此图片的资源请求？如果是给该元素的父亲设置display:none: 呢?