width：100%与width：auto的区别

最新推荐文章于 2024-05-26 17:09:52 发布

Great_Eagle

最新推荐文章于 2024-05-26 17:09:52 发布

阅读量2.3k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/Great_Eagle/article/details/81130222

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

width：100%

width：100%代表自身Width=父contentWidth*100%

其中当自身box-sizing:content-box（也是默认值）时，自身Width的含义为自身contentWidth，当box-sizing:border-box（IE盒模型，IE8及以下只支持IE盒模型）时，自身Width的含义为自身contentWidth+paddingWidth+borderWidth。（在IE8及以下的浏览器中只支持IE盒模型，在IE8+及其他主流浏览器中，通过CSS新增的box-sizing属性可以设置浏览器的盒模型。box-sizing属性的默认值是content-box，即W3C标准盒模型；而将box-sizing值设置为border-box时，则会更改为IE盒模型）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#f {
				width: 200px;
				height: 200px;
				padding: 20px;
				margin: 20px;
				background: yellow;
				border: 2px solid red;
				box-sizing: border-box;
			}
			
			#c {
				width: 100%;
				height: 100%;
				padding: 20px;
				margin: 20px;
				background: skyblue;
				border: 2px solid black;
			}
		</style>
	</head>

	<body>
		<div id="f">
			father
			<div id="c">
				child
			</div>
		</div>
		<script type="text/javascript">
			if(window.getComputedStyle) {//W3C，IE9+
				var fStyle = window.getComputedStyle(document.getElementById("f"));
				var cStyle = window.getComputedStyle(document.getElementById("c"));
			} else {//IE
				fStyle = document.getElementById("f").currentStyle;
				cStyle = document.getElementById("c").currentStyle;
			}

			alert(fStyle.width);//200px，若在IE（IE11中试过）中为156px
			alert(cStyle.width);//156px
		</script>
	</body>

</html>

width：auto

width：auto代表自身contentWidth+paddingWidth+borderWidth+marginWidth=父contentWidth

其中当自身box-sizing:content-box（也是默认值）时，width值为contentWidth，当box-sizing:border-box（IE盒模型，IE8及以下只支持IE盒模型）时，width值为contentWidth+paddingWidth+borderWidth。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#f {
				width: 200px;
				height: 200px;
				padding: 20px;
				margin: 20px;
				background: yellow;
				border: 2px solid red;
				box-sizing: border-box;
			}
			
			#c {
				width: auto;
				height: auto;
				padding: 20px;
				margin: 20px;
				background: skyblue;
				border: 2px solid black;
			}
		</style>
	</head>

	<body>
		<div id="f">
			father
			<div id="c">
				child
			</div>
		</div>
		<script type="text/javascript">
			if(window.getComputedStyle) {//W3C，IE9+
				var fStyle = window.getComputedStyle(document.getElementById("f"));
				var cStyle = window.getComputedStyle(document.getElementById("c"));
			} else {//IE
				fStyle = document.getElementById("f").currentStyle;
				cStyle = document.getElementById("c").currentStyle;
			}

			alert(fStyle.width);//200px
			alert(cStyle.width);//72px
		</script>
	</body>

</html>

Great_Eagle

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
width：100%与width：auto的区别

width：100%width：100%代表自身Width=父contentWidth*100%其中当自身box-sizing:content-box（也是默认值）时，自身Width的含义为自身contentWidth，当box-sizing:border-box（IE盒模型，IE8及以下只支持IE盒模型）时，自身Width的含义为自身contentWidth+paddingWidth+b...
复制链接

扫一扫