div+css网页标准版式布局

来源:百度文库 编辑:神马文学网 时间:2024/04/28 06:52:16

红色字符和背景标识的为比较实用的结构固定宽度CSS版式布局

红色字符和背景标识的为比较实用的结构自适应(弹性)宽度CSS版式布局

标准布局常见问题及解决办法(我要评论以上模板)

CSS2.0盒模型层次平面示意图和3D示意图
3像素问题及解决办法
当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高的话,请参考例29、31的解决方法
上边容器浮动后,下边的容器跟着浮动,造成页面错乱
如以上例子中的footer必须要单独占一行,但当sidebar浮动后,content的高度小于sidebar的高度时,footer也跟着浮动到sidebar右侧了,造成页面错乱。解决办法是在maincontent和footer之间插入一个容器,设置样式 clear:both; height:0; font-size: 1px; line-height: 0px;用clear:both清除,即可使页面正常
当子元素浮动且未知高度时,怎么使父容器适应子元素的高度?
这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容IE6而使用的CSS HACK。zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持