width:auto和width:100%區別

antzone發表於2017-04-06

可能不少朋友認為width:auto和width:100%的效果一樣的，或者受對於這兩個屬性值理解有點模糊。

下面就通過程式碼例項介紹一下這兩者的區別，獲取會讓不明白的朋友腦洞大開。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box {
  width:500px;
  height:300px;
  background:#ccc;
}
#antzone {
  padding:10px;
  width:100%;
  height:200px;
  background:blue;
}
</style>
</head>
<body>
<div id="box">
  <div id="antzone"></div>
</div>
</body>
</html>

從程式碼的執行表現來看，子元素在水平方向上超出了父元素。

因為子元素的寬度是100%，那麼它的width值就是500px，再加上padding自然就超出了。

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box {
  width:500px;
  height:300px;
  background:#ccc;
}
#antzone {
  padding:10px;
  width:auto;
  height:200px;
  background:blue;
}
</style>
</head>
<body>
<div id="box">
  <div id="antzone"></div>
</div>
</body>
</html>

上面的程式碼就沒有超出，可以看出auto更為智慧一點，能夠在總體尺寸上適應父元素。

相關文章