我看过一些网页设计课程，总是以这样的CSS开头：
body,html {
display: block;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
我试图找出什么是类似于声明属性点width，height或display用于body和html是，如果我没有错，默认情况下，在浏览器中。
我认为这将是防止和使用js访问css时出现未定义的返回值或类似结果，但是当在css中定义属性时，结果与将其保留为默认值时相同：
console.log($("BODY").css('width')); // Always returns the width of the body
我还认为可能是在级联元素中开始继承，但是在div内部body继承值是相同的。
有人知道采用这种方法的充分理由吗？我错过了任何浏览器/设备问题吗？将来的兼容性？朴素的学步匠？
我对此很好奇。
我找到了将html以及正文的宽度和高度定义为100％的充分理由。假设您要垂直对齐相对定位的div，则需要将其放入绝对定位的容器中：
html,
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
width: 100%;
height: 100%;
}
#main {
background: lightgrey;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
}<div id="container">
<div id="main">
<h1>MY DIV</h1>
</div>
</div>但是，将主体的宽度和高度设置为100％，您会得到一个覆盖整个窗口的绝对定位的容器：
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#main {
background: lightgrey;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
}<div id="main">
<h1>MY DIV</h1>
</div>您将得到相同的结果，但是它将为您节省一个div元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句