position和display的取值和用法

Posted 2022-10-12 start-from-today

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元素效果完全受制于父级元素们，它是关键字relative和position: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属性将失效