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	渐变色有效，效果直接应用于整个可视区域

总结：

1. 如果要使body的渐变色生效，要么html设置高度并且高度不能为0；要么html不设置高度但是body高度设置为具体值。
2. 当html的height属性已经设置，并且不为0时，无论body的高度是多少，body内设置的背景渐变色都应用于整个浏览器可视区域
3. 无论html的高度是否设置，background-color都会生效

最佳实践：

• 尽量设置html的高度