表格布局与过滤器CSS.ppt

* * * * CSS内容布局—IE BUG 错误的扩展解决方式 .box-model-01{width:300px; height:auto !important; height:100px; min-height:100px;/*IE6不支持*/ border:1px solid black; padding:10px; background:#cf0; line-height:180%;} CSS内容布局—IE BUG 相对容器中的绝对定位 .box-model-01{ position:relative; border:1px solid black; background:#cf0; padding:10px;} .box-model-02{ width:100px; height:100px; border:1px solid black; background:#fc0; padding:10px; position:absolute; right:10px; bottom:10px;} 当类box-model-01块相对定位后，成为包含块，但没有指定高度，类box-model-02块绝对定位时IE6出现错误。 CSS内容布局—IE BUG 相对容器中的绝对定位解决方式 * html .box-model-01{height:1%;} * html .box-model-01{height:200px;} CSS内容布局—IE BUG 在 IE 浏览器中，只有当绝对定位的包含元素拥有层特征时才能够准确解析。 #Layer1 {/* 定义层的基本样式 */ position:absolute? /*绝对定位，必要特征，或relative或fixed */ width:200px? /* 宽度，必要特征 */ height:115px? /* 高度，必要特征 */ zindex:1? /* 叠放顺序，次要特征 */ left: 143px? /* x轴坐标，次要特征 */ top: 139px? /* y轴坐标，次要特征 */} 总结 表格布局 CSS过滤器 IE BUG * * * * * * * * * * * * * * * * * * * * * * * * * * * 渤海大学信息科学与工程学院 第8课 表格布局与过滤器 CSS 2.1(5) 知识回顾 实验7要点说明。 当绝对定位块较多时，注意重叠位置。 伪类hover指向显示时，被包含块一定在包含块内。 用类选择器时，一般设定样式是相同的。 预习检查 表格的结构和构成 CSS表格布局 掌握CSS表格布局 掌握常用CSS过滤器 掌握IE BUG修复 本节目标 CSS内容布局—CSS表格 CSS Table 属性 CSS 表格属性允许设置表格的布局。 属性 描述 border-collapse 设置是否把表格边框合并为单一的边框。 border-spacing 设置分隔单元格边框的距离。（仅用于 separated borders 模型） caption-side 设置表格标题的位置。 empty-cells 设置是否显示表格中的空单元格。（仅用于 separated borders 模型） table-layout 设置显示单元、行和列的算法。 CSS内容布局—CSS表格 CSS border-collapse 属性 设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 可能的值 为表格设置合并边框模型： table{border-collapse:collapse;} 值 描述 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 CSS内容布局—CSS表格 CSS border-spacing 属性 border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。 该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。 可能的值 值 描述 length length 规定相邻单元边框之间的距离。不允许使用负值。 如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。 CSS内容布局—CSS表格 边框控制 用CSS控制表格的最大便利是能够灵活控制表格的边框。 table tr tdnbsp;/tdtdnbsp;/tdtdnbsp;/td /tr tr td