HTML5—(10)CSS定位、尺寸

1、CSS定位、尺寸CSS定位篇CSS 定位和浮动CSS 定位机制CSS position 属性CSS 定位和浮动CSS 定位 (Positioning) 属性允许你对元素进行定位。CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 display属性改变生成的框的类型 块框 div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。 行内框 span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 使用 display 属性改

2、变生成的框的类型。 display ：block，可以让行内元素（比如 元素）表现得像块级元素一样。 display ： none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。 即使没有把这些文本定义为段落，它也会被当作段落对待：这个框称为无名块框，因为它不与专门定义的元素相关联。 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。 设置行高可以增加这个框的高度 可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box）

3、，行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。CSS 定位机制 CSS 有三种基本的定位机制： 普通流 浮动 相对定位 绝对定位 普通流 除非专门指定，否则所有框都在普通流中定位。 普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 相对定位(relative) 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致

4、它覆盖其它框。示例 绝对定位(absolute) 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。示例CSS position 属性bottomleftrighttop 注：必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。请参阅 长度单位。 基本语法 bottom | left | right | top : auto | leng

5、th 语法取值 auto : 默认值。无特殊定位，根据HTML定位规则在文档流中分配 length : 由浮点数字和单位标识符组成的长度值 | 百分数。 bottom 检索或设置对象与其最近一个具有定位设置的父对象底边相关的位置。 left 检索或设置对象与其最近一个具有定位设置的父对象左边相关的位置。 right 检索或设置对象与其最近一个具有定位设置的父对象右边相关的位置。 top 检索或设置对象与其最近一个具有定位设置的父对象顶边相关的位置。知识补充 z-index 检索或设置对象的层叠顺序。 基本语法 z-index : auto | number 语法取值 auto : 默认值。遵从

6、其父对象的定位。 number : 无单位的整数值。可为负数。较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。总结 对于定位的主要问题是要记住每种定位的意义。 相对定位是“相对于”元素在文档中的初始位置。 绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。CSS尺寸篇 CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。height width height检索或设置对象的高度。 语法 height | max-height | min-height : auto(默认值) | length max-height 最大值 min-height最