.inner{width:200px;height:200px;margin-top:-200px;}
<div class=”outer”><!–我是透明的容器–></div>
<div class=”inner”>我是不透明的内容</div>
原理是容器层与内容层并级,容器层设置透明度,内容层通过负margin或者position绝对定位等方式覆盖到容器层上
方法2:
复制代码
.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#0009;filter:alpha(opacity=20)9;}
.outer .inner{position:relative9;}
<div class=”outer”>
<div class=”inner”>我是不透明的内容</div>
</div>
高级浏览器直接使用rgba颜色值实现;IE浏览器在定义容器透明的同时,让子节点相对定位,也可达到效果
19.让整个页面水平居中
方法:
复制代码
body{text-align:center;}
#test2{width:960px;margin:0 auto;text-align:left;}
定义body的text-align值为center将使得IE5.5也能实现居中
20.为什么容器的背景色没显示出来?为什么容器无法自适应内容高度?
方法:
清除浮动
通常出现这样的情况都是由于没有清除浮动而引起的,所以Debug时应第一时间想到是否有未清除浮动的地方
21.做1像素细边框的table
方法1:
复制代码
#test{border-collapse:collapse;border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}
<table id=”test”>
<tr><th>姓名</th><td>Joy Du</td></tr>
<tr><th>年龄</th><td>26</td></tr>
</table>
方法2:
复制代码
#test{border-spacing:1px;background:#ddd;}
#test tr{background:#fff;}
<table id=”test” cellspacing=”1″>
<tr><th>姓名</th><td>Joy Du</td></tr>
<tr><th>年龄</th><td>26</td></tr>
</table>
IE7及更早浏览器不支持border-spacing属性,但是可以通过table的标签属性cellspacing来替代。
22.使页面文本行距始终保持为n倍字体大小的基调
方法:
复制代码
body{line-height:n;}
注意,不要给n加单位。Know More:如何使页面文本行距始终保持为n倍字体大小的基调
23.标准模式Standard mode和怪异模式Quirks mode下的盒模型区别?
方法:
标准模式下:Element width = width + padding + border
怪异模式下:Element width = width
相关资料请参阅CSS3属性box-sizing
24.以图换字的几种方法及优劣分析
思路1:使用text-indent的负值,将内容移出容器










