width: auto、width: 100%、max-width_width: auto 和max-width: 100%会冲突吗-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41417772/article/details/111285029

本文详细讲解了CSS中width:100%和width:auto的区别，以及如何处理子元素的padding、border导致的宽度撑出。还介绍了CSS3 calc()函数在解决尺寸计算中的应用。重点在于理解元素内容区与总宽度的动态调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="parent">
<div class="child">
</div>
</div>
<style>
.parent {
width: 100px;
background-color: red;
}

.child {
width: 100%;
background-color: blue;
}
</style>

上面代码中child的宽度设置为100%，意思是child的content的宽度等于parent的宽度100px,如下图所示：
在这里插入图片描述

.child {
width: 100%;
background-color: blue;
padding: 0 10px;
border: 2px solid green;
}

如果将child加上左右padding和border，则child的总宽度则会大于parent的宽度，表现为child的宽度撑出父元素了，如下图所示：
在这里插入图片描述

.child { 
width: auto; 
background: blue; 
height: 100px; 
padding: 0 10px; 
border: 2px solid green; 
margin: 0 10px; 
}

而如果设置child的宽度为auto,则表现为content+padding+border+margin值等于parent的宽度100px,如下图所示：

在这里插入图片描述
这里延伸一个知识点：CSS3的calc()函数，calc()函数可以计算不同单位的表达式的值，表达式可以是“+”、“-”、“*”、“/”,其中加减符号前后必须要有空格，乘除不必须，但是为了保持风格一致，可以都保留空格

.child { 
width: calc(100% - 20px); 
background: blue; 
height: 100px; 
padding: 0 10px; 
}

显示如下图

在这里插入图片描述
总结：

width:100% ：
是子元素的content撑满父元素的content区域，如果给子元素padding、border，子元素会溢出父元素。

width: auto ：
是子元素的content+padding+border+margin的和撑满父元素的content区域。

max-width ：
和width同时存在时，取width的值，当width大于max-width时，取max-width的值。