CSS网页布局常见问题有哪些

这篇文章将为大家详细讲解有关CSS网页布局常见问题有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联是一家集网站建设,西藏企业网站建设,西藏品牌网站建设,网站定制,西藏网站建设报价,网络营销,网络优化,西藏网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

◆float的3像素问题及解决办法

当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高的话,可以在float浮动容器样式里加针对IE6的属性”_margin-right”和”*html”,如:

#sidebar{ float:left; width:200px; _margin-right:-3px;}

或者

#sidebar{ float:left; width:200px;}  *html #sidebar{ margin-right:-3px;}

◆上边容器浮动后,下边的容器跟着浮动,造成页面错乱

CSS网页布局常见问题有哪些

CSS网页布局常见问题有哪些

如图中布局所示:footer必须要单独占一行,但当sidebar浮动后,content的高度小于sidebar的高度时,footer也跟着浮动到sidebar右侧了,造成页面错乱。解决办法是在maincontent和footer之间插入一个容器,设置样式
clear:both; height:0; font-size: 1px; line-height: 0px;用clear:both清除,即可使页面正常

◆IE6下float浮动导致双倍边距的bug

当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况。如外边距设置为10px,而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug

◆当子元素浮动且未知高度时,怎么使父容器适应子元素的高度?

这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容IE6而使用的CSS
HACK。zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持这种写法,可以专门针对IE来写单独的样式,所以可以把这个属性写在页面内的中,这样应该可以通过验证了

◆CSS布局的相对定位与绝对定位

规划页面时,许多时候需要用到相对定位或绝对定位,这里边有个CSS技巧,掌握后有些地方就不用繁冗的js了。就是当父容器使用相对定位后,此时子元素再使用绝对定位,位置是相对于父元素。如果父元素没有定位,那么子元素的绝对定位是相对于浏览器

关于“CSS网页布局常见问题有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网页名称:CSS网页布局常见问题有哪些
文章路径:http://ybzwz.com/article/gggjph.html