css汇总

关于透明度:

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

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

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

  <div id="d1" style=" 100px;height:100px;padding :20px; border: solid 1px blue; background-color:transparent;"></div>
<br>
  <div id="d2"  style=" 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的后代元素

持续更新中.....

原文地址:https://www.cnblogs.com/webjs/p/2752399.html