CSS自适应布局

一、前置知识：css属性width默认值width: auto与width: 100%区别？

1、width: auto

         子元素（包括content+padding+border+margin）撑满整个父元素的content区域；

         子元素有margin、border、padding时，会减去子元素content区域相对应的width（margin border  padding）值；

         父元素的content = 子元素（content + padding + border + margin )。

2、width：100%

         强制将子元素的content区域 撑满 父元素的content区域

         子元素有margin、border、padding时，不改变子元素content区域的width，而是溢出父盒子，保持原有值

        父元素的content = 子元素的content

二、css自适应布局方式

总结：width：auto和width：auto为基础结合float、position（absolute）和flex布局

详细转载于：http://web.jobbole.com/86080/