width为auto或者100%的区别(基于table和div嵌套应用)
问题场景：在js中返回数据拼接成列表，而列表通过
去填充内容。填充结果发现，列表内容较多时，只有滑动到最下面才能展示左右滚动条。但是期望效果是一直展示左右滑动条：
修改前：
宽度超出内容，自动展示滑动列表，在style中添加样式如下：
width:100%;
overflow:auto;
在table标签中这样使用，会出现以上问题；在div中使用是会一直展示滚动条
**修改后：**
width:auto;
这里去掉了overflow:auto;可以一直展示左右滑动条
原因分析：
width:100% 并不包含margin-left margin-right的属性值，直接取其父容器的宽度加上含margin-left /margin-right的值。如果设置了margin那新的width值是容器的宽度加上margin的值。（细心观察）就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是body)。width:auto包含margin-left/margin-right的属性值。其值包含margin-left /margin-right的值。width:auto总是占据整行！！！这其中margin的值已经包含其中了（也就是一整行）如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加
简而言之：
width:auto；会将元素撑开至整个父元素width，但是会减去子节点自己的margin，padding或者border的大小。
width:100%；会强制将元素变成和父元素一样的宽，并且添加额外的空间到这个元素的width上。就是因为这个，会导致很多问题。
使用width:100%永远都不是一个好主意。这个属性容易让人产生你正在定义一个元素可视大小，其实，你是在对这个元素的状态做了巨大的改变。
左手的ㄟ右手
柔情只为你懂
阳光穿透心脏的1/2处
我就是我
分手后的思念是犯贱
我会带着你远行
还没有评论，来说两句吧...