(2019)[前端]面试题[10]:CSS display和position的属性值有哪些?

无道 2019-10-13 0 条评论 前端相关 阅读509 手机阅读

问题

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

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

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

解答

编辑器提示

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

display

截图-1570974146

position

截图-1570974183

我们来说

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属性的值,所以这个属性也是有继承性的。

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
修改: 2019-10-13 21:56
这篇文章还没有评论呢~
点击刷新/生成验证码