1.今天学到了：

    1.1 width：100%和 width：auto的区别：

         width:100%-设定对象的宽度占父元素的100%；不包含margin-left，margin-right的值

         width：auto-根据对象实际大小自适应宽度；包含margin-left，margin-right的值。

        针对元素A：

                         1.A是容器，希望A把它的父元素填满，用100%；

                         2.A是容器，希望A根据容纳的元素大小变换自己的大小，用auto；

                         3.A不是容器，宽度不知，需要显示完全，用auto；

                         4.A不是容器，宽度不知，可能大于所在容器宽度，需要填满，用100%；

      参考：

<div>
    <p>1</p>

</div>

div{
width:600px;

overflow:auto;
}
p{
        width:100%;
        padding:10px;
}

p{
        width:auto;
        padding:10px;
}

如果是width:100%，则说明p的width会得到600px就已经充满div区域，然后自己又有padding，所以会出现滚动条。

而width:auto则比较聪明，它是总体宽度（广义，包括width，margin,padding,border这些）等于父级宽度（狭义，内容区，仅指width），所以如果padding已经左右占去20px的空间，那么width给的值就是580px。

所以，如果：

p{
            width:auto;
            background-color: red;
            margin:10px;
            padding:10px;
 }

其实最后实际的width值为560px。

但无论是width:100%还是auto，其计算的参照都是父级内容区width值，而非总宽度值。

        1.2 margin:0 auto;

              上下边界为0，左右则根据宽度自适应相同的值（即居中）

              不居中的原因：没有设置宽度值，就没法根据宽度自适应。

        1.3 自适应网页设计

           参考：http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

           max-device-width与 max-width的区别：

        max-device-width是设备整个显示区域的宽度，例如真实的设备屏幕宽度；

         max-width是目标显示区域的宽度，例如浏览器宽度；

         如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为“PC设备”没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为“显示区域”即浏览器大小发生了变化。

          如果使用max-device-width，那么当手机由竖变横时，CSS是不执行的，因为“手机宽度”并没有变化。如果使用max-width，那么当手机由竖变横时，CSS是执行的，因为“显示区域”发生了变化。

           最小宽度(min-width)与最大宽度(max-width)用于设置图片最小最大宽度限制比较多。比如一个图片为主列表，对象里图片大小不定时候， 为了不想让他太小不统一这个时候我们可以使用css最小宽度样式。再如，一个盒子里有文章有图片混排的时候，有时图片宽度不能确定，这个时候如果html img图片宽度超出了div盒子宽度，可能图片就会撑破div盒子造成图片混乱。

       参考：http://www.divcss5.com/rumen/r422.shtml