CSS中的浮动和定位

标签：elar   类型   lin   机制   ati   大于   middle   概念   art   

css定位和浮动

1.css中一切元素皆为框。div、p、h1等为块框；span、strong等为行内框，（在文本中每一行会被自动默认为行框，行框和行内框是不一样的概念）。通过display可以改变框的类型，行内框通过display：block可以变为块框，块框通过display:inline-block可以变为行内框，display:inline可以变为内联元素，diplay:none可以变的没有框不显示不占文档空间（）。

2.css机制有3种：普通流、浮动和绝对定位。

3.css位置有5种：

static：静态。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relartive：相对定位。相对自己原有的位置进行定位，位置变化后，原框仍在文本流中占有空间。

absolute：绝对定位。相对以定位了（级级上寻）的父框进行定位，位置变化后，原框不在文本流中站有空间。

inherit：继承定位。继承父框的定位属性。任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

fixed:固定定位。相对于浏览器屏幕视窗进行定位。

4.

块内元素的溢出用overflow来控制：auto,scroll,hidden。

当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。clip 属性剪裁绝对定位元素。clip:rect(0px 50px 200px 0px)。

z-index 属性设置元素（定位元素上奏效）的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

clear 属性规定元素的哪一侧不允许其他浮动元素。

设置元素的垂直对齐方式。vertical-align 定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

值

描述

baseline

默认。元素放置在父元素的基线上。

sub

垂直对齐文本的下标。

super

垂直对齐文本的上标

top

把元素的顶端与行中最高元素的顶端对齐

text-top

把元素的顶端与父元素字体的顶端对齐

middle

把此元素放置在父元素的中部。

bottom

把元素的顶端与行中最低的元素的顶端对齐。

text-bottom

把元素的底端与父元素字体的底端对齐。

length

%

使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

inherit

规定应该从父元素继承 vertical-align 属性的值。

CSS中的浮动和定位

标签：elar   类型   lin   机制   ati   大于   middle   概念   art   

原文地址：http://www.cnblogs.com/yhdada/p/7748519.html