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为负数强制移到空白处就好了。他的优点就是自由,改变了浮动布局和流动布局受结构限制的弊端,缺点就是不精确