首页/前端/HTML中width:auto与width:100%的误区

HTML中width:auto与width:100%的误区

今天碰到个朋友,讨论在HTML中width:auto,与width:100%的区别及联系,实际上两者区别还是比较大,特别是后者如果用不好将会导致你布局混乱,为了便于学习,回来后查找相关资料进行总结,以实例进行演示,OK,看下面的代码过程。

//这段CSS代码
<style type="text/css">
	.container{width: 400px;height: 500px;margin:10px;border:5px solid black;}
	.child{background-color: green;}
	.child1{width: auto;padding:10px;background-color: purple;}
	.child2{width:auto;margin:10px;background-color: red}
	.child3{width: auto;border:10px solid yellow;}

	.child4{width: 100%;background-color: red}
	.child5{width: 100%;background-color: purple;padding:10px;}
	.child6{width: 100%;background-color: blue;margin:10px;}
	.child7{width: 100%;background-color: pink;border:10px solid yellow;}
</style>

//这段HTML代码
<div class="container">
	<div class="child">块元素默认为width:auto;</div>
	<div class="child1">width:auto;padding:10px 10px;</div>
	<div class="child2">width:auto;margin:10px</div>
	<div class="child3">width: auto;border:2px solid yellow;padding:2px;margin:2px;</div>
	<hr>
	<div class="child4">width: 100%;background-color: red</div>
	<div class="child5">width: 100%;background-color: purple;padding:10px;</div>
	<div class="child6">width: 100%;background-color: blue;margin:10px;</div>
	<div class="child7">width: 100%;background-color: pink;border:10px solid blue;</div>
</div>
假设你将以上CSS及HTML代码段,已经敲入你的HTML文章中,当然这里节省篇幅,大部分代码简写且比较随意,然后我们来看下效果。

HTML中width:auto与width:100%的误区第[1]张-前端-ThemeHello

看到没?这个测试还是比较惊人的,如果你仔细看的话,应该不难发现以下几点: 1、块元素默认为width:auto 2、width:auto:会将元素撑开至整个父元素width,但是会减去子节点自己的margin,padding或者border的大小,反之子节点的margin/padding/border不论尺寸大小,不会撑破父元素。 3、width:100%:会强制将元素变成和父元素一样的宽,并且添加额外的空间到这个元素的width上。就是因为这个,会导致很多问题。 4、width:100%是将盒模型中的content拉伸得和父元素一样,而width:auto;是将这个盒模型拉伸得和父元素一样。
收藏:

相关资讯