码迷,mamicode.com
首页 > 其他好文 > 详细

width:100% width:auto 区别

时间:2018-03-27 14:47:25      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:pyw   inf   等于   .com   color   baidu   而且   highlight   get   

width:100%width:100%,则说明p的width会得到500px就已经充满div区域,然后自己又有padding,所以会出现滚动条。并不包含margin-left margin-right的属性值,直接取其父容器的宽度加上含margin-left /margin-right的值。如果设置了margin那新的width值是容器的宽度加上margin的值。(细心观察)就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是body)。

width:auto则比较聪明,它是总体宽度(广义,包括width,margin,padding,border这些)等于父级宽度(狭义,内容区,仅指width),所以如果padding已经左右占去20px的空间,那么width给的值就是480px。width:auto包含margin-left/margin-right的属性值。其值包含margin-left /margin-right的值。width:auto总是占据整行!!!这其中margin的值已经包含其中了(也就是一整行)如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。

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

技术分享图片技术分享图片

width:100% width:auto 区别

标签:pyw   inf   等于   .com   color   baidu   而且   highlight   get   

原文地址:https://www.cnblogs.com/yuanyuan-1994/p/8656705.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!