width:auto和width:100%区别

快乐打工仔 分类:实例代码

可能不少朋友认为width:auto和width:100%的效果一样的,或者受对于这两个属性值理解有点模糊。

下面就通过代码实例介绍一下这两者的区别,获取会让不明白的朋友脑洞大开。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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自然就超出了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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更为智能一点,能够在总体尺寸上适应父元素。

回复

我来回复
  • 暂无回复内容