父元素与子元素的width关系
第一部分：父子元素都是内联元素
内联元素宽度是auto，即宽度是由其内容撑起来的，故为auto。
第二部分：父子元素都是块级元素
对于块级元素，子元素的宽度默认为父元素的100%。
当我们给子元素添加padding和margin时，可以发现宽度width是父元素的宽度减去子元素的margin值和padding值
如果去掉子元素的height，就会发先子元素的高度为0，故height是不会为100%的，一般我们都是通过添加内容（子元素）将父元素撑起来。
第三部分：父元素是块级元素、子元素是内联元素
第一种情况：内联元素是一般的类型（img、input除外）
子元素是没有办法设置宽度的，也就谈不上100%的问题了。 即内联元素必须依靠其内部的内容才能撑开。
第二种情况：内联元素是input和img这样的可以设置width和height的类型
当是img这种元素时，不管我们怎么设置父元素的宽度和高度，而不设置img的宽和高时，img总是表现为其原始的宽和高。
由此我们可以发现，虽然没有设置宽度，但是表现在浏览器上为160px，它并没有继承父元素的100%得到500px，而是根据既定的高度来等比例缩小宽度。 同样， 如果只设置width，那么height也会等比例改变。 如果我们把img的width设置为100%，就可以发现其宽度这时就和父元素的宽度一致了
而我们一般的做法时，首先确定img的父元素的宽度和高度，然后再将img的宽度和高度设置位100%，这样，图片就能铺满父元素了。
第四部分：同为块级元素的父元素与脱离文档流的子元素
第一种情况：float:left和float:right
这时，我们就只能看到父元素，而通过审查元素可知，子元素为0X100，浮动在父元素的最右边。
第二种情况：position:absolute或position:fixed
同样，这种情况也是脱离正常文档流，导致width为0。
第三种情况:positon:relative
这种情况下，子元素并没有脱离文档流，所以此时width就成了默认的100%,宽度为500px。
第五部分：同为块级元素的子元素和脱离文档流的父元素
第一种情况：position:absolute或position:fixed
这时，子元素同样是默认的100%相对与父元素，fixed时情况相同。
第二种情况:float:right或float:left
同上一种情况。
第三种情况:position:relative
同上面两种情况。
也就是说，父元素脱离文档流对子元素没有影响。