您的位置：首页 > 其它

width:100%与width:auto的区别

2019-08-27 01:29 337 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/weixin_44722346/article/details/100088567

在布局中，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);
这样就会发生内容溢出父节点的情况，会产生不良的影响。

结束语：这就是二者的区别，要分情况使用。谢谢。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航