欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

css中width:100%与width:auto的区别

发布时间：2025/3/20 41 豆豆
生活随笔 收集整理的这篇文章主要介绍了 css中width:100%与width:auto的区别 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

在布局中，width:100%和width：auto都会经常用到，那么，二者究竟有何区别呢？下面就来探讨下。
先上代码

<style>* {margin: 0;padding: 0;}.parent {width: 800px;margin: 50px auto;border: 2px solid red;}.child1 {background: orange;}.child2 {width: 100%;background: blue;}.child3 {width: auto;background: green;} </style> <body><div class="parent"><div class="child1">看看我的宽度</div><div class="child2">看看我的宽度</div><div class="child3">看看我的宽度</div></div> </body>

可以看到，元素在不设置padidng和margin的情况下，width:100%和width:auto表现一样，都是继承自父级的宽度。元素的默认宽度是 width:auto。
但是，设置了padding和margin后，表现则大不相同：

.child2 {width: 100%;margin-left: 100px;padding-left: 100px;background: blue;}.child3 {width: auto;margin-left: 100px;padding-left: 100px;background: green;}

可以看出child2溢出父元素，child3则没有。原因是什么呢？
因为二者的宽度是计算方式不同：
width: auto= 'width' + 'padding-left/right' +'border-left/right' + (margin-left/right) ;
所以就不用担心当元素自身有margin、padding 、border 时，宽度会超过父节点。

 

width:100%='父元素width' + 'padding-left/right' + 'border-left/right' + (margin-left/right);
这样就会发生内容溢出父节点的情况，会产生不良的影响。
总结：这就是二者的区别，要分情况使用。谢谢。

 

总结

以上是生活随笔为你收集整理的css中width:100%与width:auto的区别的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。