html5--6-33 CSS定位是什么
一、总结
一句话总结：
1、常规文档流是一套体系，浮动是另外一套体系。
2、标签清除浮动之后会跑到常规文档流它本来的地方。
3、浮动是否占据常规文档流：应该不占。
4、相对定位占据文档流，绝对定位不占据文档流。
5、CSS 有三种基本的定位机制：普通流、浮动和绝对定位（两种：absolute和fix）
1、css中vertical-align属性可用于表格么？
解答：可以。
2、css中垂直居中怎么设置？
解答：在style中，vertical-align：center;。
3、css中定位是什么意思？
解答：元素改变其在页面的位置，CSS 定位属性允许对元素进行定位改变其在页面的位置。
4、css中有哪三种基本的定位机制？
解答：普通流、浮动和绝对定位。。
5、css中的普通流是怎么回事？
解答：普通流中的元素的位置由元素在HTML中的位置决定。
6、css中用什么关键词表示定位？
解答：position。
7、css中position有哪四个属性？
解答：static 默认值。没有定位。、absolute绝对定位，相对于(static 定位以外的第一个) 父元素进行定位。 、relative 相对定位，相对于其正常位置进行定位。、fixed绝对定位，相对于浏览器窗口进行定位。 。
8、css中绝对定位有哪两种？
解答：absolute绝对定位，相对于(static 定位以外的第一个) 父元素进行定位。fixed绝对定位，相对于浏览器窗口进行定位。。
9、css中绝对定位和相对定位的区别是什么？
解答：绝对定位对象可以层叠,相对定位的对象不可以、相对定位对象会占据它原来位置,绝对定位不会。
10、css中top、right、bottom、left是什么意思？
解答：距离相应边界的距离。
11、css中top和margin-top的区别是什么？
解答：top是position定位中的属性。
12、css中clip 是什么意思？
解答：裁剪，设置元素的形状。元素被剪入这个形状之中，然后显示出来。 clip: rect(top, right, bottom, left);目前裁切形状只有矩形可以使用。
13、css中clip属性使用注意事项是什么？
解答：clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。
14、css中元素垂直居中怎么设置？
解答：用vertical-align属性，vertical-align：center;。
15、css中设置元素的堆叠顺序怎么弄？
解答：用z-index属性，z-index：100。
16、css中float浮动属性有哪三种？
解答：left 元素向左浮动、ight 元素向右浮动、none 默认值。元素不浮动。
17、css中如何清除浮动？
解答：用clear属性。clear：both;。
18、css中z-index属性怎么才能生效？
解答：当你定义的CSS中有position属性值为absolute、relative或fixed，用z-index此取值方可生效，此属性参数值越大，则被层叠在最上面。
了解CSS定位的概念：
- CSS 定位属性允许对元素进行定位改变其在页面的位置。
- CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
- 普通流中的元素的位置由元素在HTML中的位置决定。
二、元素定位的属性：
- position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
- static 默认值。没有定位。
- absolute 绝对定位，相对于(static 定位以外的第一个) 父元素进行定位。通过绝对定位，元素可以放置到页面上的任何位置。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。(注：static 定位以外的第一个父元素：相对与最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，则依据 body 对象左上角作为参考进行定位。)
- relative 相对定位，相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- fixed 绝对定位，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- 绝对定位和相对定位的区别
- 绝对定位对象可以层叠,相对定位的对象不可以
- 相对定位对象会占据它原来位置,绝对定位不会
- top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。注：如果 "position" 属性的值为 "static"，那么设置 "top" 属性不会产生任何效果。
- right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。注：如果 "position" 属性的值为 "static"，那么设置 "right" 属性不会产生任何效果。
- bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。注：如果 "position" 属性的值为 "static"，那么设置 "bottom" 属性不会产生任何效果。
- left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。注：如果 "position" 属性的值为 "static"，那么设置 "left" 属性不会产生任何效果。
- clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
- 语法 clip: rect(top, right, bottom, left);目前裁切形状只有矩形可以使用
- rect()需要设置四个值：top, right, bottom和left。他们之间需要用逗号隔开，而且rect()属性值和margin、padding一样的标准，遵循顺时针旋转的规则。
- 注意：clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。
- auto：这是一个默认值，clip设置auto值和没有进行剪切是一样的效果;
- vertical-align 设置元素的垂直对齐方式。
- baseline 默认。元素放置在父元素的基线上。
- top 把元素的顶端与行中最高元素的顶端对齐
- middle 把此元素放置在父元素的中部。
- bottom 把元素的底端与行中最低的元素的底端对齐。
- 数值（像素）/百分比
- text-top 把元素的顶端与父元素字体的顶端对齐
- text-bottom 把元素的底端与父元素字体的底端对齐。
- sub 垂直对齐文本的下标。
- super 垂直对齐文本的上标
- z-index 设置元素的堆叠顺序。
- overflow 设置当元素的内容溢出其区域时发生的事情。
- float 浮动：定义元素在哪个方向浮动。
- left 元素向左浮动。
- right 元素向右浮动。
- none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
- clear 浮动的清除：常用属性值 both/left/right/none
三、测试题-简答题
1、css中vertical-align属性可用于表格么？
解答：可以。
2、css中垂直居中怎么设置？
解答：在style中，vertical-align：center;。
3、css中定位是什么意思？
解答：元素改变其在页面的位置，CSS 定位属性允许对元素进行定位改变其在页面的位置。
4、css中有哪三种基本的定位机制？
解答：普通流、浮动和绝对定位。。
5、css中的普通流是怎么回事？
解答：普通流中的元素的位置由元素在HTML中的位置决定。
6、css中用什么关键词表示定位？
解答：position。
7、css中position有哪四个属性？
解答：static 默认值。没有定位。、absolute绝对定位，相对于(static 定位以外的第一个) 父元素进行定位。 、relative 相对定位，相对于其正常位置进行定位。、fixed绝对定位，相对于浏览器窗口进行定位。 。
8、css中绝对定位有哪两种？
解答：absolute绝对定位，相对于(static 定位以外的第一个) 父元素进行定位。fixed绝对定位，相对于浏览器窗口进行定位。。
9、css中绝对定位和相对定位的区别是什么？
解答：绝对定位对象可以层叠,相对定位的对象不可以、相对定位对象会占据它原来位置,绝对定位不会。
10、css中top、right、bottom、left是什么意思？
解答：距离相应边界的距离。
11、css中top和margin-top的区别是什么？
解答：top是position定位中的属性。
12、css中clip 是什么意思？
解答：裁剪，设置元素的形状。元素被剪入这个形状之中，然后显示出来。 clip: rect(top, right, bottom, left);目前裁切形状只有矩形可以使用。
13、css中clip属性使用注意事项是什么？
解答：clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。
14、css中元素垂直居中怎么设置？
解答：用vertical-align属性，vertical-align：center;。
15、css中设置元素的堆叠顺序怎么弄？
解答：用z-index属性，z-index：100。
16、css中float浮动属性有哪三种？
解答：left 元素向左浮动、ight 元素向右浮动、none 默认值。元素不浮动。
17、css中如何清除浮动？
解答：用clear属性。clear：both;。
18、css中z-index属性怎么才能生效？
解答：当你定义的CSS中有position属性值为absolute、relative或fixed，用z-index此取值方可生效，此属性参数值越大，则被层叠在最上面。