css技巧总结(未完待续)
1.多列等高问题---padding补偿法
解决办法有:可以使用javascript,也可以使用边框模拟法。这里就介绍一种负边距的办法。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div id="content"> 2 <div class="first"></div> 3 <div class="second"></div> 4 </div> 5 6 <script> 7 #content{ 8 overflow: hidden; 9 } 10 .first,.second{ 11 padding-bottom: 500px; 12 margin-bottom: -500px; 13 } 14 </script>
2.纯css实现下拉列表
思路:使子菜单为绝对行为,并且使其移除页面,这样子菜单是不显示的,然后定义一个hover伪类,改变子菜单的left值,使其出现在页面中。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <ul class="drop"> 2 <li><a href="#">首 页</a></li> 3 <li><a href="#">概 况</a></li> 4 <li><a href="#">项目介绍</a></li> 5 <li> 6 <a href="#">科研人员</a> 7 <ul> 8 <li><a href="#">老师</a></li> 9 <li><a href="#">博士</a></li> 10 <li><a href="#">硕士</a></li> 11 </ul> 12 </li> 13 <li><a href="#">报考指南</a></li> 14 <li><a href="#">联系我们</a></li> 15 </ul> 16 17 <script type="text/css"> 18 ul.drop, ul.drop ul{ 19 margin: 0; 20 padding:0; 21 list-style:none; 22 } 23 ul.drop: after{ 24 content:""; 25 display:block; 26 clear: both; 27 visility:hidden; 28 height: 0; 29 } 30 ul.drop li{ 31 float: left; 32 width:6em; 33 } 34 ul.drop li ul{ 35 position: absolute; 36 left: -999px; //关键 37 width: 6em; 38 } 39 ul.drop li:hover ul{ 40 left: auto; //代码的关键地方 41 } 42 43 </script>
3.圆顶角技术
3.1使用背景图片
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div class="box"> 2 <h2>hello</h2> 3 <div class="content"> 4 <p>要加油,时间就是金钱,抓住现在非常重要!</p> 5 <p>要加油,时间就是金钱,抓住现在非常重要!</p> 6 <p>要加油,时间就是金钱,抓住现在非常重要!</p> 7 </div> 8 </div> 9 10 .box{ 11 background: url(img/tile2.gif) repeat-y; 12 } 13 .box h2{ 14 background: url(img/top2.gif) no-repeat top left; 15 padding: 2px 200px; 16 } 17 .box .content{ 18 background: url(img/bottom2.gif) no-repeat bottom left; 19 padding-bottom: 20px; 20 } 21 .content p{ 22 padding: 2px 10px; 23 }
3.2.纯css实现圆顶角---细快组合,模拟圆角
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div class="box"> 2 <b class="b1"></b> 3 <b class="b2"></b> 4 <b class="b3"></b> 5 <b class="b4"></b> 6 <div class="content"> 7 <p>hello world!</p><p>hello world!</p> 8 <p>hello world!</p><p>hello world!</p> 9 </div> 10 <b class="b4"></b> 11 <b class="b3"></b> 12 <b class="b2"></b> 13 <b class="b1"></b> 14 </div> 15 16 .b1,b2,b3,b4{ 17 display: block; 18 height: 1px; 19 overflow: hidden; 20 color:#96C2F1; 21 } 22 .b1{ 23 margin:0 5px; 24 } 25 .b2{ 26 margin:0 3px; 27 border-left:1px solid;border-right:1px solid; 28 } 29 .b3{ 30 margin:0 2px; 31 border-left:1px solid;border-right:1px solid; 32 } 33 .b4{ 34 margin:0 1px; 35 border-left:1px solid;border-right:1px solid; 36 } 37 .content{ 38 border-left:1px solid;border-right:1px solid; 39 }
4.绝对底部
<div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div> <div id="side"> </div> </div> </div> <div id="footer"> </div> #main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */ #footer {position: relative; margin-top: -150px; /* footer高度的负值 */ height: 150px; clear:both; }
5.清楚浮动的方法
5.1、添加空标签
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div class="box"> 2 <img src="img/tang.jpg" width="200px" height="200px" /> 3 <p>some textsome textsome </p> 4 <div class="clear"></div> 5 </div> 6 7 .clear{ 8 clear: both; 9 }
缺点:造成标签的浪费
5.2、使用afer伪类
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div class="box clear"> 2 <img src="img/tang.jpg" width="200px" height="200px" /> 3 <p>some textsome textsome </p> 4 </div> 5 6 .clear:after{ 7 display:block; 8 content:""; 9 height:0; 10 visibility: hidden; 11 clear: both; 12 } 13 .clear{ 14 display: inline-block; 15 } 16 /*Holly Hack targets IE win only\*/ 17 *html .clear{ 18 height:1%; 19 } 20 .clear{ 21 display: block; 22 } 23 /*end holly Hack*/
5.3、触发BFC(block formatting context)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div class="box"> 2 <img src="img/tang.jpg" width="200px" height="200px" /> 3 <p>some textsome textsome </p> 4 <div class="clear"></div> 5 </div> 6 7 /* using overflow 8/ 8 .box{ 9 overflow: hidden; 10 zoom: 1; //加入低版本的IE 11 } 12 /*也可使用float来触发BFC,但是后面存在后遗症*/ 13 .box{ 14 float: left; 15 }
6. 关于布局的总结
6.1、两列定宽的布局
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div id="container"> 2 <div id="mainBox"> 3 <p>hello</p> <p>hello</p> <p>hello</p> 4 </div> 5 <div id="sideBox"> 6 <p>world</p> 7 </div> 8 </div> 9 10 #container{ 11 width: 900px; 12 background: red; 13 overflow: hidden; 14 } 15 #mainBox{ 16 float: left; 17 background:#555; 18 width: 600px; 19 } 20 #sideBox{ 21 float: right; 22 width: 300px; 23 background: yellow; 24 }
6.2、两列自适应
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div id="container"> 2 <div id="mainBox"> 3 <p>hello</p> <p>hello</p> <p>hello</p> 4 </div> 5 <div id="sideBox"> 6 <p>world</p> 7 </div> 8 </div> 9 10 #container{ 11 width: 900px; 12 background: red; 13 overflow: hidden; 14 } 15 #mainBox{ 16 float: left; 17 background:#555; 18 width: 70%; 19 } 20 #sideBox{ 21 float: right; 22 width: 30%; 23 background: yellow; 24 }
与6.1相比也就是将width设置为百分数
6.3、单列固定,单列自适应 (参考 详解):使用绝对定位,缺点绝对定位无法撑开父容器的高度。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div id="container"> 2 <div id="mainBox"> 3 <p>hello</p> 4 </div> 5 <div id="sideBox"> 6 <p>world</p> 7 </div> 8 </div> 9 10 #container{ 11 position: relative; 12 background: red; 13 overflow: hidden; 14 } 15 #mainBox{ 16 background:#555; 17 margin-right: 200px; 18 } 19 #sideBox{ 20 position: absolute; 21 top: 0; right: 0; 22 width: 200px; 23 background: yellow; 24 }
该实例使用了固定部分使用绝对定位,自适应元素使用margin。还可以使用float固定列,margin自适应列。
6.4、单列固定,单列自适应:float+margin
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div id="content"> 2 <div id="left"> 3 <div class="aa">left</div> 4 </div> 5 <div id="right">right</div> 6 </div> 7 8 <style> 9 #left{ 10 float: left; 11 width: 100%; 12 background: red; 13 14 } 15 .aa{ 16 margin-right: 210px; 17 } 18 #right{ 19 float: left; 20 width: 200px; 21 margin-left: -200px; 22 background: green; 23 } 24 </style>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div id="content"> 2 <div id="left"> 3 <div class="aa">left</div> 4 </div> 5 <div id="right">right</div> 6 </div> 7 8 <style> 9 #left{ 10 float: left; 11 width: 100%; 12 background: red; 13 margin-left: -210px; 14 } 15 .aa{ 16 margin-left: 210px; 17 } 18 #right{ 19 float: left; 20 width: 200px; 21 background: green; 22 } 23 </style>
6.5、三列布局,两列定宽,一列自适应
<div id="container"> <div class="mainBox"> <div class="content"></div> </div> <div class="sub"></div> <div class="slide"></div> </div> #container{ float: left; width: 100%; } .content{ margin: 0 210px 0 310px; } #sub{ float: left; width: 300px; margin-left: 100%; } #slide{ float: left; margin-left: -200px; width: 200px; }
7.使浮动元素居中
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div id="nav"> 2 <ul> 3 <li><a href="#">a</li> 4 <li><a href="#">a</li> 5 <li><a href="#">a</li> 6 </ul> 7 </div> 8 9 <script> 10 #nav{ 11 float: left; 12 position:relative; 13 left:50%; 14 } 15 #nav ul{ 16 position: relative; 17 left: -50%; 18 list-style: none; 19 } 20 21 #nav ul li{ 22 float: left; 23 position: relative; 24 }
8.自适应宽度的按钮 参见 1
<a href="javascript:void(0);" class="btn1"><cite>inline-block方法</cite></a> .btn1 { display: inline - block; background: url(.. / image / sina_gray_btn.png) no - repeat left top; padding - left: 3px; color: #000000; font - size: 12px; text - decoration: none; } .btn1 cite { display: block; line - height: 26px; padding: 0 13px 0 10px; background: url(.. / image / sina_gray_btn.png) no - repeat right top; }
<a href="javascript:void(0);" class="btn1"><cite>float方法</cite></a> .btn2 { float: left; background: url(.. / image / sina_gray_btn.png) no - repeat left top; padding - left: 3px; color: #000000; font - size: 12px; text - decoration: none; } .btn2 cite { display: block; line - height: 26px; padding: 0 13px 0 10px; background: url(.. / image / sina_gray_btn.png) no - repeat right top; }