css2.1页面布局

css(2.1):

包含块：

较早前讨论浮动元素的包含块：对于浮动元素，其包含块定义为最近的块级祖先元素，对于定位，情况就会发生变化：

 

根元素的包含块（也称为初始包含块）是有用户代理创建的，也就是html元素，不过浏览器会使用body作为根元素，在大多数浏览器中，初始包含块是一个视图窗的矩形；

 

对于一个非根元素，如果其position的值为relative或static，包含块由最近的块级框，表单元或行内块祖先框，内容边界共同决定的；

 

对于一个非根元素，如果position属性是absolute，其包含块由最近的不是static的祖先元素；

一、如果这个祖先是块级元素，包含块则设置为该元素的内边距边界；换句话说，就是由边框界定的区域；

 

二、如果这个祖先元素是行内元素，包含块则设置为该祖先元素的内容边界，在从左向右读的语言中，包含块的上边界和左边界是该祖先元素中第一个框内容区上边界和左边界，包含块的下边界和右边界是最后一个框内容区的下边界和右边界。如果语言是从右往左读，那么上下边界没有影响，左右边界互换。

 

如果没有定义祖先元素，那么元素的包含块是初始包含块。

 

每一个属性：都有必要知道它的默认值是什么：

定位：left、top、bottom、right的默认值为auto;

 

浮动：

一般使用定位的方法：盒模型、定位、浮动

浮动一开始，使用是围绕着让行内元素围绕在元素周围；

浮动提升半层，一个元素分两层，定位是一个层级一个层级提升的。

 

三列布局:

两边固定，中间自适应；

当中列要完整显示，

当中列要优先加载；

圣杯布局：

当中列在最前面，那么左列的margin:left需要设置成负值，才能浮在中列的上面，浮动到中列的左侧；

margin:只调整元素边界，不动元素位置。

 

浮动搭建完整的布局框架：

margin:为赋值，调整两列的位置，使三列到一行；

使用相对定位：调整旁边两列的位置（使两列位置调整到两头）；

 

mdn搜索api（火狐官方文档）；

 

等高布局：

（容器使用：overflow:hidden伪等高；）可以使用padding（bottom）撑开布局然后通过将元素的外边框（margin_bottom）回调，就能将元素的高度统一为长的哪一个。然后再使用overflow:hidden；

原理是因为：padding向下推了一个正值，本质上margin自动移到下面，通过设置margin为负值将元素收回到最长的内容等padding值，这样虽然内容向下扩充了，但本质上margin依然受到元素内容的扩充，这样内容就能被元素撑开，而不会考虑到padding带来的障碍。这时候使用overflow:hidden就将多余的padding隐藏起来了。

在页面上，只要等高的几列相差的距离不超过设置的padding;效果就是等高布局；

可以将这个布局设置给圣杯布局，这样就能实现内容自适应等高了；

 

尽量不要使用定位布局，层级的提升（相对定位）（不然可能在页面拉扯、窗口大小发生变化的时候出现很多错误）；

双飞翼布局：