CSS 可见性相关的属性主要有：display、visibility和opacity。这三个属性虽然都可以控制元素的可见性，但是它们之间还是有一些不同之处的。 display属性用于控制元素的显示方式，包括块元素（display:block）、行内元素（display:inline）和内联块元素（display:inline-block）。其中，块元素会独占一行，并且默认宽度为父元素的100%；行内元素则会与其他行内元素在同一行内排列，并且其宽高由其包含的内容决定；内联块元素则结合了块元素和行内元素的特点，可以与其他元素在同一行内排列，同时也可以设置宽高等样式属性。 visibility属性用于控制元素的可见性，包括隐藏（visibility:hidden）和显示（visibility:visible）两种状态，与display的不同之处在于visibility在隐藏元素时并不会改变元素原有的位置和占用空间。 opacity属性用于控制元素的透明度，接受0~1之间的值。值越小，元素越透明，值越大，元素越不透明。 下面是一个使用这三个属性控制元素的例子：

p {
  display: block;
  visibility: hidden;
  opacity: 0.5;
}

以上样式会将p元素设置为块元素，并将其隐藏，同时将其透明度设置为0.5。这意味着该元素不会出现在页面中，但是其原有空间仍然被保留，并且内容会有50%的不透明度。如果我们将以上代码改为如下：

p {
  display: none;
  visibility: visible;
  opacity: 1;
}

则该元素会被彻底隐藏，不会保留任何空间，并且内容会完全不透明。这个例子展示了三个属性的不同之处，我们可以根据具体需求来选择使用哪一个属性来操作元素的可见性。