(2019)[前端]面试题[10]：CSS display和position的属性值有哪些？
(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
- unset
static：始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让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属性的值，所以这个属性也是有继承性的。