css——记录几种网页布局

1.网页居中显示

（1）普通网页中，最常用
IE浏览器兼容：只设置text-align：center就可以
非IE浏览器兼容: margin的左右边界设置为auto（自动），同时要定义网页的宽度width，且宽度不能为100%，要不然就看不到居中的效果。
（2）浮动网页中
上述方法在添加float属性后，页面居中效果失效，解决办法有两种:
一是在原来的div包含框上再添加一层包含框，外层流动（定义position）显示，内层浮动（定义float）显示。外层的宽度是液态宽度，依然不能为100%，因为在100%的时候是铺满全屏，内层的宽度为100%是为了与外层同宽。
二也是添加一层包含框，但是外层浮动显示，内层流动显示。外层的宽度必须为100%，否则不居中，因为它定义了向左浮动，只有在100%的时候，才能铺满全屏，而内层就相当于普通页面，宽度不能为100%
（3）定位网页中
同浮动定位一样，需要借助外框。外框相对，内框绝对因为外框相对定位，内框会遵循流动布局。如果不定义外框为reletive，内层也是居中显示，就是宽度的父级变成了网页，而不是外框。

问题一：就算不定义外框为reletive，内框照样居中显示，只是定义宽度为100%的时候，右边是铺满屏幕的
解决：这个问题尚待解决。

2.定位版三行三列版布局页面

（1）普通布局
用定位布局设计三行三列比浮动布局要简单些。方法就是外层普通网页，内层绝对定位用top和left那四个来控制位置。当需要切换左右栏的时候，直接修改left和right的值就好了。
补充：关于相对定位和绝对定位
相对定位是在原来的文档位置上进行偏移。更多的被用来当做定位包含框，因为它不会脱离文档流，另外相对定位可以很方便的微调文档流中对象的位置偏差 。
绝对定位中关于脱离了文档流的解释，就是当拖动定位为absolute的文档是时候，div结构是不变的，变化的是top和right的值。但是其他拖动文档的时候，div块移动了，也就是说它通过改变结构来改变位置。
（2）高度延伸覆盖时
当绝对定位定义了高度的时候，会出现绝对定位覆盖其他定位的情况，这里有两个解决办法：
一是预知定义绝对定位的高度：height
二是用javascript来调整绝对定位的高度。
主要的思想就是用offsetHeight获取需要的div高度，然后用条件运算符作比较，选择最大的那个作为外边框的高度。

3.多个栏目高度保持一致的页面

解决高度不一不美观的问题

（1）伪布局。通过background添加图片的方法，使用的时候，确保页面的宽度是固定的，不能用%或者auto来设定。
（2）使用定位布局（不推荐）：补白和边界重叠法。这个方法是通过设定补白padding-bottom为正无穷大，然后边界margin-bottom为负无穷大，再用overflow：hidden；声明剪去多出来的区域。这种方法对流动或者浮动元素很友好。这种方法的缺点就是对于绝对定位很不友好，如果绝对定位高了，就会被裁减掉。

在这里遇到的问题
问题一：我先设置了div1块补白为正无穷大，定义了颜色，然后没有问题，下面的div块都变了颜色，但是我一再设置margin的时候，就变成了id=main的div块有颜色，而不是我定义的div1。
解决：后来我才明白是因为overflow我定义在了id=main的div块里了。
问题二：我在div1块里定义overflow=hidden不起作用。
解决：这个是因为overflow剪去的是margin多余的区域，在div1里定义是不管用的

（3）采用浮动法设置：这个方法与前面的方法相似，就是多设置了float：left和width的长度。然后再用补白无穷大和边界无穷小，最后加上overflow。注意清除margin和padding的边框，即设置为0，看起来更紧凑。
补充：float托动不了，relative拖动不了，普通的文本框可以拖动，absolute可以拖动

4.设计负margin页面

这个主要是解决逆结构的问题
（1）用浮动设置法。添加了一个外框，设置为相对定位
（2）外边界法。不需要添加外框，只要左边的div块留出空白，然后右边的div块用margin-left为负数强制移到空白处就好了。他的优点就是自由，改变了浮动布局和流动布局受结构限制的弊端，缺点就是不精确