HTML+CSS进阶学习摘录（CSS技巧）（二）

一、CSS选择器

1、后代选择器

 M N { } 元素内部所有N元素

2、子代选择器

  M>N { } 只选取子元素，不包括其他后代元素

3、兄弟选择器

    M~N{ } 只选取后面的所有兄弟元素

4、相邻选择器

 #tail1 span+span { border-left:2px solid gray; padding-left:10px; }

<div id="tail1" style="width:540px;margin-left:200px;"><span>关于我们</span><span>联系我们</span><span>版权声明</span><span>免责声明</span><span>广告服务</span><span>意见反馈</span></div>

二、 CSS reset

三、负Margin技巧

 （1）图片与文字对齐

  

 img{ margin:0 3px -4px 0; }

<div style="height:30px; display:inline-block;"><img src="search.png" alt="搜索" width="30" height="25" title="搜索"/>开始搜索</div>

  （2）自适应两列布局

 

<style type="text/css">#content,#sidebar{float:left;color:white;}#content{width:100%;margin-right:-200px;background-color:red;}#sidebar{width:200px;background-color:purple;}#content p{magin-left:210px;}</style><div id="content"><p>这是主体部分，自适应宽度</p></div><div id="sidebar"><p>这是侧标题栏部分</p></div>

 （3）元素垂直居中

 

#father { position:relative; width:100%; height:200px; } #son { position:absolute; top:50%; left:50%; margin-top:-80px; margin-left:-140px; width:280px; height:160px; }

<div id="father"><table id="son">  <caption>表格标题</caption>  <thead>    <tr>     <th>表头单元格1</th>     <th>表头单元格2</th>    </tr>    </thead>    <tbody>    <tr>    <td>标准单元格1</td>     <td>标准单元格1</td>    </tr>    </tbody></table></div>