PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

div+css标准布局常见问题及解决办法_html/css_WEB-ITnose

原创
2016-06-24 12:28:41 661浏览

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支持

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。