Html 简单Div和线性渐变CSS_Html_Css_Gradient_Linear Gradients

Html 简单Div和线性渐变CSS

html css

Html 简单Div和线性渐变CSS,html,css,gradient,linear-gradients,Html,Css,Gradient,Linear Gradients,奇怪的事情发生了，当我将div（Snippet#1）的高度和宽度设置为100%时，div消失了，但是如果您将div维度更改为200px（Snippet#2）的高度而没有宽度，div就会显示为渐变，没有问题。有人能帮我理解我在这里遗漏了什么吗片段#1：身体{ 身高：100%；宽度：100%； } 身体{ 背景色：黑色； } #梯度1{ 身高：100%；宽度：100%；背景：线性渐变（红色、蓝色）；} 片段#2：身体{ 身高：100%；宽度：100%； } 身体{ 背景色：黑色；

奇怪的事情发生了，当我将div（Snippet#1）的高度和宽度设置为100%时，div消失了，但是如果您将div维度更改为200px（Snippet#2）的高度而没有宽度，div就会显示为渐变，没有问题。有人能帮我理解我在这里遗漏了什么吗

片段#1：


身体{
身高：100%；
宽度：100%；
}
身体{
背景色：黑色；
}
#梯度1{
身高：100%；
宽度：100%；
背景：线性渐变（红色、蓝色）；}

片段#2：


身体{
身高：100%；
宽度：100%；
}
身体{
背景色：黑色；
}
#梯度1{
身高：100%；
宽度：100%；
背景：线性渐变（红色、蓝色）；}

将

html

的

宽度和高度也设置为100%


body，html{
身高：100%；
宽度：100%；
保证金：0；
}
身体{
背景色：黑色；
}
#梯度1{
身高：100%；
宽度：100%；
背景：线性梯度（红色、蓝色）；
}
您可以在grid1类中添加绝对位置

正文{
身高：100%；
宽度：100%；
背景色：黑色；
}
#梯度1{
身高：100%；
宽度：100%；
背景：线性梯度（红色、蓝色）；
位置：绝对位置；
}

    <style>
        body {
            height: 100%;
            width: 100%;
        }

        body {
            background-color: black;
        }

        #grad1 {
            height: 100%;
            width: 100%;
            background: linear-gradient(red, blue);}
    </style>
</head>

<body>

<div id="grad1">
</div>  
</body>

    <style>
        body {
            height: 100%;
            width: 100%;
        }

        body {
            background-color: black;
        }

        #grad1 {
            height: 100%;
            width: 100%;
            background: linear-gradient(red, blue); }
    </style>
</head>

<body>

<div id="grad1">
</div>

</body>