做前端开发也有很长一段时间了,但是分对于一些基础知识虽然平时会接触到,但却没有认真总结。本篇针对CSS的display属性做一下总结。

一、常见的display属性值

display用来设置一个元素如何展示,常见的值包含

  • block
  • inline-block
  • inline
  • table table-cell table-row
  • list-item
  • flex
  • grid
  • none

二、元素隐藏

display:none用来隐藏元素,使用visibility:hidden也可以隐藏元素;

区别:使用visibility:hidden 隐藏元素,但它原来占据的空间依然存在,而使用display:none隐藏的元素不再占用空间

三、block、inline、inline-block及常见HTML标签的display属性值

block:块级元素,默认宽度为100%,在页面中单独占一行,宽度和高度可以设置

常见的dispaly为block的元素:div section p h1-h6 ul dl ol form

inline:内联元素,默认不换行,宽度和高度不可设置,由自身内容撑起;垂直方向上的padding和margin无效。

常见的display为inline的元素:span label a img

inline-block:内联块级元素,与inline类似,默认不换行,多个inline-block的元素会排在同一行;但宽度和高度可以设置,垂直方向上的padding和margin也可以设置。

常见的display为inline-block的元素:input select button textarea

其他:table默认display:table,tr默认dispaly:table-row,td默认display:table-cell,li默认display:list-item