标签：
##具体实现
1. 宽度无限的背景和始终居中的主题内容：
首先是背景要用一个div1来做out-background，然后div1的兄弟元素div2来做container。对out-background进行决对定位，对container进行相对定位，并且margin:auto。这样container就会居中在body中并且在out-background的上面。out-background可以设置几个不同高度的子元素，这样，就可以为container里的不同的行做背景了。————其实，完全跟container内容无关也无所谓，不设置container的背景，它就是透明的！
2. 导航框：导航栏和logo的组合
* 首先导航框一般都和搜索框共同存在header当中，有时他们会在一行中。用bootstrap的分列都不用自己去浮动就可以很好地区隔开导航栏。
* 导航框中一般logo和导航栏会分在一起，如果用前景图当logo比较麻烦，直接让导航条们右浮动，然后在左边空白处加上一个背景图片就是。
3. 对12列布局的理解
* container的宽指定了就不能进行响应式布局。指定了之后，我们每一行的width就会是这个值。
* 行和列的宽度方向上的所有属性都不能去设置。因为它们划定的就是一个表格。
* 行可以为它指定padding-top、bottom，以及height，但要注意的是，如果指定了height,就应该指定成准确值，因为指定了值之后height就无法自适应内容调整，内容有可能会穿出行。
4. 不断降低耦合性：
* 一个元素的复合属性会覆盖单一属性，所以尽量避免对一个元素分在不同的选择器里进行多次设置。如有需要，也应该将单一属性放在复合属性之后设置。或者不使用单一属性。
* 在一个区域内，尽量父元素框定内容区大小，子元素进行padding调整位置。或者直接父元素直接设置出padding和内容区大小。避免都在设置padding和大小的问题。
5. 主要用padding而不是margin：
* 原因：margin一是存在兼容性的问题，比如IE6的双倍左边距。二是margin需要考虑太多问题，不能够孤立地进行使用：绑架父元素上下边距，垂直方向重叠，水平方向存在自动调整等问题……而padding不会存在与其它元素互相作用的问题。
* 使用padding需要改变一种思维，即：
元素与元素之间是不存在距离的，他们是紧靠着的！我们看到的距离是他们之间的内容的距离，而不是元素的距离！
要改变思维，不要把元素单纯看成一个框，然后和其他元素相距多少。因为教学演示一般都是用一个一个色块，但真实的网页中，嵌套关系要深得多。
* 把一个元素看成padding和content两部分。避免把border和margin也带入进来，因为不能简单化问题就很容易出现错误。耦合太多综合考虑的东西就太绕。
标签：
原文地址：http://www.cnblogs.com/supersoup/p/4824897.html
