html中display有哪些属性值,(2019)[前端]面试题[10]：CSS display和position的属性值有哪些？...

问题

CSS 的display和position的属性值有哪些？

Hello，欢迎来到我的博客，每天一道面试题，我们共同进步。

题外话：新网站( https://www.lzpan.com )懒盘，百度云、蓝奏云资源搜索，欢迎访问。

解答

编辑器提示

我们就先不说查阅文档之类的，来看看vscode的提示：

display

position

我们来说

display

none

inline

inline-block

block

table相关属性值table

table-caption

table-cell

table-column

table-column-group

table-footer-group

table-header-group

table-row

inherit

解答：

none就是隐藏，不会占用文档流位置(其他元素会占用他的位置)

inline行内元素

inline-block行内块元素，也即有块元素的一些特性，可以设置宽高度边距等等。

block块元素，独占一行，可以设置宽高边距等等。

table相关，众所周知table域有一些特定的标签：table、tr、th、td、tfoot等等。那么可以用div等元素的来实现吗？可以，将这些元素的display设置成table-*就行。

inherit也即继承。

position

absolute

fixed

relative

initial

static (默认)

sticky

unsetstatic：始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让top，right，bottom，left的值失效。在用js切换的时候可以尝试这个方法。

除了static值，在其他三个值的设置下，z-index才会起作用。(确切地说z-index只在定位元素上有效)

relative和absolute都可以用于定位，区别在于前者的div还属于正常的文档流，后者已经是脱离了正常文档流，不占据空间位置，不会将父类撑开。

定位原点relative是相对于它在正常流中的默认位置偏移，它原本占据的空间任然保留；absolute相对于第一个position属性值不为static的父类。

所以设置了position：absolute，其父类的该属性值要注意，而且overflow：hidden也不能乱设置，因为不属于正常文档流，不会占据父类的高度，也就不会有滚动条。

页面上很多效果都是父相(relative)子绝(absolute)来实现的。

position：inherit。规定从父类继承position属性的值，所以这个属性也是有继承性的。