为什么在CSS中定义身体属性？

我已经看到了一些网页设计的经验教训，总是与这样的CSS开始：为什么在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

我也认为它可能是在级联元素中启动继承，但body中的div继承了相同的值。

任何人都知道这种方法的可靠原因？我错过了任何浏览器/设备问题？未来兼容性？平淡的童年？

我对此很好奇。

来源

2017-01-07 MarioZ

这些属性都没有被继承。除了边距，宽度和高度值不是body（和html的宽度/高度）的默认值，是的，我真的不明白为什么显示和填充声明在那里。 – BoltClock

这意味着重置浏览器使用的默认'页边距'/'padding'值 - 它们可能会因浏览器而不同，并将它们设置为0，从而为其他样式创建一个通用且统一的基准。查看http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/查看更复杂的* reset *定义的示例。 – MarcinJuraszek

@MarcinJuraszek：不需要显示，宽度，高度和填充声明。如果您只想删除默认的身体边距，body {margin：0; } 足够了。 – BoltClock

我发现一个很好的理由来定义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元素。

来源

2017-01-10 00:06:36 MarioZ

为什么在CSS中定义身体属性？

回答

相关问题