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标记均可看做一个盒子；

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