css之布局那些事

实现布局的三个最基本的原子技术

浮动 float

负边距 negative margin

相对定位 relative position

这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。

实现双飞翼布局：

尝试之路考虑以下DOM结构：

1 2 3 4 5 6 7 8

<div id="page">           <div id="hd"></div>              <div id="bd">                       <div class="main"></div>                       <div class="sub"></div>                       <div class="extra"></div>              </div>          <div id="ft"></div></div>

利用浮动元素的负边距来定位：

1 2 3 4 5 6 7 8 9 10 11

.main {                    float: left;                   width: 100%;     }  .sub {                   float: left;                    width: 190px;                    margin-left: -100%;    }   .extra {                      float: left;                      width: 190px;                      margin-left: -190px;     }

这样我们得到了第一个尝试页面 点击这里查看效果
可以看出，通过简单的负边距，已经让sub和extra定位到正确的位置。剩下的问题是如何让main也定位到正确的位置。
一个自然的想法是，给main的容器#bd添加padding:

1 2 3

#bd {                   padding: 0 230px 0 190px;     }

点击这里查看效果
这样能让main定位到正确的位置，但sub和extra的位置不对了。这是一个思考的关卡。既然sub和extra的位置不对，那就想办法调整到正确的位置。相对定位隆重登场：

1 2 3 4 5 6 7 8 9 10 11 12

.sub {                    float: left;                    width: 190px;                    margin-left: -100%;                    position: relative;                    left: -190px;    }     .extra {                      float: left;                      width: 230px;                      margin-left: -230px;                      position: relative;                      right: -230px;    }

点击这里查看完成页面 

这意味着HTML结构和CSS布局在一定程度上解耦了，我们开发HTML代码时，从内容出发即可，无需过多的考虑布局。这正是渐进增强在前端工作流程上的体现。
如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。因此请容许我给这个布局实现取名为双飞翼布局（Flying Swing Layout）.
就如上图中的鸟有各种姿势一样，利用双飞翼布局，我们也可以实现各种布局。这里有个尝试页面，利用双飞翼，实现了一套栅格化布局系统。

优点

实现了内容与布局的分离，即Eric提到的Any-Order Columns.

main部分是自适应宽度的，很容易在定宽布局和流体布局中切换。

任何一栏都可以是最高栏，不会出问题。

需要的hack非常少（就一个针对ie6的清除浮动hack:_zoom: 1;）

在浏览器上的兼容性非常好，IE5.5以上都支持。

不足

main需要添加一个额外的包裹层。

等待你的发现与反馈。

双飞翼的布局非常灵活，只要调整css代码就可以搞定一切。最近在一个论坛项目中准备尝试使用这个布局。希望大家有更好的布局方法一定要多多分享。

 

css中的正内补丁和负外补丁（要结合隐藏溢出来用）

这是为了解决多列布局中没有设置高度的时候让多列等高的（一般设值比较大），当然也是可以用多列布局column来实现

padding-bottom: 1253px;

margin-bottom: -1253px;

position

定位标签：position

包含属性：relative（相对）

                   absolute（绝对）

1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

相对定位：relative 没有脱离正常的文档流，被设置元素相对于其原始位置而进行定位，其原始占位信息仍存在

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

绝对定位：ablution 脱离了文档流与浮动模型，独立于其他对象而存在，没有占位。

3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角

溢出：overflow

display：none,block,inline-blck,不显示占位

visibility:hidden显示占位

盒子模型的理解：

内容（CONTENT）就是盒子里装的东西；

而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；

边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子；

 因此，常出现的外边距是盒子外面的，而内边距的盒子包含的，会影响盒子的宽高