Web程序开发：第12章 定位及布局.pdfVIP

第12章 定位及布局 12.1 概述 12.2 相对定位 12.3 绝对定位 12.4 固定定位 12.5 浮动定位 12.6 布局 12.7 课堂作业 12.1 定位概述 一切皆为 “框”。 div、h1 或p 元素等常常被称为块级元素。这意味着这些元素显示为一块 内容，即“块框”。与之相反，span 等元素称为“行内元素”，这是因为 它们的内容显示在行中，即“行内框”。 可以使用display 属性改变生成的框的类型。这意味着，通过将display 属 性设置为block，可以让行内元素（比如a 元素）表现得像块级元素一 样。还可以通过把display 设置为none，让生成的元素根本没有框。这样 的话，该框及其所有内容就不再显示，不占用文档中的空间。 但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情 况发生在把一些文本添加到一个块级元素（比如div ）的开头。 12.1 定位概述-续1 display 属性规定元素应该生成的框的类型。 值 描述 none 此元素不会被显示 block 此元素将显示为块级元素，此元素前后会带有换行符 inline 默认。此元素会被显示为内联元素，元素前后没有换行符 inline-block 行内块元素 list-item 此元素会作为列表显示 table 此元素会作为块级表格来显示（类似table ），表格前后带有换行符 inline-table 此元素会作为内联表格来显示（类似table ），表格前后没有换行符 table-row-group 此元素会作为一个或多个行的分组来显示（类似tbody） table-header-group 此元素会作为一个或多个行的分组来显示（类似thead ） table-footer-group 此元素会作为一个或多个行的分组来显示（类似tfoot ） table-row 此元素会作为一个表格行显示（类似tr） table-column-group 此元素会作为一个或多个列的分组来显示（类似colgroup ） table-column 此元素会作为一个单元格列显示（类似col ） table-cell 此元素会作为一个表格单元格显示（类似td 和th） table-caption 此元素会作为一个表格标题显示（类似caption ） box css3 12.1 定位概述-续2 CSS 有三种基本的定位机制：普通流、相对定位、绝对定位、固定 定位和浮动定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中 的元素的位置由元素在(X)HTML 中的位置决定。 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直 外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整 它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由 一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包 含的所有行内框。不过，设置行高可以增加这个框的高度。 12.1 定位概述-续3 通过使用position 属性，我们可以选择4 种不同类型的定位，这会影响元 素框生成的方式。position 属性值的含义： static ：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分 ，行内元素则会创建一个或多个行框，置于其父元素中。 relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所 占的空间仍保留。 absolute：元素框从文档流完全删除，并相对于离其最近的包含块定位。 包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文 档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成 一个块级框，而不论原来它在正常流中生成何种类型的框。 fixed ：元素框的表现类似于将position 设为absolute，但其包含块是视窗