JavaScript程序设计基础教程 第2版 普通高等教育“十一五”国家级规划教材 作者 阮文江 第3章 层叠样式表（CSS）技术1.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 3.6.4 框大小 一、替换元素与非替换元素 替换元素：是指其元素内容来自 HTML 标签的属性值。如 img 元素 非替换元素：是指其元素内容来自 HTML 标签自身或标签对之间的内容。如 p、h1、h2、hr 等 二、大小属性 自动计算大小 width、height max-width、min-width、max-height 和 min-height 中山大学计算机科学系 * * 3.6.4 框大小 三、内容区大小与元素框大小 内容区大小:是指元素内容区的宽度和高度，可以由属性 width 和 height 设置。 元素框大小 元素框宽度=width+左右内边距+左右边框+左右外边距 元素框高度= height +上下内边距+上下边框+上下外边距 例3.20 中山大学计算机科学系 * * 3.7 元素定位3.7.1 定位概念 一、文档流 每个可显示元素以元素框的形式，按照其 HTML 代码位置依次显示，从而构成一个文档流。即： 块级框从上至下依次排列 行内框在一行中水平布置 二、定位属性 position ：static、relative、absolute 、 fixed top、bottom、left、right和z-index 中山大学计算机科学系 * * 3.7.1 定位概念 三、包含块 包含块是显示文档流的矩形区域，最基本的包含块是 body 元素框和浏览窗口 自定义包含块：将一个元素的定位方式设置为非 static 方式 “一个元素的包含块”是指该元素最近的按非 static 方式定位的祖先元素（注：不一定是父元素）的元素框，或者是 body 元素框（或浏览窗口） 中山大学计算机科学系 * * 3.7.2 四种定位方式 静态定位（static）：默认，使元素框处于文档流的常规位置 相对定位（relative）：将元素框从常规位置偏移指定距离 绝对定位（absolute）：元素框从文档流完全删除，并相对于其包含块定位 固定定位（fixed）：与绝对定位类似，但其包含块是浏览窗口 中山大学计算机科学系 * * 3.7.2 四种定位方式 例3.21 第1步 static 定位 第2步 relative 定位 第3步 absolute 定位 第4步 fixed 定位 中山大学计算机科学系 * * 3.8 元素布局3.8.1 布局属性 float：浮动方向 clear：是否允许紧贴浮动元素 display: 是否及如何显示元素 visibility:是否可见 overflow : 溢出处理 clip: 裁剪 cursor: 鼠标指针类型 中山大学计算机科学系 * * 3.8.2 浮动与清除 浮动元素 定义：其 float 属性值为 left 或 right 效果：浮动元素将脱离常规文档流，但仍然处于其包含块内，向左或右移动，直到外边缘碰到第1个块级祖先元素（或包含块元素）的边框或另一个浮动元素的边框为止 清除浮动元素 方法：设置 clear 属性（left、right 或 both） 效果：阻止该元素向上移动到浮动元素旁边 用途： 设置文本环绕图像效果 创建多列布局 中山大学计算机科学系 * * 3.8.2 浮动与清除 例3.22 中山大学计算机科学系 * * 3.8.3 显示和隐藏 控制元素显示和隐藏的方法 显示元素 将 display 属性设置为 inline（或 block），从而将块级元素显示为行内元素（或相反） 隐藏元素 将 display 属性设置为 none，不占用任何显示空间 将 visibility 属性设置为 hidden，仍然保留原显示空间 例3.23 中山大学计算机科学系 * * 3.8.4 溢出与剪裁 溢出：是指元素内容区中的实际内容大小超出指定的元素内容区大小。 处理方法 使用 overflow 属性指定溢出内容的显示方式 使用 clip 属性剪裁元素的实际内容 例3.24 中山大学计算机科学系 * * 3.8.5 鼠标形状 cursor 属性：当鼠标移动到不同的元素对象时，鼠标将显示为指定的形状或图案。值为url、default、auto、crosshair、pointer、move、*-resize、text、wait、help等 例3.25 中山大学计算机科学系 * * 3.9 列表样式3.9.1 CSS 列表属性 作用：设置列表中列表项标记的显示格式 列表属性 list-style-type 标记类型，取值为none、disc、circle、square、decima