CSS中width:100%和width:auto的区别
<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; }
显示如下图,可以看到通过计算可以实现与auto一致的效果