首页前端开发正文

width:100%和width:auto的区别

朱绪2016-10-104493CSS

我觉得初学前端css的时候,很多人对width:100%和width:auto的理解不是很清晰。

下面我就来详细地解释一下(通过举例子)。

当width=100%的时候,子元素的宽度是继承父元素宽度而来的,并且不包括子元素设置的margin padding border部分。

下面我就来举例子了呀:

CSS样式:

		.da {
			width: 700px;
			height: 80px;
			background-color: red;
			font-size: 30px;
			color: #fff;
		}
		.xiao {
			width: 100%;
			height: 40px;
			background-color: green;
		}

HTML代码:

	<div class="da">
		<div class="xiao">朱绪博客</div>
	</div>

因为da的width是700px,而作为da子元素xiao的width设置是100%,因此xiao的width自然就是700px了(=父级元素的宽度)

如果xiao设置padding值的话比如padding-left: 100px;如下:

		.xiao {
			width: 100%;
			height: 40px;
			background-color: green;
			padding-left: 100px;
		}

我们不难发现xiao部分溢出da,这时候宽度就达到了800px。

当width=auto的时候,父元素的width=子元素的width+子元素的border、margin、padding。

CSS样式:

		.da {
			width: 700px;
			height: 80px;
			background-color: red;
			font-size: 30px;
			color: #fff;
		}
		.xiao {
			width: auto;
			height: 40px;
			background-color: green;
		}

HTML代码同上。

运行结果跟第一次是一样的,没有溢出。

如果这个时候,我们在此基础上,在CSS代码里,给xiao加上margin-left: 100px;

这个时候结果就有变化啦,大家可以来感受一下。