position 和 display 的取值和各自的意思和用法

position
    1、position属性取值:static(默认)、relative、absolute、fixed、inherit。
    2、postision:static;始终处于文档流给予的位置。看起来好像没有用,但它可以快速取消定位,让top,right,bottom,left的值失效。在切换的时候可以尝试这个方法。
    3、除了static值,在其他三个值的设置下,z-index才会起作用。(确切地说z-index只在定位元素上有效)
    4、position:relative和absolute都可以用于定位,区别在于前者的div还属于正常的文档流,后者已经是脱离了正常文档流,不占据空间位置,不会将父类撑开。定位原点relative是相对于它在正常流中的默认位置偏移,它原本占据的空间任然保留;absolute相对于第一个position属性值不为static的父类。所以设置了position:absolute,其父类的该属性值要注意,而且overflow:hidden也不能乱设置,因为不属于正常文档流,不会占据父类的高度,也就不会有滚动条。
    5、position:fixed 旧版本IE不支持,定位原点相对于浏览器窗口,而且不能变。常用于header,footer,或者一些固定的悬浮div,随滚动条滚动又稳定又流畅,比JS好多了。fixed可以有很多创造性的布局和作用,兼容性是问题。

    6、position:inherit规定从父类继承position属性的值。但是任何版本的IE都不支持该属性值。

  display
    1、display属性取值:none、inline、inline-block、block、flex、inherit。
    2、display属性规定元素应该生成的框的类型。文档内任何元素都是框,块框或行内框。
    3、display:none和visiability:hidden都可以隐藏div,区别有点像absolute和relative,前者不占据文档的空间,后者还是占据文档的位置。
    4、display:inline和block,又叫行内元素和块级元素。表现出来的区别就是block独占一行,在浏览器中通常垂直布局,可以用margin来控制块级元素之间的间距;而inline以水平方式布局,垂直方向的margin和padding都是无效的,大小跟内容一样,且无法设置宽高。inline就像塑料袋,内容怎么样,就长得怎么样;block就像盒子,有固定的宽和高。
    5、inline-block就介于两者之间。
    6、display: flex 意为"弹性盒布局模型",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。采用flex布局的元素,称为flex容器。它的所有子元素自动成为容器成员,称为flex项目(flex item)。

中文文档中的解释:

none:
隐藏对象。与 visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline:指定对象为内联元素。 block:指定对象为块元素。 list-item:指定对象为列表项目。 inline-block:指定对象为内联块元素。(CSS2) table:指定对象作为块元素级的表格。类同于html标签<table>(CSS2) inline-table:指定对象作为内联元素级的表格。类同于html标签<table>(CSS2) table-caption:指定对象作为表格标题。类同于html标签<caption>(CSS2) table-cell:指定对象作为表格单元格。类同于html标签<td>(CSS2) table-row:指定对象作为表格行。类同于html标签<tr>(CSS2) table-row-group:指定对象作为表格行组。类同于html标签<tbody>(CSS2) table-column:指定对象作为表格列。类同于html标签<col>(CSS2) table-column-group:指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2) table-header-group:指定对象作为表格标题组。类同于html标签<thead>(CSS2) table-footer-group:指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2) compact:分配对象为块对象或基于内容之上的内联对象(CSS3) run-in:分配对象为块对象或基于内容之上的内联对象(CSS3) ruby:将对象作为表格脚注组显示(CSS3) ruby-base:将对象作为表格脚注组显示(CSS3) ruby-text:将对象作为表格脚注组显示(CSS3) ruby-base-group:将对象作为表格脚注组显示(CSS3) ruby-text-group:将对象作为表格脚注组显示(CSS3) box:将对象作为弹性盒模型显示(CSS3) inline-box:将对象作为内联块级弹性盒模型显示(CSS3) 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值