（一）对width，height属性的进一步了解
（二）width，height的规范解释
（一）
首先，我们得先了解：
（1）对于wdith属性，就算父元素width为auto(width默认值为auto),其百分比也是支持的，但是，对于height属性，如果父元素height为auto（height默认值为auto）,只要子元素在文档流中，其百分比完全就会被忽略。
接下来，我们先做一个测试
如，我们想为一个div插入背景图，如下代码
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
div {
width: 100%; /* 这是 多余的，div本就独占一行，为了方便观察而写 */
height: 100%; /* 这是无效的 */
background-image: url('./images2/1.jpg') ; /* 插入一个背景图片 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>通过浏览器工具栏查看，发现，图片没有出现。但宽度生效了(即支持width:100%),高度却没有生效（即不支持height:100%），所以背景图的高度没有生效，背景图就不可能显示出来了。此处高度值的计算在本文（二）的第2点中会继续解释
（此处宽度可以根据浏览器窗口的缩放而变化，具体会在本文 （二）中的第2点继续解释）
实际上，我们还得在它的父级body上加上一段可生效的高度值，如下代码
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
height: 300px;
}
div {
width: 100%; /* 这是 多余的，div本就独占一行，为了方便观察而写 */
height: 100%; /* 这是无效的 */
/* 插入一个背景图片 */
background-image: url('./images2/1.jpg') ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果: 背景图就会平铺在浏览器上
如下图，可以发现，背景图高度与我们设置的body的高度一致。此时背景图高度的计算方式为
100% * 300px(父级) = 300px
（此处宽度可以根据浏览器窗口的缩放而变化，具体会在本文 （二）的第2点中会继续解释）
不过，还有一种方法，可以实现背景图平铺满，即，如下代码
（注意，本例是属于特殊情况）
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
html,
body {
height: 100%;
}
div {
width: 100%; /* 这是 多余的，div本就独占一行，为了方便观察而写 */
height: 100%; /* 这是无效的 */
/* 插入一个背景图片 */
background-image: url('./images2/1.jpg') ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
必须同时为 html,body，添加height:100%才生效，如果只给body加，也是不生效的，因为此时body也没有具体高度值。
结果: 铺满整个窗口
接下来，我们继续探讨为何宽度支持width:100%，高度就不支持height:100%，为什么呢？
（二）
1. 如果经过一定的实践，我们会发现对于文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。
我们继续往下看
2.在规范中其实给出了答案。
（1）对高度的解释是: 如果包含块的高度没有显式指定（可以理解为高度由内容决定），并且该元素不是绝对定位，则计算值为auto。
由规范的解释，高度由内容决定。则在上面的测试中，如果给div添加内容（如div改为<div>hello</div>），则使用height:100%，不给其父级body添加高度，也是可以生效的，且背景图也可以显示出来。
接下来，我们来分析，为什么height:100%会失效的问题
即，如果我们子级设置了height:100%,而父级没有设置一个可以生效的高度，则父级默认高度为auto,则会出现
要知道，auto和百分比计算是计算不了的，所以
'auto' * 100 / 100 = NaN
这也是height:100%会失效的问题
(2) 对宽度的解释是:如果包含块的宽度取决于该元素的宽度，那么产生的布局在 CSS2.1中是未定义的。
“未定义行为”也就是规范没有明确该怎样，浏览器可以自已根据理解去发挥。
（3）所以，根据规范定义去分析，就知道了。
高度明确了就是auto，高度百分比计算自然没有结果。而宽度却没有这样的说法，因此宽度就按照包含块的真实的计算值作为百分比计算的基数。
因为规范中解释了，宽度取决于该元素的宽度，如<div>元素，它默认独占一行，所以使用width：100%是可以生效的，而如果是<span>标签，则width：100%也是不生效的，大家也可以去测试以下，就知真假。
......
其实，对于height,widtrh属性，或者说对于大部分css的属性，如果想深入去了解，刨析一个属性，里面还是大有文章的，需要不断去实践，才能够逐步了解掌握里面的内容。