css布局左右技巧分享

无意之间发现左右侧布局很多技巧在里边，接下来分享下实例：

<div style="width:40px;height:36px;float:left;overflow:hidden; background-color:#CCC;position:relative;">左右测试</div>
<div style=" background-color:#F00;margin-left:50px;">文字图</div><!--比较推荐用于这种方式实现-->

<div style="width:40px;height:36px;float:left;overflow:hidden; background-color:#CCC;">左右测试</div>
<div style=" background-color:#F00;margin-left:50px;position:relative;">文字图</div>

<div style="float:left;width:40px;height:38px; background-color:#ccc;margin-right:10px;position:relative;overflow:hidden;">左侧测试</div>
<div style=" background-color:#0F0;overflow:hidden;_display:inline-block;">文字图</div>

<div style="width:100%;position:relative;">
<div style="width:40px;height:38px; background-color:#ccc;position:absolute;left:0px;top:0px;">左侧测试</div>
<div style=" background-color:#FF0;margin-left:50px;">文字图</div>
</div>

<div style="float:left;width:40px;height:38px; background-color:#ccc;margin-right:10px;overflow:hidden;">左侧测试</div><!--在自适应布局情况下很少应用到这个-->
<div style=" background-color:#00F;float:left;width:400px;">文字图</div>

<div style="float:left;width:40px;height:38px; background-color:#ccc;margin-right:10px;overflow:hidden;">左侧测试</div><!--在右侧内容不超过左侧时应用-->
<div style=" background-color:#00F;">文字图</div>

text-indent:-999em; //隐藏文本的一种方法
css IE6 下去掉 input等元素 的边框 border: 0 none; 所有浏览器都可以了
outline: 5px solid #e3e3e3;（[code]thick属性

点点）加在边框之外的一层，轮廓线不会占据空间。

<p style=" background-color:#FF0;background-color:#0F0\0;*background-color:#F00;_background-color:#000;">
请用CSS来定义标签，要求实现以下效果：字体颜色再IE6下为黑色，IE7下为红色，IE8下为绿色，其他浏览器下为黄色。
</p>
[/code]

注：带有粉色代码为左右布局关键词，此代码仅代表个人意见。哈哈O(∩_∩)O哈哈~