1、第三章 表现层的CSS (续),1. 盒子思想,我们介绍了CSS的基本概念盒子模型。根据盒子模型，文档中的每一个元素都产生一个盒子，很多属性，比如：width,height,padding,和margin属性都可以应用到这个盒子。,1.1 元素盒子,文档中的每一个元素，都是块级别的和内嵌的，这些元素形成矩形元素盒子。,填充,内容区域,空白边,外边缘,边框,内边缘,width,height,空白边,内边缘,空白边,内边缘,内容区域元素盒子的核心是内容本身。 内边缘内容区域的边缘属于元素盒子的内边缘 填充处于内容区域和可选边框之间的区域 边框环绕元素和元素填充的线,空白边添加到边框之外的可选空间，
2、空白边总是透明的，允许父元素的背景穿透它并显示。 外边缘空白边的外边缘构成了元素盒子的外边缘。这是元素在网页中占的总面积，它的宽度是内容的宽度，以及应用到元素的填充，边框，空白边的宽度的总和。,1.2 设置内容区域,使用width和height属性指定元素内容区域的宽和高。 width|height 属性值：长度计量值|百分比值|auto|inherit 默认值：auto 使用对象：块级别元素和可替换的内嵌元素 是否继承：否,处理溢出,overflow 属性值：visible|hidden|scroll|auto|inherit 默认值：visible 使用对象：块级别元素和可替换的内嵌元素
3、是否继承：否,1.3 填充,填充是内容区域和边框之间的空间 Padding-top,padding-right,padding-bottom,padding-left,padding 属性值：长度计量值|百分比值|auto|inherit 默认值：auto 使用对象：所有元素 是否继承：否,1.4 边框,边框是环绕内容区域和它的填充的简单的一条线。 边框样式 边框宽度 边框颜色 联合使用style, width, color,1.4.1 边框样式,border-style, border-top-style, border-right-style,border-bottom-style, bo
4、rder-left-style 属性值：none|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit 默认值：none 使用对象：所有元素 是否继承：否,1.4.2 边框厚度,border-width, border-top-width, border-right-width,border-bottom-width, border-left-width 属性值：长度单元|thin|medium|thick|inherit 默认值：medium 使用对象：所有元素 是否继承：否,1.4.3 边框颜色,border-color,
5、 border-top-color, border-right-color,border-bottom-color, border-left-color 属性值：颜色名或RGB|transparent|inherit 默认值：元素color的属性值 使用对象：所有元素 是否继承：否,1.4.4 联合使用style,width,color,border,border-top, border-right,border-bottom, border-left 属性值：border-style|border-width|border-color|inherit 默认值：每个属性的默认值 使用对象：所有
6、元素 是否继承：否,1.5 空白边,空白边是添加在边框外面的空间，它保证了元素间互不冲撞或不冲撞浏览器窗口的边线。 margin, margin-top, margin-right,margin-bottom, margin-left 属性值：长度计量值|百分比值|auto|inherit 默认值：auto 使用对象：所有元素 是否继承：否,1.5.1 空白边行为,重叠空白边 内嵌元素的空白边 负空白边,重叠空白边,空白边行为影响最大的是上下空白边与邻近元素的重叠。例：有两个段落，如果上面的元素有一个4em的下空白边，而下面的元素的上空白边为2em，那么元素间的空白边为( ).,应用最大的指定
7、值，而不是相加,4em,内嵌元素的空白边,应用上下空白边到内嵌文本元素，但是它不会在元素上下添加垂直空间，行高也不会改变。然而，当应用左右margin到内嵌文本元素时，在文本流中空白空间会在文本前后清楚出现，即使元素分布在很多行。,负空白边,可以给margin属性指定负数值。当应用负空白边时，内容、填充和边框将向相反的的方向移动。,2. 浮动与定位,浮动一个元素是指左右移动移动元素，并允许接着的文本环绕它。定位是指以像素精确指定元素在网页上的位置。,2.1 普通流,在CSS布局模型中，文本元素依源代码中的顺序从上到下排列，然后从左到右。块元素一个累一个，填满浏览器窗口或其他窗口元素的所有可用宽
8、度。内嵌元素和文本字符一行接一行的填满块元素。,当窗口或窗口元素重置大小的时候，块元素随着新宽度增大或缩小，而内嵌内容重新流动来适应宽度。,Abcdefghijklmnopqrstuv ,Abcdefghijklmnopqrstuv ,2.2 浮动,浮动属性尽可能远地向左或向右移动元素，允许后面的内容环绕它。它是现代基于CSS网页设计的主要工具之一，用于创建多列布局、列表中的导航工具条和无表格的类表格排列。 float 属性值：left|right|none|inherit 默认值：none 使用对象：所有元素 是否继承：否,2.2.1 浮动内嵌文本元素,2.2.2 浮动块元素,2.2.3 浮
9、动多个元素,2.2.4 清除浮动元素,取消文本环绕，恢复平常布局，可以通过清除你想从浮动元素下面开始排列的元素来完成。应用clear属性到一个元素来防止元素紧接这浮动元素出现，并强制它从下一个可用的浮动元素下面的空间开始。 Clear 属性值：left|right|both|none|inherit 默认值：none 使用对象：块级元素 是否继承：否,2.3 定位,CSS提供许多方法个来定位网页中的元素。不幸的是，并不是所有的定位方法都得到良好的支持，在不兼容和有bug的浏览器中很难实现你所追求的结果。,2.3.1 定位的类型,position 属性值：static|relative|abso
10、lute|fixed|inherit 默认值：static 使用对象：块级元素 是否继承：否,Static: 普通的定位方案，元素将如同在普通文档流中一样定位。 relative: 相对定位将盒子相对于它在流中的原始位置移动。它将保留元素在普通流中占据的空间。 Absolute:绝对定位的元素从文档流中完整的移除，并且相对于容器元素定位，它所占据的空间将被关闭。 Fixed: 固定定位的特性是元素将呆在窗口的一个位置，即使在文档滚动的时候。,position属性,确定完定位的方法，就要指定四个偏移属性 top, right,bottom,left 属性值：长度计量值|百分比值|auto 默认值
11、：auto 使用对象：可定位元素（元素的position属性值为relative,absolute和fixed） 是否继承：否,这些值提供了各个元素与相应边距离的偏移属性。 top属性值定义了浏览器或其他容器元素的上边缘到元素上边缘的偏移距离，它导致元素盒子以这个值向下移动。 bottom和top相反 left属性值将向右移动定位元素指定值的距离 right和left相反,2.3.2 相对定位,相对定位是相对于元素在流中的原始位置移动的，它所占据的空间将被保留，并继承影响周围内容的布局。,2.3.3 绝对定位,曾经被em素占据的空间现在关闭了，在新位置上，元素与周围内容重叠。,偏移值把em元素
12、定位在浏览器窗口左上角下方30像素，右方60px.,在绝对定位中实际发生的是元素相对于最近的容器块定位。,容器块,CSS2.1介绍声明：元素盒子的位置和尺寸有时相对于某个称为元素的容器块的矩形计算。判断元素容器块的规则： 如果定位元素没有包含在另一个定位元素中，那么它将相对于初始容器块确定位置 如果元素有一个祖先（比如包含在一个元素中），祖先position的属性设置为relative, absolute或fixed，元素将相对于元素的边定位。,指定position属性,像素计量值,通过给四个方向设置偏移值， 间接设置div b元素的尺寸,div a,div b,堆积顺序,z-index 属性值：数值|auto 默认值：auto 使用对象：可定位元素 是否继承：否,如果你想保证定位元素一直在顶层， 可以设置一个很高的z-index值,2.3.4 固定定位,在大部分情况下，固定定位与绝对定位工作方式相同，重要的区别在于固定元素的偏移值总是相对于浏览器窗口的，这意味着，即使网页的其他部分滚动，定位元素还保持固定。,不幸的是，固定定位不被IE6及早期版本支持,
