布局的一点总结
1.box布局
Box布局实现了浮动，并且默认沿着一行排列div。超过部分在页面可视区域之外（一行的右边），超过部分不会跑到下一行。
Box布局的好处：如果左对齐，不用考虑子元素的宽度， box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。
2.选择按钮
如果用input的对象，选择按钮其实只有radio对象，button对象只在点击事件的时候使用。
Input选择按钮用其他的替代，不同状态改变class，这样做的好处是样式可以自定义，功能可以自定义：单选或者多选。以下是图片按钮的例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/*按钮未选中状态*/
.select-icon{
background: url("../images/yy/select-icon.png") no-repeat;
background-size: 16px 16px;
width: 16px;
height: 16px;
position: absolute;
left: 6px;
top: 50%;
margin-left:1px;
z-index: 100;
}
/*按钮选中状态*/
.select-icon.cur{ background: url("../images/yy/selected-icon.png") no-repeat; background-size: 16px 16px; }
</style>
</head>
<body>
<div class="select-icon"></div>
<div class="select-icon cur"></div>
<script>
//获取选中状态的元素
$(".cur")
</script>
</body>
</html>
第1个样式是为未选择状态，第2个样式是选中状态。第二个样式的写法注意：在第1个样式上，多了1个样式而非切换样式。这样的好处是很容易获取到操作。
这样，我们用js获取选中的按钮可以这么写：
$(".cur")
3.页面错乱
在修改少量的样式布局后，页面完全错乱，经常以下两种原因：
1）. 子元素浮动，为清除浮动，导致父元素高度塌陷，与父元素同级的元素占用这块区域，页面布局不正常。
2）. 绝对定位的问题，绝对定位跟元素层次有关系，定位的标准是寻找最近的有定位的父元素（position:relative也算）。如果父元素忘记写定位，会出现错位，这时候会一直向上找有定位的元素，直至body。
3）. 给元素设置高度，内容超出，下一个元素排列在超出部分的上面。这是因为：
div限定大小，内容超过大小，同级的下一个div会紧跟上一个div的大小进行排列，会出现覆盖超出部分的效果，例子：
4). margin重叠
4.图片居中的问题：
<img>也是inline元素，但是<img>和另一个inline元素input，都可以设置高度。他们有个称呼，叫替换元素。除了他们两这，还又<textarea>、<select>、<object>都是替换元素。他们是自身的某个属性决定显示的内容，这样一类元素。
Inline元素设置水平居中，在父级块级元素上设置属性：text-align:center；那么，现在的问题是垂直居中的问题了。
两种特殊的情况：1）块级父元素固定大小，<img>可以固定大小，这时候只需要一点计算，计算好margin,padding。图片自然能居中，电脑版网页有这么做的。
2）<img>可以固定大小，那么填充margin，padding这些。只要图片的这些填充四个方向的数值相同，图片放进去后自然居中。
复杂的情况是，图片要自适应。参考完阮一峰的博客胡，模仿写了一个，只在chrome下测试过。主要是这个：vertical-align:middle;display: table-cell
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{padding:0;margin:0}
.main{width:600px;height:1200px;text-align:center;border:1px solid #009;vertical-align:middle;display: table-cell;}
.main img{width:80%;margin:auto 0;}
</style>
</head>
<body>
<div class="main">
<img src="../assets/images/yy/good.png"/>
</div>
</body>
</html>
5 轮播图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;margin:0;
}
section{
width:300px;
overflow: hidden;
}
.container{
width:30000px;
margin:0px;
}
.container li {
float: left;
}
.container li.active{
display: block;
}
.container li img{
width:300px;
}
</style>
</head>
<body>
<section>
<ul class="container">
<li>
<a>
<img src="http://pic11.nipic.com/20101214/213291_155243023914_2.jpg"/>
</a>
</li>
<li>
<a>
<img src="http://www.taopic.com/uploads/allimg/110915/15-1109150K62880.jpg"/>
</a>
</li>
<li>
<a>
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=66250564,3253305393&fm=23&gp=0.jpg"/>
</a>
</li>
</ul>
</section>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var _index = 0;
function setPic(index){
$('.container').animate({
marginLeft:"-300px"
},1000,function(){
$(".container").css({marginLeft:"0px"});
$(".container li:first").remove().clone(true).appendTo(".container");
})
}
setInterval(function(){
_index++;
console.log(_index)
setPic(_index);
},3000)
})
</script>
</body>
</html>
