position和display的取值和用法

Posted start-from-today

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了position和display的取值和用法相关的知识,希望对你有一定的参考价值。

position设置对象的定位方式,可以让布局层容易位置绝对定位,控制盒子对象更加准确

position的值和作用:

position的所有值:static(默认)、relative、absolute、fixed、inherit、(initial、unset、sticky) 

1.static:始终处于文档流给予的位置,可以快速取消定位,让top,right,bottom,left的值失效

2.relative:绝对定位,定位原点relative是相对于它在正常流中的默认位置偏移,它原本占据的空间任然保留

3.absolute:脱离了正常文档流,不占据空间位置,不会将父类撑开。其父类的该属性值要注意,而且overflow:hidden也不能乱设置,因为不属于正常文档流,不会占据父类的高度,也就不会有滚动条

4.fixed: 旧版本IE不支持,定位原点相对于浏览器窗口,而且不能变。常用于header,footer,或者一些固定的悬浮div,随滚动条滚动又稳定又流畅,比JS好多了

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

6.(①initial 关键字用于设置 CSS 属性为它的默认值,可作用于任何 CSS 样式;②unset 关键字我们可以简单理解为不设置。其实,它是关键字 initial 和 inherit 的组合,如果某属性是默认继承属性,该值等同于 inherit,否则等同于initial;③sticky元素效果完全受制于父级元素们,它是关键字relativeposition:fixed的结合体,当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed)

 

display属性规定元素应该生成的框的类型。文档内任何元素都是框,块框或行内框

display的值和作用:

display属性取值:none、inline、inline-block、block、flex、inherit

1.none:hidden可以隐藏div,不占据文档空间

2.visiability:hidden可以隐藏div,占据文档控件

3.display:inline和block,又叫行内元素和块级元素。表现出来的区别就是block独占一行,在浏览器中通常垂直布局,可以用margin来控制块级元素之间的间距;而inline以水平方式布局,垂直方向的margin和padding都是无效的,大小跟内容一样,且无法设置宽高。inline就像塑料袋,内容怎么样,就长得怎么样;block就像盒子,有固定的宽和高。

4.inline-block就介于两者之间

5.flex:弹性盒布局模型,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效

以上是关于position和display的取值和用法的主要内容,如果未能解决你的问题,请参考以下文章

C++中erase的用法

display用法:

面试题汇总

浮动清楚浮动及position的用法

display和position的值与用途

CSS / CSS3