Html css中的无意义字符_Html_Css

Html css中的无意义字符

html css

Html css中的无意义字符,html,css,Html,Css,我是网络开发新手，学习如何将元素与垂直中心对齐。这是我发现的，但不起作用。但是，如果我在css中添加一些无意义的字符，它会工作得非常好，包括句号、逗号等。我在Safari和Chrome上试过，它们的行为方式相同。这些字有什么意义吗原始解决方案： <head> <style> #parent { position: relative;} #child { position: absol

我是网络开发新手，学习如何将元素与垂直中心对齐。这是我发现的，但不起作用。但是，如果我在css中添加一些无意义的字符，它会工作得非常好，包括句号、逗号等。我在Safari和Chrome上试过，它们的行为方式相同。这些字有什么意义吗

原始解决方案：

<head>
    <style>
        #parent {
            position: relative;}
        #child {
            position: absolute;
            top: 50%;
            height: 30%;
            width: 50%;

        }
    </style>
</head>

<body>
    <div id="parent">
        <div id="child">Content here</div>
    </div>
</body>


#母公司{
位置：相对；}
#孩子{
位置：绝对位置；
最高：50%；
身高：30%；
宽度：50%；
}
满足于此

具有无意义字符的解决方案：

<head>
    <style>
        #parent {
            ,
            position: relative;}
        #child {
            position: absolute;
            top: 50%;
            height: 30%;
            width: 50%;

        }
    </style>
</head>


#母公司{
,
位置：相对；}
#孩子{
位置：绝对位置；
最高：50%；
身高：30%；
宽度：50%；
}

正如您在我的屏幕截图中看到的，角色使position:relative值无效。我建议您使用开发者工具（），这样您可以在单击特定标记时看到它们的css。

正如您在我的屏幕截图中看到的，角色使position:relative值无效。

我建议您使用开发者工具（），这样您可以在单击特定标记时看到它们的css。

之所以会出现这种情况，是因为这些字符破坏了元素“#parent”的css，就像它不存在一样。请参见我的示例

#孩子{
位置：绝对位置；
最高：50%；
身高：30%；
宽度：50%；
}


满足于此

之所以会发生这种情况，是因为这些字符破坏了元素“#parent”的CSS，就像它不存在一样，请参见我的示例

#孩子{
位置：绝对位置；
最高：50%；
身高：30%；
宽度：50%；
}


满足于此

逗号使CSS样式父项无效，因为它的语法不正确。浏览器上的CSS解析器将跳过它。就好像你刚刚

<head>
    <style>
        #child {
            position: absolute;
            top: 50%;
            height: 30%;
            width: 50%;

        }
    </style>
</head>

<body>
    <div id="parent">
        <div id="child">Content here</div>
    </div>
</body>


#孩子{
位置：绝对位置；
最高：50%；
身高：30%；
宽度：50%；
}
满足于此

删除“父”样式后，为什么它会起作用是这里解释的另一个问题

逗号使CSS样式“父”无效，因为它的语法不正确。浏览器上的CSS解析器将跳过它。就好像你刚刚

<head>
    <style>
        #child {
            position: absolute;
            top: 50%;
            height: 30%;
            width: 50%;

        }
    </style>
</head>

<body>
    <div id="parent">
        <div id="child">Content here</div>
    </div>
</body>


#孩子{
位置：绝对位置；
最高：50%；
身高：30%；
宽度：50%；
}
满足于此

为什么删除父样式后它会起作用是此处解释的另一个问题

您应该移动

#父样式

，而不是

#子样式

移动父框而不是子框

#父项{position:absolute；}

正在从

#子{position:relative；}

继承自

#父

快乐代码！继续保持下去

：）

#父级{
边框：10px纯绿；
位置：绝对位置；
宽度：50%；
最高：50%；
}
#孩子{
边框：5px纯红；
位置：相对位置；
}


满足于此

您应该移动

#父项

，而不是

#子项

移动父框而不是子框

#父项{position:absolute；}

正在从

#子{position:relative；}

继承自

#父

快乐代码！继续保持下去

：）

#父级{
边框：10px纯绿；
位置：绝对位置；
宽度：50%；
最高：50%；
}
#孩子{
边框：5px纯红；
位置：相对位置；
}


满足于此

这是因为“无意义的字符”正在破坏

#parent

的CSS，因此它的行为与您删除

#parent

的CSS完全相同。如果没有这些字符，CSS的工作就如同它的意思一样——它显示在父div的中心（父div没有高度，因此子div将位于页面的顶部），这是因为“无意义的字符”正在破坏

#parent

的CSS，因此它的行为与您删除

#parent

的CSS完全相同。如果没有这些字符，CSS的工作方式就和它的意思一样——它显示在父div的中心（父div没有高度，因此子div将位于页面顶部）