信狮学员分享:CSS定位

时间:2016-05-02 06:49:30    来源:信狮教育学生会学习部谢林村    已有人浏览
分享到:
导读:HTML默认文档以流模式定位,即内容元素按照先后顺序依次上下定位;HTML标签元素总体分为块状元素、内联元素、内联块状元素,可通过该标签对应的DOM节点的display属性进行查看默认值,display值


一.概述

1.默认文档流定位方式

(1).HTML默认文档以流模式定位,即内容元素按照先后顺序依次上下定位;

(2).HTML标签元素总体分为块状元素、内联元素、内联块状元素,可通过该标签对应的DOM节点的display属性进行查看默认值,display值的不同决定了他们各自在默认文档流中的定位方式的不同;

以下为position的可能值。

none:隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间inline:指定对象为内联元素。

block:指定对象为块元素。

list-item:指定对象为列表项目。

inline-block:指定对象为内联块元素。(CSS2)

table:指定对象作为块元素级的表格。类同于html标签(CSS2)

inline-table:指定对象作为内联元素级的表格。类同于html标签(CSS2)

table-caption:指定对象作为表格标题。类同于html标签(CSS2)

table-cell:指定对象作为表格单元格。类同于html标签(CSS2)

table-row:指定对象作为表格行。类同于html标签

(CSS2)

table-row-group:指定对象作为表格行组。类同于html标签

(CSS2)

table-column:指定对象作为表格列。类同于html标签(CSS2)

table-column-group:指定对象作为表格列组显示。类同于html标签(CSS2)

table-header-group:指定对象作为表格标题组。类同于html标签(CSS2)

table-footer-group:指定对象作为表格脚注组。类同于html标签(CSS2)

run-in:根据上下文决定对象是内联对象还是块级对象。(CSS3)

box:将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)

inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)

flexbox:将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)

inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)

flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)

inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)

(3).块状元素单独占据一行,可设定他的宽高值。内联元素与紧挨着的内联元素(如果存在)共同占据一行,直到元素内容到达视口的最末端则换行继续以该种方式定位,内联元素不可以设置宽高。内联块状元素定位方式与内联元素相同,但不同的是有块状元素的特性即可以设定他的宽高。

2.定位方式

(1).CSS 有三种基本的定位机制:普通流、浮动和position定位。

总结来看:CSS 有三种基本的定位机制:普通流、浮动和绝对定位。除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

二.四种position定位方式

1.static 静态定位

static方式即默认的方式,按照流式布局定位。

2.relative 相对定位

在理解默认流式布局定位的基础上,来看这种定位方式。

(1).“相对”指的是相对于自身本来在默认流中的位置,将其position属性设置为relative后,再通过top,bottom,left,right属性对其进行相对于原来位置的偏移;

(2).该元素偏移后,他本来在默认文档流中占据的空间依然存在,其紧挨其后的元素的定位依据他本来位置进行定位。

(3).该元素偏移后,可能存在覆盖其他元素的情况,所以可以通过z-index属性设置显示层级有限级别。

3.absolute 绝对定位

通过与relative相对定位进行比较的基础上,来看这种定位方式。

(1).“绝对”指的是绝对定位的元素已经脱离了文档流,普通流中其它元素的布局就像绝对定位的元素不存在一样;

(2).绝对定位的元素还是要相对于某个对象进行定位,而这个对象可以简单归纳为“绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块”,

(3).因为绝对定位的框与文档流无关,所以它们也可以覆盖页面上的其它元素。

4.fixed 固定定位

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。即无论页面左右上线如何滚动,该种定位方式的元素都会根据你当前的视窗本身进行定位,大多应用于像类似侧栏的客服链接、底部的回到顶部按钮等需要在页面上一直显示并且其位置不会变化的元素。

三.float 浮动定位

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。

注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

  • 高中毕业打工没前景,选择北大青鸟信狮教育让她重新出发

    高中毕业打工没出路!怎么办?北大青鸟信狮教育学技术,找好工作。

  • 石念孝:北大青鸟深圳信狮圆我高薪白领梦

    姓名:石念孝年龄:26岁学历:中专就职企业:深圳易思博软件技术有限公司就职岗位:Java软件工程师就业薪资:5700元公司简介:深圳市易思博

  • 易*斌:有梦想,敢拼搏,成功永远不会迟到

      姓名:易*斌  学历:中专  年龄:32岁(就读时24岁)  毕业时间:2010年9月  入职企业:深圳市*狐科技有限公司  职务:运维主

  • 史*锐:高中落榜不放弃成功逆袭

    姓名:史*锐就职企业:深圳*诺华科技就职岗位:软件工程师就业薪资:6000元高中毕业遗憾落榜,我在深圳这边找了份销售的工作,但是做了一段

  • 陈*同学:从军人到工程师的蜕变

    姓名:陈*同学班级:3T127学历:本科年龄:27就业企业:太*计算机股份有限公司就业岗位:JAVA软件开发工程师就业薪资:6000我来自江西上饶

热点专题 更多 >
热门标签 更多 >