DIV+CSS布局总结

1、 ie系列采用的是微软自己的盒子模式，firefox采用的是标准的w3c盒子模型。

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

在实际的操作中可采用如下方法避免如上不同。

    Padding-left:40px;width:920px !important;//firefoxwidth:960px;

2、当好几个DIV层通过float:left和margin-left布局时，ie6中有bug，ie6默认会把第一个层的margin-left做双倍处理。

3、当即可以用margin，也可以用padding时，尽量使用margin，当用dreamweaver中设计模式参看时，用margin能与实际页面效果更加接近。

4、当出现如下状况时：

<div id="baihuiimage"><img src="data:images/banner.jpg">
</div>

尽量改成：<div id="baihuiimage"><img src="data:images/banner.jpg"></div> 这样写效果更加正确。

5、 css sprites技术（背景图片拼接技术）技巧：首先，用photoshop把背景图片整合到一起，生成一张png图片。然后在写css时用background-position定位，用bg2css这个工具测出偏移量。Css 如下：

background:url(../images/index.png) no-repeat -961px -78px;

6、当使用list-style-image属性时，css sprites会无法确定其位置，这时可使用li的background代替：如下：

background:url(../images/index.png) no-repeat -961px -78px;

DIV+CSS布局总结相关推荐

DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局表格布局导航推荐文章一个猴子成长史你看个毛线我就瞅你咋地村里出了个半边天一个猴子的成长 ...
DIV+CSS布局图片加阴影效果方法
DIV+CSS布局图片加阴影效果方法转自:爱微网 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
根本不存在 DIV + CSS 布局这回事
实际上div不是用来布局的,div只是用来表示一个其它元素都无法准确表达语意的一个块区,只有CSS是用于布局的,所以根本就不存在div+CSS布局这回事.反过来,table布局的时候经常依赖于CSS定 ...
DIV CSS布局-固定页面开度布局
DIV CSS布局中主要CSS属性介绍: Float: Float属性是DIV CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...
html中表格布局还是div布局,Table布局 VS Div+CSS布局，选哪个？
Table布局和 Div+CSS布局的争论,过了7-8年了,今天看到一篇文章<为什么我们不建议用Table布局>,又想发表下自己的见解,供初学 <为什么我们不建议用Table布局& ...
Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
Div+CSS布局入门教程(二) 写入整体层结构与CSS
接下来我们在桌面新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: <!DOCTYPE html PUBLIC "- ...
div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题收藏所有浏览器通用 (市面上主要用到的IE6 IE7 FF) height: 100px; IE6 专用 _height: 100px; I ...
城市智慧路灯综合管理平台、图监控、灯箱实时监控、策略管理、故障报警、灯具管理、数据统计、故障分析、开关灯记录分析、区域管理、分组管理、DIV+CSS布局设计、HTML/Bootstrp/jQuery
源码类别: 后台模板文件大小: 21.5 MB 源码内容:城市智慧路灯综合管理平台后台模板前端技术: HTML/CSS/Bootstrap/jQuery 模板语言: 简体中文 ...

DIV+CSS布局总结

DIV+CSS布局总结相关推荐

最新文章

热门文章