[计算机软件及应用]精通Javascript+JQuery--第4章.ppt

精通JavaScript+jQuery 第4章：CSS进阶 div标记与span标记 盒子模型 元素的定位 CSS排版观念 排版实例 JavaScript与CSS 块元素与内联元素 块元素特点 元素总是从一个新行开始显示 高度，行高以及顶、底边距都可控制 宽度缺省是它所在容器的100%，除非设定一个宽度 通常作为其它元素的容器，它可以容纳内联元素和其它块元素 内联元素（也称行内元素、内嵌元素）特点 和其它元素都在一行上 高度，行高以及顶、底边距不可改变 宽度就是它所容纳的文字或图片的宽度，不可改变 一般作为基本元素，只能容纳文本或者其它内联元素  块元素：h1、p、ol、ul、table、div、… 内联元素：a、img、input、textarea、select、span、… 绝对定位与相对定位 绝对定位(position:absolute) 绝对定位使元素的位置与文档流无关，因此不占据空间 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块 绝对定位与相对定位 相对定位(position:relative) Relative position that is offset from the initial normal position in the flow 偏移文本流中最初的位置。最初位置也就是当position取值为static时的位置，或者说相对定位是相对于它在正常情况下的默认位置的偏移 Visibility属性 hidden 控制元素的不显示，但是元素在文档流中的位置仍然占据着 visible 默认值为visible，显示出元素 Display属性 block 控制元素显示为块元素 none 控制元素不显示，并且从文本流中去除 float(浮动)属性 float : left / right / none / inherit float 属性定义元素在哪个方向浮动 使指定元素脱离普通的文档流而产生的特别的布局特性 float必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了float那么这个元素将被指定为块级元素 inherit 属性值意为继承父单元的设置 clear(清理浮动)属性 clear : left / right / both /none 清理浮动，采用clear申明用来确保浮动部分不会占据和影响其显示空间，表示框的哪些边不应该挨着浮动框 z-index属性 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 元素可拥有负的 z-index 属性值。 z-index 仅能在定位元素上奏效(position属性为absolute或者relative) 什么是“模型”——本质特征的抽象 布局的“模型” 什么是“模型”——本质特征的抽象 布局的“模型” div{ border-width:6px; border-color:#000000; margin:20px; padding:5px; background-color:#FFFFCC; } 属性值的简写形式  方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：  如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；  如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；  如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。 属性值的简写形式  border-color: red green border-width:1px 2px 3px; border-style: dotted dashed solid double; 内边距（padding） #outerBox{ width: 128px; height: 128px; padding: 20px 20px 10px; /*上 左右 下*/ padding-left: 10px; border: 10px gray dashed; } 外边距（margin） #outerBox{ width: 128px; height: 128px; padding: 20px 20px 10px; /*上 左右 下*/ padding-left: 10px; border: 10px gray dashed; } body{