背景平铺
/*可应用于精灵图*/
/*让背景从内容开始平铺*/
-webkit-background-origin: content-box;
background-origin: content-box;
/*没有做背景裁剪 背景图片就是默认从边框显示*/
/*
border-box 边框之外被裁减掉
padding-box 内边距以外被裁减掉
content-box 内容以外被裁减掉
*/
background-clicp:content-box;
两栏自适应（占满剩余高度）
需求
左侧边栏固定，右侧边栏自适应，并占满剩余高度
实现
header使用定位脱离标准流
content: overflow:hidden;
left: 定义宽度，高度100%，左浮动
right:高度100%,通过padding-top控制内容起始位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>Title</title>
<style>
html,body{
padding: 0;
margin: 0;
height: 100%;
}
.header{
width: 100%;
height: 50px;
background-color: #4e6ef2;
position: absolute;
left: 0;
top: 0;
}
.content{
width: 100%;
height: 100%;
overflow: hidden;
}
.left{
width: 50px;
height: 100%;
float: left;
padding-top: 50px;
background-color: blueviolet;
}
.right{
height: 100%;
padding-top:50px;
background-color: lightskyblue;
}
img{
float: left;
}
</style>
</head>
<body>
<div class="header">hhh</div>
<div class="content">
<div class="left">hhh</div>
<div class="right">
<img src="1.jpg" alt="">
晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠
晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠
晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠
晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠
晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠
晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠
晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠
晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠
晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠
晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠晚夜微雨问海棠
</div>
</div>
</body>
</html>
fastclick插件的使用
click在移动端有300ms的延时，fastclick.js可提高移动端click的响应速度
<script>
/*当前页面的dom元素加载完毕*/
document.addEventListener('DOMContentLoaded',function () {
/*初始化方法*/
FastClick.attach(document.body);
},false);
/*正常使用click就行了*/
</script>
IScroll插件的使用（实现区域滚动效果）
条件
- 一个容器装着另一个容器
- 找到大容器
- 子容器大于父容器
/*Iscroll*/
/*
* 区域滚动效果
* 条件：一个容器装着一个容器html结构
* 找到大容器
* 子容器大于父容器
* */
window.onload=function () {
document.querySelector('.box1').addEventListener('touchmove',function (e) {
e.preventDefault();
});
new IScroll(document.querySelector('.box1'),{
scrollX:false,
scrollY:true
});
};
双飞翼布局（两边固定宽度，中间自适应）
条件
- header和bottom各自占领屏幕所有宽度，高度固定
- 中间的content是一个三栏布局
- 三栏布局两侧宽度固定，中间自动填充整个区域
实现
- left，center，right左浮动（注意html中center在left和right之前）
- left的外边距：margin-left:-100%;
- right的外边距：margin-left：right宽度的负数
- center中的内容设置左右边距分别是left和right的宽，宽度100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
width: 100%;
height: 60px;
background-color: lightskyblue;
}
.content{
overflow: hidden;
height: 350px;
}
.left,.center,.right{
float: left;
height: 100%;
}
.left{
width: 200px;
margin-left: -100%;
background-color: #4e6ef2;
}
.right{
width: 150px;
margin-left: -150px;
background-color: blueviolet;
}
.center{
width: 100%;
height: 100%;
background-color: blue;
}
.bottom{
width: 100%;
height: 80px;
background-color: yellowgreen;
}
.con{
margin:0 150px 0 200px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="center">
<div class="con">
<img src="1.jpg" alt="">
</div>
</div>
<div class="left">hhh</div>
<div class="right">hhh</div>
</div>
<div class="bottom"></div>
</body>
</html>
