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

在创建HTML5和CSS3设计时，最好是在定位或其他方式上为设计使用边距和填充效果？您是否应该主要使用边距/填充或定位来设计HTML和CSS布局？

我从来没有真正想过这个问题之前，并同时使用这一侧获得在需要的结果，但它可能如下面的例子中以两种方式来设计：

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 - 只需使用定位（除保证金：自动..）

div, ul, span{ 
    position:absolute; 
    } 

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

来源

2012-03-29 Dan

对于一个典型的页面布局，例1更清洁，你应该选择那个，给出选择。

示例2很糟糕，因为只要您开始设置position: absolute就可以了，您的设计可能具有的任何灵活性都会消失。你必须设置明确的尺寸。

一般情况下（有例外），主要布局应避免使用position: absolute，除非它是唯一的方法。

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

来源

2012-03-29 09:52:02 thirtydot

的经验法则，position规则是最适合的，他们的名字所暗示的。

margin由于各浏览器之间的模型不一致，因此不太适合此目的。

话虽如此，大多数布局技术都是这两者的混搭，并且两者都结合使用。

来源

2012-03-29 08:58:52

以上全部。定位适用于弹出或可以动态创建的事物。有时定位实际上是派生的放置。填充和边距通常用于如何将这些元素与其他元素相关联。所以一个项目可以有填充，边距和定位，并且所有这些属性都与元素相关。

一个常见的主题是获取客户端环境，然后根据与其可视区域的关系进行设计。

请参阅此链接https://stackoverflow.com/a/8857735/1026459以获取客户端屏幕大小（跨浏览器兼容）。

来源

2012-03-29 08:59:54

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

回答

相关问题