width:auto和width:100%到底有什么区别?

1 篇文章 0 订阅
1 篇文章 0 订阅
本文详细介绍了CSS中width:100%与width:auto的区别。width:100%不包含margin,可能导致超出屏幕宽度并出现滚动条;而width:auto则包含margin,始终占据整行,不会产生额外滚动条。在IE浏览器的不同版本中,这两者的显示效果可能有所差异,尤其是IE6与IE8/IE9。
摘要由CSDN通过智能技术生成

width:auto和width:100%到底有什么区别?

[1] width:100% 并不包含margin-left margin-right的属性bai值,直接取du其父容器的宽度加上zhi含margin-left /margin-right的值dao。如果设置了margin那新的width值是容器的宽度加上margin的值。(细心观察)就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是body)。
[2] width:auto包含margin-left/margin-right的属性值。其值包含margin-left /margin-right的值。width:auto总是占据整行!!!这其中margin的值已经包含其中了(也就是一整行)如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。
[3] 在IE6下显示不正常,但是在IE8和IE9下显示正常,可能是IE8和IE9对width:100%的解析与IE6不同所致,但是两者对width:auto的解析是一致的。 来源于

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值