body使用渐变色无效的原因之一：html没有设置高度
直接在css文件中对body设置渐变色：
body {height: 100%;background: -webkit-linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);background: -moz-linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);background: -o-linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
然而无效。但是如果设置：background-color: red则是有效的。在浏览器控制台查看body容器的高度时发现了问题：
- body容器的高度竟然为0
所以把html标签的高度加上：
html {height: 100%;
}
至此问题解决。这说明body的高度会受到html的限制，做一个小实验：
| html高度 | body高度 | 背景渐变色 |
|---|---|---|
| 不设置 | 100% | 渐变色无效 |
| 不设置 | 200px | 渐变色有效，但是效果的高度限制在200px，并且重复背景铺满整个可视区域 |
| 100% | 100% | 渐变色有效 |
| 100% | 200px | 渐变色有效，并且效果直接应用到整个可视区域高度 |
| 0 | 100% | 渐变色无效 |
| 0 | 200px | 渐变色无效 |
| 1px | 100% | 渐变色有效，效果直接应用于整个可视区域 |
| 1px | 200px | 渐变色有效，效果直接应用于整个可视区域 |
总结：
- 如果要使body的渐变色生效，要么html设置高度并且高度不能为0；要么html不设置高度但是body高度设置为具体值。
- 当html的height属性已经设置，并且不为0时，无论body的高度是多少，body内设置的背景渐变色都应用于整个浏览器可视区域
- 无论html的高度是否设置，background-color都会生效
最佳实践：
- 尽量设置html的高度