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

本文链接：https://blog.csdn.net/zyw6042/article/details/74779935

一、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>