1.box布局
Box布局实现了浮动，并且默认沿着一行排列div。超过部分在页面可视区域之外（一行的右边），超过部分不会跑到下一行。
Box布局的好处：如果左对齐，不用考虑子元素的宽度， box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。
2.选择按钮
如果用input的对象，选择按钮其实只有radio对象，button对象只在点击事件的时候使用。
Input选择按钮用其他的替代，不同状态改变class，这样做的好处是样式可以自定义，功能可以自定义：单选或者多选。以下是图片按钮的例子：
无标题文档
第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
无标题文档 
5 轮播图：
Document
