CSS3：display和visibility属性的区别

Posted 2021-04-09 粒粒归仓

文 | 归仓     图 | 网络

01

display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的display值，这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个block元素通常被叫做块级元素。一个inline元素通常被叫做行内元素。

block

像块类型元素一样显示。div是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括：div、ul、ol、li、dd、dt、dl、h1、h2、h3、h4· · · 、p 、section、header、footer等。          

.element {

    display: block;

}

inline

display: inline;将元素设置为行内元素。span是一个标准的行内元素。一个行内元素可以在段落中<span>像这样</span>包裹一些文字而不会打乱段落的布局。a元素是最常用的行内元素，它可以被用作链接。其他常用的行内元素包括：a、b、span、img、input、select、strong、button等。

.element {

    display: inline;

}

block和inline的区别：

1、块级元素会独占一行，其宽度自动填满其父元素宽度；

行内元素不会独占一行，相邻的行内元素会排在同一行里，直到一行排不下，才会换行，其宽度随元素内容而变化；

2、块级元素可以设置width和height属性，且margin和padding的设置都是有效的；

行内元素设置width和height属性是无效的，且margin和padding在水平方向有效，在竖直方向无效。

02

还有以下display属性的值，这里简单介绍下：

inline-block：像行内元素一样显示，但其内容像块级元素一样显示；

list-item：像块类型元素一样显示，并添加样式列表标记；

table：此元素会作为块级表格来显示；

inherit：规定应该从父元素继承display属性的值；

none：此元素不会被显示出来，且不占用文档流；

其中另一个常用的display值是none。一些特殊元素的默认display值是它，例如script。display: none;通常被javascript用来在不删除元素的情况下隐藏或显示元素。

它和visibility属性不一样。把display设置成none元素不会占据它本来应该显示的空间，但是设置成visibility: hidden;还会占据空间。

visibility属性的值

hidden：隐藏该区域，但是占用文档流

visible：显示该区域

扫下面关注