CSS属性 - display持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章CSS属性层叠中，我们学习了CSS属性继承、CSS属性层叠、css选择器的权重、HTML元素的类型等等相关知识点。今天，在这篇文章中，我们将学习CSS属性 - display、元素隐藏方法、CSS属性 - overflow等相关知识点。

CSS中有个display属性，能修改元素的显示类型，有4个常用值:

事实上display还有其他的值, 比如flex。

block元素的特点：独占父元素的一行；可以随意设置宽高；高度默认由内容决定

inline-block元素的特点：跟其他行内级元素在同一行显示；可以随意设置宽高；可以这样理解，对外来说，它是一个行内级元素，对内来说，它是一个块级元素。

inline元素的特点：跟其他行内级元素在同一行显示；不可以随意设置宽高；宽高都由内容决定。

我们在写HTML时需要注意，块级元素、inline-block元素一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素）。特殊情况，p元素不能包含其他块级元素。行内级元素（比如a、span、strong等），一般情况下，只能包含行内级元素。

让元素隐藏一般有四种方法。

方法一: display设置为none。元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样)。

方法二: visibility设置为hidden。设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间。默认为visible, 元素是可见的。

方法三: rgba设置颜色, 将a的值设置为0。rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素。

方法四: opacity设置透明度, 设置为0。设置整个元素的透明度, 会影响所有的子元素。

overflow用于控制内容溢出时的行为。