html5 css是什么意思,html5--6-33 CSS定位是什么

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此取值方可生效，此属性参数值越大，则被层叠在最上面。