DIV+CSS布局时要注意什么

这篇文章主要介绍“DIV+CSS布局时要注意什么”,在日常操作中,相信很多人在DIV+CSS布局时要注意什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”DIV+CSS布局时要注意什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联是一家以网络技术公司,为中小企业提供网站维护、网站设计制作、成都网站建设、网站备案、服务器租用、域名注册、软件开发、微信小程序等企业互联网相关业务,是一家有着丰富的互联网运营推广经验的科技公司,有着多年的网站建站经验,致力于帮助中小企业在互联网让打出自已的品牌和口碑,让企业在互联网上打开一个面向全国乃至全球的业务窗口:建站电话联系:18980820575

DIV+CSS布局注意要点

1、对DIV设置水平居中的问题。

只要在这个DIV里面加上一句"margin:auto"即可;
例如:

<# div id="center">

相应的css为:

#center{  margin:auto;  }

2、用float属性的div布局问题。

例如:(其中floatA、floatB的属性已经设置为float:left;)

<#divid="float_a"> <#divid="float_b"> <#divid="not_float_c">

这里的not_float_c并不希望继续平移,而是希望往下排。
解决方案是在not_float_c的div里面加上clear:both;属性即可。

相应的css为:

#not_float_c{  clear:both;  }

3、用float属性时margin属性加倍的问题。

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;属性即可;
例如:

<#divid="add_float">

相应的css为:

#add_float{  float:left;  margin:5px;/*IE下理解为10px*/  display:inline;/*IE下再理解为5px*/  }

4、想要消除ul、li列表的缩进的问题。

解决方法:

<#divid="div">  #div{  padding:0px;  margin:0px;  list-style:none;  }

其中padding属性是指div边框向内增加,margin属性是指div边框向外增加。

5、关于FF与IE的Hack的支持。

FF:支持!important,IE则忽略,可用!important为FF特别设置样式,值得注意的是,一定要将xxx!important这句放置在另一句之上

6、关于容器的包涵关系

很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

7、关于高度的问题

如果是动态地添加内容,高度***不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度***定好。

8、兼容IE和FF的换行CSS推荐样式。

#row{  word-wrap:break-word;  overflow:hidden;  }

9、兼容IE和FF的限行CSS推荐样式。

#row{  height:200px;  overflow:hidden;  }

到此,关于“DIV+CSS布局时要注意什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


本文题目:DIV+CSS布局时要注意什么
URL分享:http://scyanting.com/article/pgsese.html