css汇总

关于透明度：

1、以下两种设置的效果等价：

<div id="d1" style="width: 100px;height:100px;background-color:rgb(12,45,80);opacity: 0.5;"></div>
<br>
<div id="d2" style="width: 100px;height:100px;background-color:rgba(12,45,80,0.5);"></div>

 

2.opacity:0与background-color:transparent的异同

  <div id="d1" style="width: 100px;height:100px;padding :20px; border: solid 1px blue; background-color:transparent;"></div>
<br>
  <div id="d2"  style="width: 100px;height:100px;border: solid 1px blue; opacity: 0;"></div>

共同点：效果都是完全透明

不同点：完全透明的范围不同，background-color:transparent，只是设置背景颜色即元素内容区域的完全透明；而opacity: 0，会导致整个元素完全透明，包括border

以下是效果：（第二个元素其实是完全透明的，只是为了查看，使用了chrome的调试工具选中了第二个元素）

3.关于选择器

1. div.cls 与div .cls的异同

div.cls是指所有class样式是cls的的div元素

div .cls是指所有class样式是cls的div的后代元素

原因：空格是后代选择器的分隔符，所以后者是指div的后代元素

 

持续更新中.....