学习CSS制作网页的多个经验技巧

日期：2008年2月16日作者：查看:[大字体中字体小字体]

　　让你使用DIV+CSS排版不是让你用换个标签然后再去按照表格的方式去排版

　　而是做到内容与表现的分离

　　1: ID用于标识页面单独元素以及持久行的结构性元素方便JS的调用

　　类用于标识同一页面可重复定义使用的结构性元素 ID与类的命名需与表现形式无关：leftContent 而使用有意义的定义方式：sideBar等等。命名方式遵循“驼峰式大小写（标志符由多个单词组成除首词首字母小写外其余单词首字母均大写）”

　　2：避免滥用类当类型的结构需要不一样的表现时记得什么是层叠样式表具体结构中的p a h1等可使用如下方式：div.sideBar p{}定义即后代选择器+ID或类选择器组合方式。

　　3：DIV与SPAN IV（块级框）用于对块级元素的分组 SPAN（行内框）用于对行内元素分组标识

　　4：对于页面基本默认的方式可以选择通用选择器（*标识）进行定义 * { padding：0; margin:0;}

　　5: body 也是可以添加ID和类的这样就可以为其添加特别样式。

　　6:样式表中导入样式表需在顶端覆盖规则为本身样式覆盖导入样式

　　7：CSS样式表细分化颜色布局风格表单均可分离这样对以后的修改和风格设计更方便

　　8：盒模型：内→外

　　content←width height(补充：height只有在父元素定义了绝对高度时其%才有意义)

　　border

　　padding（内补丁）-“填充”

　　background-image

　　background-color

　　margin(外补丁)-“空白边”透明可为负值

　　记住:在css中 width是指内容区域的宽度

　　IE/WIN与盒模型：

　　IE5.5/IE6怪异模式下：元素框总宽度=content.width+margin.width

　　FireFox/Opera/.. : 元素框总宽度=content.width+padding.width+border.width+margin.width

　　差异在于：IE5.5/IE6怪异模式下 width=有效content.width+padding.width+border.width 内补丁和边框被算在内容宽度里面

　　#select{width:750px;padding:10px;border:5px} IE怪异模式:总宽度：750px FF/OP：780px

　　IE怪异模式:有效内容宽度：750-20-10 FF/OP：750

　　IE6正常模式下：同于FF/OP

　　处理方法：在父元素或子元素中使用padding 本身不使用

　　空白边叠加：当两个空白边叠加时顶或底边将会叠加实际空白边高度=空白边大的值

　　例：

　　

　　空白边高度为20px

　　但是如果这个时候你添加边框或则填充，将不再叠加

　　//定位机制//

　　9：相对定位（relative）：相对于其默认初始位置绝对定位：相对父级元素或画布、HTML元素与文档流无关可覆盖其他元素使用Z-INDEX 控制其层次。IE5.5/IE6下对right bottom时需设定框的宽高后则根据画布右底定位

　　绝对定位（absolute）

　　10：float浮动：记住：“在标准浏览器中浮动元素脱离了文档流不占据外围容器空间” 明白了这点你就会明白为什么IE和FIREFOX下表现的不同了。IE5.5、IE6浮动元素依然占据外围容器空间
[1] [2] 下一页
学习CSS制作网页的多个经验技巧相关文章：
·学习CSS制作网页的多个经验技巧
·把网页保存为图片换种方式收集有用资料
·学习CSS制作网页总结的一些经验技巧
·网页排名靠前网页标题写法
·小技巧让你轻松DIY你的网页滚动条
·防止网页被盗用　网页加密完全攻略
·上网冲浪选谁更好七款主流网页浏览器评测
·轻松把任何网页工具放进Vista侧边栏
·搜索引擎有效删除有害网页内容的探究
·德国网页设计师Ruhrpott设计作品欣赏
学习CSS制作网页的多个经验技巧相关软件
·飞走的是树　留下的是鸟（网页版）
·《玉泡泡》（网页版）
·系列语言网页设计
·photoshop cs 超梦幻网页创意宝典
·闪客梦幻工场FLASHMX网页动画宝典
·photoshop V7 网页设计必成攻略
·Photoshop 6.0和Dreamweaver 4.0网页及动画制作
·Flash MX 网页一把抓
·网页三剑客MX 绿色经典版免安装免注册推荐收藏请查看
·网页界面设计艺术教程

上一篇:多个技巧让局域网内互访无障碍

下一篇:Windows XP SP2是否正版原版技巧

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

学习CSS制作网页的多个经验技巧

精品推荐

热点TOP10

特别推荐