CSS学习路上遇到的坑

最近学习CSS的时候遇到了一些坑，有些坑真的是坑死宝宝我了，，，，接下来罗列一些比较典型的。入坑了请自救吧。。。

背景半透明效果

根据不同的应用场景和兼容性要求，有多种实现背景半透明的方法：

1. 在比较现代的或者主流的浏览器中，大多支持rgba来实现背景透明颜色。例如：background-color:rgba(0,0,0,0.5);//背景颜色为黑色，透明度为50%。
2. 使用opacity属性，对已设置background-color的元素设置半透明。例如：background-color:green; opacity:0.5;
3. 使用半透明的png图片。制作一个小的半透明图片，将该图片设置为背景，设置background-repeat:repeat; 一般不用。

opacity：0~1 	半透明效果,1:完全不透明；0:完全透明，(看不到)。

我写了如下代码：

html

<div class="box">
	<div class="content"></div>
</div>

css

.box{
	width:400px;
	height:600px;
	background-color:black;
	position:relative;
	opacity:0.1;
}
.content{
	width:200px;
	height:350px;
	background-color:red;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-100px;
	margin-top:-175px;
}

打开浏览器查看，发现content也是半透明的，，，

需要注意：opacity 不仅让标签自身变成半透明，同时标签的子元素也会变成半透明的。
所以opacity要慎用！尽量用rgba来设置背景半透明。

---

margin 的冲突

<!--块级标签浮动后设置margin-->
<div style="width:100px;height:50px;margin-top:20px;background-color:green;">
	<div style="width:30px;height:40px;background-color:yellow;float:left;margin-right:20px;"></div>                  
	<div style="width:30px;height:40px;background-color:lightgray;float:left;margin-left:20px;"></div>
</div>
<!--行级标签设置margin-->
<div style="width:200px;height:50px;margin-top:20px;background-color:green;">
	<span style="background-color:yellow;margin-right:20px;">hellohello</span>                  
	<span style="background-color:lightgray;margin-left:20px;">world!world!</span>
</div>

上面两种情况下，margin-left和margin-right同时存在，两个元素的间距就会增加。

另外元素浮动的情况下，给两个元素同时设置margin-top和margin-bottom,两个元素之间的间距会相加；不浮动的情况下两个元素之间的间距取最大值。

---

margin-top 的坑

在给子级元素设置margin-top时，发现父级元素跟着一起移动。
解决方法：

1. 给父级元素加position:absolute;
2. 给父级元素加border样式;
3. 给标签本身设置浮动。

清除浮动

子级元素浮动后，父级元素检测不到子级的高度。有以下几种清除浮动的方式：

1. 手动给父级加高度。比较有局限性，大多时候父级的高度是不确定的，要由子级撑开。不常用。
2. 给父级加样式：overflow:hidden;比较常用。
3. 设一个同级标签，并设置样式为：clear:both;(注:此同级标签本身不能浮动)。

4. 通过设置标签的伪类(例如：给类名为div的标签清除浮动，如下：)

   .div:after{
   	content:"";
   	clear:both;
   	display:block;
   }

---

人所缺乏的不是才干而是志向，不是成功地能力而是勤劳的意志。     ————部尔卫

^-^ 加油 ^-^

---