html - 您应该主要使用边距/填充还是定位来设计 HTML 和 CSS 布局？

Question

在创建 HTML5 和 CSS3 设计时，在设计中主要使用边距和填充比定位更好还是相反？

我以前从未真正考虑过并排使用这两种方式来在需要的地方获得结果，但可以通过两种方式进行设计，如下面的示例所示:

HTML

<div>
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
</ul>
</div>


CSS 示例 1 - 使用边距、填充

div{
    width:1000px;
    margin:auto;
    }
ul{
    margin-left:10px;
    width:100px;
    }
li{
    height:30px;
    }
span{
    margin-top:10px;
    }

CSS 示例 2 - 仅使用定位(除了 margin:auto ..)

div, ul, span{
    position:absolute;
    }   

div{
    width:1000px;
    margin:auto;
    }
ul{
    left:10px;
    width:100px;
    }
li{
    height:30px;
    }
span{
     top:10px;
    }

Answer 1

对于典型的页面布局，示例 1 更加简洁，如果有选择，您应该选择它。

示例 2 很糟糕，因为一旦您开始在所有内容上设置 position: absolute，您的设计可能具有的任何灵 active 都会消失。您必须为所有内容设置明确的尺寸。

一般情况下(也有异常(exception))，避免 position: absolute 用于主布局，除非它是唯一的方法。

Here's an example我正在谈论的那种问题。 It would appear用户最终使用 JavaScript 来解决他的问题。不好。