css中Display(显示) 与 Visibility（可见性）的使用方法

灰太狼 2021-09-15 02:42 455阅读 0赞

## 隐藏元素 - display:none或visibility:hidden ##

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

visibility: collapse;也可以用在表单中   将其剩于部分隐藏

![70][]

![70 1][]

display  none的使用方法 :该盒子模型不会被显示

display  block的使用方法:该盒子模型为块级元素   list-item  相同

是有换行符的

display   inline的使用方法：该盒子模型没有换行符

display 属性的值为 "inline"的结果

两个元素显示在同一水平线上。

display inline-block的使用方法:行内块元素

## CSS Display - 块和内联元素 ##

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

*  <h1>
 *  <p>
 *  <div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

*  <span>
 *  <a>

span  
\{  
display:block;  
\}  
</style>  
</head>  
<body>  
  
  
<h2>Nirvana</h2>  
<span>Record: MTV Unplugged in New York</span>  
<span>Year: 1993</span>  
<h2>Radiohead</h2>  
<span>Record: OK Computer</span>

![70 2][]

块级元素(block)特性：

*  总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
 *  宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

*  和相邻的内联元素在同一行;
 *  宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

*   address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

*  a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

*  applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

*  display:block  -- 显示为块级元素
 *  display:inline  -- 显示为内联元素
 *  display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

[70]: /images/20210813/f132b8cf53bb448f9b2f92bb0688e226.png
[70 1]: /images/20210813/b2b5a3a0b07448b8ae51a2c195fdbd1c.png
[70 2]: /images/20210813/f85ae3f404ee433f9fee00f71f7afe7e.png