可以看出,width:100%是将盒模型中的content拉伸得和父元素一样,而width:auto;是将这个盒模型拉伸得和父元素一样。 很多CSS问题的解决办法不是添加更多的CSS,而是去掉那些有问题的CSS,这就得需要对类似width这样的CSS样式的副作用有深刻的认识。 1)width: 100%并不包含margin-left/margin-right的属性值,直接取其...
CSS中width:100%和width:auto的区别 .father1, .father2 { width: 200px; height: 200px; border: 10px solid red; padding: 20px; background-color: #ddd; } .son1 { width:100%; border: 10px solid blue; padding: 20px;/*margin: 30px;*/background-color:chartreuse; } .son2...
当css属性width设为100%时 平常在写页面html代码时,经常会使用到width:100%来使控件宽度为父控件的内容宽度。但如果父控件为body,而且没有明确设置body的宽度,那么就会出现以下的情况了。 代码: 1 2 3 4 5 1. 2. 3. 4. 5. 浏览器最大化时: 浏览器宽度调到出现水平滚动条时: 使用水平滚动条,浏览右边部...
显著的特征是这个没有横向滚动条出现也就是宽度没有增加。 [3] 在IE6下显示不正常,但是在IE8和IE9下显示正常,可能是IE8和IE9对width:100%的解析与IE6不同所致,但是两者对width:auto的解析是一致的。
显著的特征是这个没有横向滚动条出现也就是宽度没有增加。 3、一般width:auto使用的多,因为这样灵活,而width:100%使用比较少,因为在增加padding或者margin的时候,容易使其突破父级框,破环布局。 参考资料: css中width:auto和width:100%的区别http://www.studyofnet.com/news/965.html...
如果是p的width:100%,则说明p的width会得到980px就已经充满div区域,然后自己又有padding,所以会超出div。 而当width:auto时它是总体宽度(包括width,margin,padding,border)等于父级宽度(width,不包含父级的margin,padding,border),所以如果padding已经左右占去10px的空间,那么width给的值就是960px。
// css .parent{margin:100px auto;width:600px;border:100px solid #ddd;padding:100px;}.child{width:100%;border:50px solid pink;padding:50px;} 结果: 由图可知: 父元素内容区域宽度:600px,padding:100px,border:100px,总宽度:1000px;
当css属性width设为100%时 平常在写页面html代码时,经常会使用到width:100%来使控件宽度为父控件的内容宽度。但如果父控件为body,而且没有明确设置body的宽度,那么就会出现以下的情况了。 代码: 代码语言:javascript 复制 12345 浏览器最大化时: 浏览器宽度调到出现水平滚动条时: 使用水平滚动条,浏览右边部分时...
当css属性width设为100%时 平常在写页面html代码时,经常会使用到width:100%来使控件宽度为父控件的内容宽度。但如果父控件为body,而且没有明确设置body的宽度,那么就会出现以下的情况了。 代码: 1 2 3 4 5 浏览器最大化时: 浏览器宽度调到出现水平滚动条时:...
You can use width:100% and the css attribute box-sizing, to get the box model working like IE 5.5, i.e. padding and border counted into the width. div.absolute { width: 100%; border: 5px solid #000; background-color: #F00; position: absolute; top: 100px; box-sizing: border-bo...