一些html和css技巧
不用border画出高为1px的线
<div style="height:1px;overflow:hidden;background:#ccc"></div>
全屏品字布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
div{
border:1px solid #ccc;
margin:10px 0 0 0;
}
#up{
width:100%;
height:300px;
}
#lf{
width:49%;
height:300px;
display: inline-block;
}
#rt{
width:49%;
height:300px;
float: right;
display: inline-block;
}
</style>
</head>
<body>
<div id="up"></div>
<div id="lf"></div>
<div id="rt"></div>
</body>
</html>
column实现css3瀑布流布局
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局</title>
<style>
.container{
width: 80%;
margin: 0 auto;
border: 1px solid #ccc;
-webkit-column-width:260px;
-moz-column-width:260px;
-o-colum-width:260px;
-webkit-column-gap:1px;
-moz-column-gap:1px;
-o-column-gap:1px;
text-align: center;
}
div:not(.container){
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:#CCC 1px solid;
display:inline-block;
width:260px;
position:relative;
margin:2px;
}
.title{
line-height:80px; font-size:18px; color:#900;
text-align:center;
font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<section>
<div class="container">
<div style="height:80px" class="title">纯CSS3瀑布布局</div>
<div style="height:260px">jjjj</div>
<div style="height:65px"></div>
<div style="height:120px"></div>
<div style="height:145px"></div>
<div style="height:90px"></div>
<div style="height:145px"></div>
<div style="height:160px"></div>
<div style="height:65px"></div>
<div style="height:230px"></div>
<div style="height:140px"></div>
<div style="height:85px"></div>
<div style="height:20px"></div>
<div style="height:145px"></div>
<div style="height:50px"></div>
<div style="height:65px"></div>
<div style="height:230px"></div>
<div style="height:140px"></div>
<div style="height:85px"></div>
<div style="height:20px"></div>
<div style="height:145px"></div>
<div style="height:50px"></div>
<div style="height:145px"></div>
<div style="height:160px"></div>
<div style="height:240px"></div>
</div>
</section>
</body>
</html>
纯css画一个三角形
#demo {
width: 0;
height: 0;
border-width: 90px;
border-style: solid;
border-color: transparent transparent red transparent;
}
#lf{
width:0;
height:0;
border:90px solid ;
border-color:transparent blue transparent transparent;
}
CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动
.wrap-outer{
margin-left:calc(100vw - 100%);
}
或者
.wrpa-outer{
padding-left:calc(100vw - 100%);
}
让chrome显示小于12px的字体
-webkit-text-size-adjust:none;
清除浮动
在浮动元素的后面加一个空元素</br class=“class">
.class{ clear:both}
css3 flexbox（貌似消耗会比较大，影响性能）
http://caibaojian.com/flexbox-guide.html