CSS实战学习总结.pdf

1 CssCss 实战学习总结实战学习总结 20092009 年年 7 7 月月 2 文件介绍文件介绍 阅读列表阅读列表 引用文章列表引用文章列表 修改记录修改记录 文件名文件名CSS 实战学习总结 内容内容欧盟特网站项目文档模型 版本版本1 0 作者作者辛磊 状态状态项目文档 发布范围发布范围欧盟特公司内部 阅读者阅读者执行者执行者审阅者审阅者 文章名文章名版本版本作者作者 日期日期版本版本修改修改修改者修改者 公司机密文件 任何未经同意 对本文的使用 拷贝或任何形式的散发都是违法的 3 项目文档目录项目文档目录 CSS 基础 5 1 1 简单简单 HTMLHTML 的好处的好处 5 5 5 5 2 2 可以避免使用的标签可以避免使用的标签 5 5 5 5 3 3 检验网页检验网页 5 5 5 5 4 4 检验检验 CSSCSS 5 5 5 5 5 5 选择器选择器 6 6 6 6 6 6 利用继承节省时间利用继承节省时间 8 8 8 8 7 7 管理多种样式管理多种样式 层叠层叠 9 9 9 9 实用的 CSS 10 8 8 格式化文本格式化文本 10101010 9 9 DISPLAYDISPLAY 各属性使用说明各属性使用说明 12121212 10 10 全面阐述全面阐述 OVERFLOWOVERFLOW 属性属性 12121212 11 11 BACKGROUND POSITIONBACKGROUND POSITION 属性属性 12121212 12 12 多个多个 DIVDIV 居中居中 16161616 13 13 关于关于 ZOOMZOOM 16161616 14 14 理解盒模型理解盒模型 17171717 CSS 布局 30 15 15 了解了解 LAYOUTLAYOUT 31313131 16 16 上下上下 MARGINMARGIN 叠加叠加 31313131 17 17 双边距双边距 BUGBUG 31313131 18 18 3PX3PX 的间隙的间隙 31313131 4 19 19 消失的消失的 MARGIN BOTTOMMARGIN BOTTOM 31313131 20 20 IE6IE6 中捉迷藏的中捉迷藏的 BUGBUG 31313131 21 21 ULUL 的不同表现的不同表现 33333333 22 22 对对 HACKHACK 的使用的使用 35353535 23 23 负边距布局负边距布局 35353535 24 24 定位属性如何工作定位属性如何工作 38383838 高级 CSS 42 25 25 CSSCSSCSSCSS 编码规范总结编码规范总结 42424242 26 26 前台编码规范总结前台编码规范总结 48484848 27 27 打印时去除背景元素打印时去除背景元素 53535353 点击鼠标右健 选择更新目录 该目录即可根据文章中的结构自动生成 5 CSSCSS 基础基础 1 1 简单简单 HTMLHTML 的好处的好处 这里只强调一下简单的 HTML 布局对搜索引擎的好处 首先样式与结构分离 能够减少 html 的代 码 页面加载时间减少 其次可以提升像 Google yahoo msn 等网站所定义的搜索引擎排名 那是 因为搜索引擎爬取网站时 会搜索网页的所有 HTML 已发现实际内容 使用特殊的标签如和 表格等会阻碍搜索工作 而简单的 HTML 布局会有利于搜索 我们在网站上使用如来表示最重要的网页主题是个明智的策略 当索引这个网页时会给这个标 签中的内容更大的权重 以前没有注意过这方面的知识 我想我们在以后的工作中对于标题要尽量 用这种标签来进行突出 Google 对于易搜索网页的建议 2 2 可以避免使用的标签可以避免使用的标签 1 避免使用 这个标签不利于搜索引擎的搜索 2 尽量避免使用 table 布局 3 不要滥用标签 这个毛病相信很多人都在犯同样的错误 我们应该避免了 我们完全 可以控制边距来达成预想的效果 4 排除仅仅用来增强内容展现的笨拙的标签属性 如 background bgcolor Text link alink vlink 我们在编写代码时将代码检测标准设置为 XHTML1 0 以上 版本 可以避免这个问题 3 3 检验网页检验网页 网址 http validator w3 org 以前写过一个 XHTML 标准文档 查看 希望对大家有帮助 大家可以继续补充 CSS XTHML 书写规范以及常见问题总结 查看 你可以下载一个你喜欢的验证插件安装到你的 ff 浏览器上 如 http users skynet be mgueury mozilla screenshot html 4 4 检验检验 CSSCSS 网址 http jigsaw w3 org css validator validate by uri with options Css 命名规范总结 查看 6 5 5 选择器选择器 1 1 标签选择器标签选择器 整体样式 格式如下 h1 color Red font size 9pt font family Arial 优点 毫不费力的对网页进行大规模的设计改变 缺点 不能进行精确控制 例如段落样式不同时 2 2 类选择器 类选择器 精确控制 格式如下 special color Red font size 9pt font family Arial 优点 灵活性高 可以给任意标签指定样式 缺点 会带来更多的工作 3 ID 3 ID 选择器 选择器 特殊的网页元素 格式如下 special color Red font size 9pt font family Arial 优点 用于一些特殊的用途 基于 javascript 缺点 一个网页中只能引用一次 XHTML 标准 使用 ID 选择器和类选择器必须遵循以下规则 A 网页中多次使用某个样式可以选择类选择器 B 使用 ID 来辨别网页上只使用一次的部分 通常可以通过 javascript 来控制 C 使用 ID 选择器来避免样式冲突 因为网页浏览器给了 ID 选择器高于类选择器的优先权 3 3 派生选择器 派生选择器 给标签内的标签定义样式 格式如下 h1 strong 任何处在h1标签内的strong标签都是红色的 其他strong标签不受影响 color Red 或者 7 info strong color Red 派生选择器创建规则 最高级的祖先在左侧 你真正的目标标签在最右侧 优点 集合了标签选择器 类选择器和 ID 选择器的优点 威力更大 4 4 构造选择器 构造选择器 给标签内的标签定义样式 格式如下 h1 h2 h3 h4 color Red 为了使多个选择器作为一个组进行 只要创建一列用逗号分开的选择器即可 注意 如果你想要一串网页元素共享同样的格式化属性中的部分而不是全部 那你可以创建一个群 选择器 带有某个独立的元素都共享的格式化选项 独立的规则和独特的格式 5 5 通配选择器通配选择器 定义通用样式 格式如下 color Red 表示页面上的所有字体都是红色 号是选择每个单一标签的通配选择器标记 可以把通配选择器当成派生选择器的一部分 6 6 子选择器 子选择器 给另一个标签的子标签进行格式设置 不常用 IE6 不支持 格式如下 sf navbar li current a font weight bold 字选择器使用另外一个符号 尖括号 来表示两个元素之间的关系 7 7 临近同胞 临近同胞 周围同胞共享一个父标签的标签 不常用 IE6 不支持 格式如下 h2 p color red 什么是临近同胞 在 HTML 中 一个就出现在另一个标签后面的标签被称作临近同胞临近同胞 临近同胞使用一个加号 把一个元素和下一个元素连接起来 这样看起来有点抽象 我也是第一次接触这种写法 下面举一个例子 临近同胞测试 8 段落1 段落1 段落1 段落1 段落2 段落2 段落2 段落2 上面的段落 1 既是的临近同胞 运行结果如下 8 8 属性选择器 属性选择器 可以挑选带有特定属性的标签指定样式 不常用 IE 系列不支持 格式如下 img title width 150px height 150px 如下图 左面是有 title 属性的 右面没有 我们在做网页的时候要以实际情况根据上面几种选择器的特点来分析我们到底使用哪种方式 6 6 利用继承节省时间利用继承节省时间 9 1 1 什么是继承 什么是继承 简单的说继承是应用在一个标签上的那些 css 属性被传递到嵌套标签上的过程 2 2 继承怎样使样式表简化并更有效继承怎样使样式表简化并更有效 我们首先要分析整个页面中使用的字体类型等比较通用的 如 OMT2 0 项目整个网站的字体是固定 的 因此我们没有必要在每个标签上定义字体的类型 我们可以这样定义 font family Arial Sans Serif 使用继承我们可以节省很多的代码 3 3 继承的局限性继承的局限性 在 CSS 中 继承是一种非常自然的行为 我们甚至不需要考虑是否能够这样去做 但是继承也有其 局限性 首先 有些属性是不能继承的 这没有任何原因 只是因为它就是这么设置的 举个例子来说 border 属性 大家都知道 border 属性是用来设置元素的边框的 它就没有继承性 多数边框类 属性 比如象 Padding 补白 Margin 边界 背景和边框的属性都是不能继承的 这里有一些例子 说明什么时候继承不会被严格应用 一般来说 影响网页上的元素位置的属性 或者边距 背景颜色和元素的边框等属性都不被继 承 网页浏览器用他们自己固有的样式为各种各样的标签设置格式 标题是大号和粗体 链接是蓝 色的等等 当你给网页上的文本定义一种字号 并把他们应用到标签时 标题仍然显示 得比段落字体大 且标签仍然比标签大 当样式表发生冲突时 更具体的样式胜出 换句话说 当你已经明确的应用了 css 属性给一个 元素时 比如给一个无序列表指定字号 并且那些属性无论与哪个继承属性相冲突 比如与给 标签设定字号的属性相冲突的话 浏览器会使用给标签的字号 7 7 管理多种样式管理多种样式 层叠层叠 1 1 什么是层叠 什么是层叠 层叠是决定哪种样式属性能被应用到元素的一套规则 他指定网页浏览器应该如何处理应 用给同一标签的多个样式的问题 以及当 css 属性相冲突时该做什么 样式冲突会在两种情况下发生 当从多个祖先处继承了同一种属性的时候 以及当一个或 者多个样式应用给同一个元素的时候 2 2 样式的继承 就近原则 样式的继承 就近原则 如果使用了主题 那么先使用主题中定义的样式 3 3 CSSCSS 提供了一个公式他根据指派给样式选择器的值决定样式的特性提供了一个公式他根据指派给样式选择器的值决定样式的特性 标签选择标签选择 器 类选择器 器 类选择器 IDID 选择器 等等 选择器 等等 方式如下 一个标签选择器值 1 分 一个类选择器值 10 分 一个 ID 选择器值 100 分 一个行内样式值 1000 分 数字越大特性越大 举例 10 标签的一个标签样式 特性 1 命名为 highlight 的一个类样式 特性 10 命名为 logo 的一个 ID 样式 特性 100 那么假如你的网页中有如下代码 如果这三个样式都定义了一个属性 border 那么就会采用来自 ID 的样 式 4 4 平局修正器 最后一个样式胜出 平局修正器 最后一个样式胜出 带有冲突属性的两种样式可能具有相同的特性或者两个不同的样式可能 具有相等的特性值 一旦出现平局 最后一个出现在样式表中的样式就会胜出 举例 举例 HTML 代码 Written byContact CSS 代码 P a emali Color blue p byline a Color red 这两个样式的特性都为 12 一个类名称 10 分 两个标签 2 分 并且两者都应用给 标签 浏览器会采用第二个样式红色 因为他是表单的第二个样式 实用的实用的 CSSCSS 8 8 格式化文本格式化文本 1 1 指定字体指定字体 由于不同的计算机上安装的字体可能不同 因此我们在选用字体式一方面根据自己喜欢的字体设置 字体类型 另外还需要指定备用字体 OMT2 0 中字体类型指定的方式为 font family arial Sans Serif 2 2 字体单位字体单位 关于字体的单位大家能够知道有多少种 如 px em pt 这些是经常用到的 以前只是知道字体的单 位 而对他们之间有点模糊 今天系统的看了一下 在 CSS 样式表中长度单位分为两种 相对长度单位 如 px em 等 绝对长度单位 如 pt mm 等 一般用于输出设备 如打印机 pxpx 相对长度单位 像素 Pixel 像素是相对于显示器屏幕分辨率而言的 对于计算机的屏幕而言 像素是一个最小的单位 也就是 一个可见的点 如果你的屏幕分辨率为 1024 768 那么你的屏幕宽度就是 1024px 其他所有单 位 都和像素成一个固定的比例换算关系 通俗地说 不管你的屏幕分辨率是多少 换算的比例不 会改变 相对长度和绝对长度的单位都是对于像素的 而不是拿尺子能量出的固定的长度 他不能 缩放 但是他能给不同的计算机和浏览器提供一致的文本大小 11 emem 相对长度单位 相对于当前对象内文本的字体尺寸 1em 指一个字体的行高 在默认情况下 大多 数浏览器的行高是 16px 这样算起来 1em 16px 如果你把字体定义为 20px 那么 1em 就是 20px 如当前行内文本的字体尺寸未被人为设置 则相对于浏览器的默认字体尺寸 对于中文排版 em 不适合 因为中文字体只有 12px 14px 看起来还可以 别的单位都有很大的失真 它与百分比类 似 也就是说 1em 100 0 5em 50 类似的 2em 200 它可以缩放 ptpt 绝对长度单位 点 Point 1in 2 54cm 25 4 mm 72pt 6pc 举例 例如打印一篇 Word 文档 在不同的分辨率下打印的结果是一样的 不会因分辨率的改变 而改变 计算得单位就是 pt 从使用上来说 同一个分辨率下 pt 和 px 可以转化 如 12px 9pt 但是大小是固定的 使用 IE 的 调整字体大小不能改变文字的字体大小 em 是可以的 如果仅仅是用于网页上 使用相对长度会 让你更容易控制元素的大小位置 一个尺寸并不能适合所有的人 不可能所有的用户的分辨率都一样 就算一样 适合你的大小的字 并不一定适合别人 那为什么不把选择权交给用户呢 IE 的缩放机制 px 会被固定大小 而 em 在 某些情况下还是可以让 IE 的字体使用缩放功能 但是这并不意味着 em 会比 px 更好用 因为我们 做网页常常要精确到 1px 的距离 例如字体是 16px 那 1 6em 是多少呢 16 1 6 25 6px 那浏 览器是显示 25px 还是 26px 呢 虽然大多说浏览器都会把小数点后的忽略不显示为 25px 但是如 果页面有某一部分的字体大小并不是 16px 而是 14px 或者 12px 这时 1 6em 转化成多少 px 时的值 就发生变化了 查看了一下几个比较主流的网站 想 163 百度 淘宝 雅虎中国发现他们的字体基本上都是使用 px 作为计算单位 而 google yahoo 使用的百分比和 em 会比较多 使用 em 必须有一点要特别的关 注 那就是样式的继承性 这里有一篇详细的文章 介绍中国网站与外国网站关于字体单位使用的 一个详细分析 重点重点 我们在使用 em 时必须注意以下问题 em 指字体高 任意浏览器的默认字体高都是 16px 所以未经调整的浏览器都符合 1em 16px 那 么 12px 0 75em 10px 0 625em 为了简化 font size 的换算 需要在 css 中的 body 选择器中声 明 Font size 62 5 这就使 em 值变为 16px 62 5 10px 这样 12px 1 2em 10px 1em 也就是 说只需要将你的原来的 px 数值除以 10 然后换上 em 作为单位就行了 em 有如下特点 1 em 的值并不是固定的 2 em 会继承父级元素的字体大小 重写步骤 1 body 选择器中声明 Font size 62 5 2 将你的原来的 px 数值除以 10 然后换上 em 作为单位 3 重新计算那些被放大的字体的 em 数值 但是 12px 汉字例外 就是由以上方法得到的 12px 1 2em 大小的汉字在 IE 中并不等于直接用 12px 定义的字体大小 而是稍大一点 这个问题 Jorux 已经解决 只需在 body 选择器中把 62 5 换成 63 就能正常显示了 原因可能是 IE 处理汉 字时 对于浮点的取值精确度有限 不知道有没有 其他的解释 12 为了形象的说明请看以下截图 将 em 作为字体带来的问题 注意 需要指出的是任何有单位的值 单位不要省略 以免造成不可预知的错误 另外我们在使用 无序列表时需要注意 list style image 属性对 IE6 和更早的 IE 版本不支持 另外他对图片不提供 任何位置上的控制 因此不推荐使用 3 3 text transformtext transform 的使用的使用 语法 text transform none capitalize uppercase lowercase 参数 none 无转换发生 capitalize 将每个单词的第一个字母转换成大写 其余无转换发生 uppercase 转换成大写 lowercase 转换成小写 说明 检索或设置对象中的文本的大小写 对应的脚本特性为 textTransform 请参阅我编写的其他书目 示例 div text transform none div text transform capitalize div text transform uppercase div text transform lowercase 注意 用 text transform 只对英文起作用 对于汉字时失效 9 9 DISPLAYDISPLAY 各属性使用说明各属性使用说明 对于 display 我做了一个专门的测试 具体的介绍请阅读 关于 display inline block inline block 10 10 全面阐述全面阐述 OVERFLOWOVERFLOW 属性属性 对于这个部分的详细了解 请阅读 全面阐述 overflow hidden 属性 11 11 BACKGROUND POSITIONBACKGROUND POSITION属性属性 background position 是文档背景图片的显示位置 属性值 一个或者两个长度值 百分比值或者关键字联合使用 13 初始值 0 0 background position 通常和 background repeat 和 background attachment结合使用 顾名 思义 background position的含义就是显示背景图片的位置 而如果背景图片按照默认样式 在水平和垂直方向同时重复 那么设置背景图片显示位置是没有意义的 1 如果两个属性值都是百分比值 例如 background position 0 0 则表示背景图片 定位在左上角 紧靠左侧和上方边界 如下图演示了设置背景图片定位于左上角的方法 CSSCSS 代码 代码 body background image url fishing jpg background repeat no repeat background position 0 0 效果图 效果图 14 背景图片定位 0 0 的效果 2 同样 如果两个百分比值为 100 100 则表示背景图片定位于右下角 紧靠右侧和下 方边界 效果如下所示 CSSCSS 代码 代码 body background image url fishing jpg background repeat no repeat background position 100 100 效果图 效果图 背景图片定位 100 100 的效果 3 同理可推 50 则表示背景图片处于这个方向的中央 4 如果两个属性值都是绝对长度值 例如 background position 100px 50px 则表示背 景图片定位的距离于左上角的左侧 100 像素和距离其上方 50 像素的地方 效果如下图所示 CSSCSS 代码 代码 body background image url fishing jpg 15 background repeat no repeat background position 100px 50px 除了使用百分比值和绝对长度值定义背景图片位置外 还可以使用一对关键字进行定义 用绝对长度值定位背景图片 表表关键字定义法 关 键 字等量百分比值图示 top left left top 0 0 top top center center top 50 0 right top top right 100 0 left left center center left 0 50 center center center 50 50 right right center center right 100 50 16 续表续表 如果设计者只给出一个属性值而不是一对 那么它只作用于水平方向 且垂直方向永远限定于 50 如果同时给出一对属性值 则第一个属性值作用于水平方向 第二个作用于垂直方向 另外 关键字 绝对长度值和百分比值相互混合使用也是允许的 但是需要注意的是 left 和 right 只能作用于水平方向 top 和 bottom 只能作用于垂直方向 注意 背景图片的定位允许负长度值 表示有部分或者全部背景图片将在对象容器之外 12 12 多个多个 DIVDIV 居中居中 我们对一个 div 居中已经很清楚了 但是如果多个平行 div 在父 div 中同时居中该怎么办 如果子容器不只定宽度肯定是不行的 不只定宽度的话 会默认与父容器宽度相同 大多数我会想到处理这些子容器与父容器的处理方式一样 设置一个固定的宽度并添加 margin 0 auto 当然我们只需设置类似 div margin 0 auto 其子容器的 div 直接继承 父元素设置的这个属性就可以 经过测试我认为这是最简单的方法 没有发现其他更好的方 法 13 13 关于关于 ZOOMZOOM 我们先来看一下官方的定义 兼容性 兼容性 IEIE 基本语法基本语法 zoomzoom normalnormal numbernumber 语法取值语法取值 normal normal 默认值 使用对象的实际尺寸 number number 百分数 无符号浮点实数 浮点实数值为 1 0 或百分数为 100 时相当于此属性的 normal 值 经过测试 其实通俗的来说我们设置为 1 0 或者 100 其实就是原始的大 小 使用说明使用说明 设置或检索对象的缩放比例 设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内 容重新流动 虽然此属性不可继承 但是它会影响对象的所有子对象 children 这种影响 很像 background 和 filter 属性导致的变化 此属性对于 currentStyle 对象而言是只读 的 对于其他对象而言是可读写的 bottom left left bottom 0 100 bottom bottom center center bottom 50 100 关 键 字等量百分比值图示 bottom right right bottom 100 100 17 我们看如下一个事例 我们看如下一个事例 前台代码 前台代码 zoom测试 div zoom 5 使用缩放功能后 原图 效果图 效果图 14 14 理解盒模型理解盒模型 1 1 什么是什么是 CSSCSS 盒模型盒模型 W3C 组织就建议把所有网页上的对象都放在一个盒 box 中 设计师可以通过创建定义来控制这 个盒的属性 这些对像包括段落 列表 标题 图片以及层 盒模型主要定义四个区域 内容 content 边框距 padding 边界 border 和边距 margin margin background color b 18 ackground image padding content border 之间的层次 关系和相互影响 盒模型的示意 图 这些属性我们可以把它转移到我们日常生活中的盒子 箱子 上来理解 日常生活中所见的盒 子也具有这些属性 所以叫它盒子模式 那么内容 content 就是盒子里装的东西 而填充 p adding 就是怕盒子里装的东西 贵重的 损坏而添加的泡沫或者其它抗震的辅料 边框 bord e r 就是盒子本身了 至于边界 margin 则说明盒子摆放的时候的不能全部堆在一起 要留 一定空隙保持通风 同时也为了方便取出嘛 在网页设计上 内容常指文字 图片等元素 但 是也可以是小盒子 DIV 嵌套 与现实生活中盒子不同的是 现实生活中的东西一般不能大于 19 盒子 否则盒子会被撑坏的 而 CSS 盒子具有弹性 里面的东西大过盒子本身最多把它撑大 但 它不会损坏的 填充和边界只有宽度属性 可以理解为生活中盒子里的抗震辅料厚度 而边框有 大小和颜色之分 可以对每一条边框定义不同的样式 我们又可以理解为生活中所见盒子的厚度 以及这个盒子是用什么颜色材料做成的 边界就是该盒子与其它东西要保留多大距离 width 和 height 定义的是 Content 部分的宽度和高度而不是整个盒子的高度 这个是初学者 常犯的一个错误 padding border margin 的宽度依次加在外面 背景会填充 padding 和 conte nt 部分 但是由于浏览器设计上的问题 不同浏览器显示效果会有些不同 左右 Margin 加倍的 问题当 box 为 float 时 IE6 中 box 左右的 margin 会加倍 W3C 定义的平面盒模式如下 边框属性 border 用来设定一个元素的边线 外边距属性 margin 是用来设置一个元素所占空间的边缘到相邻元素之间的距离 内边距属性 padding 是用来设置元素内容到元素边界的距离 2 2 用用 MarginMargin 和和 PaddingPadding 控制的空间控制的空间 要移出 margin 和 padding 控制的空间 就用零 例如 margin 0 要去除浏览器窗口周围的 空格 就要将 body 的 margin 和 padding 设为 0 Margin 属性适用于大多数浏览器 除了 Opera 之外 Opera 要求 padding 设定为 0 注意注意 关于关于 MarginMargin 和和 paddingpadding 取值需要注意的地方 如果设定四个值 它将依次代表上 右 取值需要注意的地方 如果设定四个值 它将依次代表上 右 下 左的距离 如果设定两个值 那么第一个值代表上下的距离 第二个值代表左右的距离 如下 左的距离 如果设定两个值 那么第一个值代表上下的距离 第二个值代表左右的距离 如 果设定三个值 那么第一个值代表居上的距离 第二个代表左右的距离 第三个代表居下的距果设定三个值 那么第一个值代表居上的距离 第二个代表左右的距离 第三个代表居下的距 离 另外我们还要注意离 另外我们还要注意 marginmargin 能够指定负值 而能够指定负值 而 paddingpadding 却不能 如果却不能 如果 paddingpadding 指定负值 那指定负值 那 么将做无效值处理 么将做无效值处理 3 3 边距碰撞边距碰撞 说道边距碰撞 以前真是不知道还有这么一个名词 今天看了一片文章感觉颇深 20 说道 CSS 二加二不一定等于四 当元素的下边距碰到了另一个元素的上边距时 就可能会遇到 一些怪异的算术 浏览器不是把两个边距加到一起 而是应用两个边距中较大的那一个 假设把 一个无序列表的下边距设为 30px 紧接着列表的一个段落的上边距是 20px 浏览器不是把这两 个值相加 在列表和段落之间得到 50px 的空间 而是使用最大的那个边距 代码 边距碰撞 段落文字 效果图 给段落文字设置居上 15px 未给段落文字设置居上 15px 对比两个效果图 发现没有发生任何的变化 总结 当两个垂直方向的边距碰在一起时 小的边距无效 谁的边距大与谁为准 总结 当两个垂直方向的边距碰在一起时 小的边距无效 谁的边距大与谁为准 解决办法 书上有一种解决办法 见 CSS 实战手册 p137 个人认为这种方法不是全能的 应分情况而定 假如两段文字都有背景的话 是不太合适的 因为 padding 本身是让元素自身填 充 如果换成 padding 的话 背景的高度肯定也会加高 我认为直接在标题本身居下的 20px 像 素的基础上 再加上 15px 这样感觉好些 每当垂直方向的边距相接处时 当一个元素处在另一个元素里面时 边距也会重叠 每当垂直方向的边距相接处时 当一个元素处在另一个元素里面时 边距也会重叠 当一个块状元素处于另一个块状元素中时 如果两个元素都指定了边距 那么两个元素的边距会当一个块状元素处于另一个块状元素中时 如果两个元素都指定了边距 那么两个元素的边距会 重叠 变成了一个边距 重叠 变成了一个边距 想要的效果 21 实现问题 HTML 代码 hello CSS div margin 20px 0 background eee p margin 30px 0 我们的本意是想再 div 内部为 p 和 div 的边界添加一段空隙 可是无论我们将 p 的 margin 值设 为多少都无法达到先要的效果 这是因为 2 个边距之间没有任何分隔 2 者的填充或边框而产生了重 叠 解决问题 将 margin 换为 padding p padding 30px 0 为 div 添加边框 div margin 20px 0 background eee border solid 1px eee 22 第 2 中方法额外的添加了 2px 的高度 在使用时应该注意 关于边距折叠有一篇文章说的很好 你可以阅读 4 4 OverflowOverflow 属性使任何延伸到浮动下方的背景和边框消失属性使任何延伸到浮动下方的背景和边框消失 代码 代码 网站说明网站说明 网站管理 效果图 效果图 FF FF IE6 IE6 IE8 IE8 23 IE7 IE7 我们发现在浮动下方跑动的背景 在 FF 和 IE8 中会跑到浮动下方 解决这种问题的办法就是要给 在浮动下方跑动的背景或边框的样式添加一项规则 Overflow hidden 书上还有另一种情况说在 IE6 中背景也会延伸到浮动的 div 下面 百思不得其解 我们通过上图可 以看到 IE6 中并没有出现这种情况 那么到底怎么回事呢 查了一下资料 发现唯一不同的地方就 是有背景层的那个 div 我设置了一个高度 假如不设置高度的时候就会发现那个问题 而在 IE6 中 对 Overflow hidden 这个是忽略的 因此介绍了另外一种方法 html div zoom 1 5 5 CssCss 使用背景图片使用背景图片 24 说明 顶部和底部为图片 中间使用的是背景颜色 说明 顶部和底部为图片 中间使用的是背景颜色 以前首先看到这幅效果图 我的布局方式肯定就是分为上中下三个 div 外面在包裹一个大的 div 今天看到书上有另外一种布局方式 他首先也是用一个 div 作为容器 里面分为标题部分和内容部 分 它把底部放到父容器里作为了一个背景图片而且在下方显示 一开始感觉不太习惯 慢慢的发 现这种布局方式好处还是很多的 我想到的有如下几点 明显的表现在前台代码和 css 代码减少 不用考虑中间自适应高度 结构如下 Ideas for Better IndoorAgriculture Don t leave the hose running In a small apartment coffee grounds make better planting material than chicken manure Water proof your planters Kudzu is to be avoided Use electric not gas powered mowers for indoor sod Steer clear of plants with deep roots CssCss 代码 代码 sidebar width 220px float right margin 10px background CBF622 url images bg bottom gif center bottom no repeat padding bottom 75px sidebar h3 font size 1 4em margin 0 text align center text transform uppercase background url images top bg gif center top no repeat color FFF 25 padding 5px sidebar ul color 666 font size 1 2em margin 0 padding 10px 5px 0 5px border left 1px solid E73A10 border right 1px solid E73A10 sidebar li background url images flower bullet gif no repeat 0px 2px list style none padding left 18px margin bottom 6px 6 6 给链接加下划线给链接加下划线 这里给链接加下划线不是指简单的下划线 大家都知道传统的下划线是不能够更改颜色的 这样就 无法满足一些比较好看的特效 这个问题也是一直困扰我的一个问题 那么怎么解决这个问题呢 那就是使用底部边框 看下面的例子 CSSCSS 代码 代码 a text decoration none a hover text decoration none border bottom dashed 2px 9f3 HTMLHTML 代码 代码 举例说明 效果图 效果图 这是默认样式 这是鼠标移上时的样式 7 7 关于导航栏关于导航栏 大家到网站上去看 甚至书上介绍菜单的时候都离不开 ul 以前只是知道用这个模仿 那到底为什 么呢 本质上 导航栏只是一串链接而已 更确切的说 它实际上是网站不同部分的一个列表 HTML 本身的任务就是给内容提供有意义的结构 因此你应该永远使用接近内容本意的标签 使用 ul 创建导航栏无论是垂直导航栏还是横向导航栏都必须做两件事情 去除项目符号 这个大家都很清楚只需设置list style type none 消除 padding 和 margin 即将这两个属性都设置为 0 举例 CSSCSS代码 代码 26 ul mainNav margin 0 padding 0 list style none width 175px border bottom 1px dashed 999999 mainNav a text decoration none color 000000 font size 1 1em text transform uppercase border 1px dashed 999999 border bottom none display block padding 7px 5px 7px 30px background E7E7E7 url images link png no repeat left center mainNav a hover font weight bold background B2F511 url images go png no repeat 5px 50 a homeLink background E7E7E7 url images home png no repeat 5px 52 home mainNav a homelink feature mainNav a featureLink background FFFFFF url images bg here png no repeat 95 50 padding right 15px padding left 30px font weight bold home mainNav a homelink hover feature mainNav a featureLink hover color B2F511 HTMLHTML 代码 代码 Home Features Experts Quiz Projects Horoscopes 运行结果在 IE7 IE8 FF 浏览器上都正常 27 结果在 IE6 上会出现如下问题 解决办法 如果使用ul制作导航菜单发现在IE6中 两个菜单之间有很大的缝隙时 请使用 mainNav li display inline 来解决 在IE6上还有一个问题 那就是当鼠标移动到文字之外的菜单项 不能够加亮显示 解决办法 html mainNav a height 1px 这个样式声明本身没有任何意义 这是 IE 忽略的东西 但是它强制浏览器把按钮的背景色当成链 接的一部分 如果将纵向菜单改为横向菜单 最好将如果将纵向菜单改为横向菜单 最好将ulul 和和 lili 同时向左浮动 避免不必要的同时向左浮动 避免不必要的 bugbug 产生 产生 8 8 注意伪类的使用注意伪类的使用 hover 是给网页添加交互感的一种好办法 在 IE7 FF Safari Oper 浏览器上不止在 a 标签上可以 使用 其它标签也可以使用 但是在 IE6 上却只能够在 a 标签上使用 9 9 奇怪的高度奇怪的高度 高度跟宽度不一样 块元素没有定义宽度时是自动填满空间 而没有定义高度的元素是按需填充空 间 有多少内容就占据多少高度 但 IE6 和以下版本的 IE 内容并非纵向溢出 而是把元素称高 看如下效果图 28 IE6FFIE7 这里让我想到了 OMT2 0 首页 首页中间部分是显示网页编辑器中编辑的内容 为了达到美工给定 的特定效果 必须设置一个最小高度 然而 IE6 却不支持最小高度这个属性 那怎么办呢 以前看 到网上说直接设置一个高度就可以 那么我采用的也就是给 IE6 浏览器定义一个单独的高度样式 10 10 CSSCSS 的的 PixyPixy 方法与方法与 CSSCSS 的图像合并技术 的图像合并技术 CSSCSS SPRITESSPRITES 这两种技术都是首次接触 他们的共同点就是将原先分开的几张图片合并到一张图片上使用 这 样做的目的就是减少 http 的请求 这也是提高网站性能的一种比较好的方法 目前为止还没有找到解释 Pixy 的定义 根据 CSS 实战手册 的解释 我想可以举一个例子 例 如我们通常这样处理菜单 用两张图片来处理默认样式和鼠标滑过时的样式 而 CSS 的 Pixy 方法 就是将上面的两张图片合并为一张图片 然后通过 background position定义位置 示例 A A CSSCSS 部分 部分 a background url images TestMenu gif background repeat no repeat width 200px height 40px display block text decoration none line height 40px text align center color fff a hover 29 background position right top B B HTMLHTML 部分部分 Css图像合并技术 C C 效果图 效果图 鼠标默认 鼠标移上 D D 图片 图片 到达同样效果的本身又可以减少代码 也可以减少 http 的请求 对服务器的优化 11 11 CSSCSS 的的滑动门技术滑动门技术 什么是滑动门技术 究其本意 就是根据文本自适应大小 进行滑动 这是一篇非常优秀的滑动门技术讲解 http www w3cn org article translate 2005 112 html 示例 示例 A A CSSCSS 部分 部分 BASIC body font family Trebuchet MS font size 67 5 margin 20px NAVIGATION ul mainNav border bottom 2px solid 506BB1 margin 20px padding left 20px float left width 100 mainNav li list style none float left background FFF url images right side png no repeat right top margin right 5px 30 mainNav a display block padding 7px 15px 4px 15px background image url images left side png background repeat no repeat background position left top text align center text decoration none color FFF font weight bold font size 1 2em text transform uppercase mainNav a hover color F90 B B HTMLHTML 部分 部分 Home Features Experts Quiz Projects Horoscopes C C 效果图 效果图 D D 用到的图片 用到的图片 我发现这种滑动门技术被广泛的应用 无论是网上的解决方案或是教科书都是这种形式 因此我们 首要的目的是学会使用 其实通过观察 这些 CSS 代码和 HTMl 代码 我们基本上不用改动 只需 更改图片 文字的大小和颜色就可以 CSSCSS 布局布局 我们在使用 div css 进行布局时 会遇到一些兼容性的问题 好在这些问题都是很容易解决的 只 需你知道就可以 下面这些 bug 你不一定在项目中遇到过 为了以防万一顺便整理一下 下面介 绍一下常见的 bug 31 15 15 了解了解 LAYOUTLAYOUT Layout 这个问题是一个比较复杂的问题 请阅读 LayOut 详解 而在 IE6 中遇到的一些兼 容性问题基本上都与这个 layout 有关 后面我们会介绍一下这些问