CSS - 显示模式

电玩女神 2023-09-28 15:56 15阅读 0赞

**目录**

块级元素、行内元素、行内块元素的特点

行内元素、行内块元素之间间隙的形成原因，以及解决办法

关于vertical-align的使用

设置单行文字垂直居中的方案

设置行内元素，行内块元素水平、垂直居中的两种方案

CSS元素显示模式：display样式

block、inline、inline-block

元素的显示与隐藏

其他的元素隐藏手段

--------------------

## 块级元素、行内元素、行内块元素的特点 ##

<table> 
 <tbody> 
  <tr> 
   <td colspan="2">在标准流中</td> 
  </tr> 
  <tr> 
   <td style="width:89px;">块级元素</td> 
   <td style="width:599px;"> 
    <ul> 
     <li>独占一行</li> 
     <li>默认宽度为父级元素宽度的100%，默认高度为自身内容高度</li> 
     <li>支持通过width、height样式属性设置宽高</li> 
     <li>支持通过margin、border、padding设置边距和边框</li> 
     <li>块级元素中可以放入块级元素、行内元素、行内块元素、文本</li> 
     <li>常用的块级元素：h1~h6、p、ul、ol、li、table、form、div</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="width:89px;">行内元素</td> 
   <td style="width:599px;"> 
    <ul> 
     <li>与其他行内元素、行内块元素共享一行，当一行放不下时，自动换行</li> 
     <li>宽高就是自身内容的宽高</li> 
     <li>不支持通过width、height样式属性设置宽高</li> 
     <li>支持通过border设置边框，支持通过padding设置内边距，仅支持左右margin，不支持上下margin</li> 
     <li>行内元素中可以放入行内元素、文本</li> 
     <li>常用的行内元素：a、label、span</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="width:89px;">行内块元素</td> 
   <td style="width:599px;"> 
    <ul> 
     <li>与其他行内元素、行内块元素共享一行，当一行放不下时，自动换行</li> 
     <li>默认宽高就是自身内容的宽高</li> 
     <li>支持通过width、height样式属性设置宽高</li> 
     <li>支持通过margin、border、padding设置自身边距和边框</li> 
     <li>行内块元素中可以放入文本</li> 
     <li>常用的行内块元素：input、td、button、img</li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

### 行内元素、行内块元素之间间隙的形成原因，以及解决办法 ###

同一行上的，行内元素之间，行内块元素之间，行内元素与行内块元素之间，存在左右间隙。

相邻行上的，行内块元素之间，存在上下间隙。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          span, img{
            background-color: red;
          }
        </style>
      </head>
      <body>
        <div>
          <span>123</span>
          <span>123</span>
        </div>
        <div>
          <span>123</span>
          <span>123</span>
        </div>
        <div>
          <span>123</span>
          <img src="./logo.png"/>
        </div>
        <div>
          <img src="./logo.png"/>
          <img src="./logo.png"/>
        </div>
        <div>
          <img src="./logo.png"/>
          <img src="./logo.png"/>
        </div>
      </body>
    </html>

![857e6beb2c4b4a589346125d378c8973.png][]

行内元素、行内块元素之间的左右间隙其实代码书写时，标签之间的空格、换行导致的。

我们去除掉标签之间的空格、换行，即可消除行内元素、行内块元素之间的左右间隙。

![f649ae5878664398a7f883e2ffa3fbb0.png][]

行内元素之间是不存在上下间隙的，而行内块元素之间存在上下间隙。

行内块元素之间的上下间隙，是由于行内块底部默认与所在行的基线baseline对齐。

而行的基线baseline是用于排版行内文字垂直方向位置的，它又和文字行高line-height有关。

无论是块级元素，还是行内元素都支持设置line-height样式，该样式用于为行内文字添加一个上下间隙。

![2d8487c99bfb4d68aba54f537e349697.png][]

上空隙与下空隙是平均的、相等的，值为 （line-height 减 font-size）除以 2 。

所以line-height必须大于等于font-size时才有意义。

![88e9861192a8446e9f2d25822b687b2a.png][]

而行高的上空隙底部就是文字的top线，下空隙顶部就是文字的bottom线，而行高的一半位置的线就是文字middle线。

另外，文字还有一条baseline线。

![38661f2f78614919805817a3116f7158.png][]

而行内块默认与行内文字的baseline线对齐 这是造成行内块之间垂直方向间隙的原因。

![2f508b2623db4a3199a7088aa1c049ee.png][]

解决办法很简单，我们只需要让行内块元素不与文字的baseline线对齐即可，可以让行内块元素与文字的top，middle，bottom任意一条线对齐。

而vertical-align样式是专门用于控制 行内块元素 与 行内文字哪条线对齐的，vertical-align有如下值：

*  top：行内块顶部与文字top线对齐
 *  middle：行内块中间与文件middle线对齐
 *  baseline：行内块底部与文字baseline线对齐
 *  bottom：行内块底部与文字bottom线对齐

![ac7dc6a9c3334297b009f5a29979d557.png][]

### 关于vertical-align的使用 ###

块级元素设置vertical-align样式无效，只有行内元素、行内块元素设置vertical-align有效。

其中，行内块元素设置vertical-align样式，可以改变其在行内垂直方向位置，参考线为文字的top、middle、baseline、bottom线；

如果，行内元素设置vertical-align样式，虽然也可以改变其在行内垂直方向位置，但是效果不明显，也非常难以理解。

另外，vertical-align还可以用于 display: table-cell 的元素，即表格单元格元素。

![382a3595459342ec96174098399f5104.png][]

### 设置单行文字垂直居中的方案 ###

只要块级元素的height值和line-height值相等即可。

### 设置行内元素，行内块元素水平、垂直居中的两种方案 ###

![98710a7d9a8646ce9a95922af0470e3c.png][]

行内元素、行内块元素

*  水平居中，使用text-align:center
 *  垂直居中，使用line-height: height值

需要注意的是，块级元素不支持设置vertical-align样式。

但是，我们还要知道表格单元格是支持vertical-align:center让内部元素垂直居中的，所以我们可以将行内元素父级的显示模式变为display: table-cell

![c790c71065924d289b2334fc660b55e0.png][]

## CSS元素显示模式：display样式 ##

### block、inline、inline-block ###

一般而言：

*  块级元素的display样式属性值为 block
 *  行内元素的display样式属性值为 inline
 *  行内块元素的display样式属性值为 inline-block

我们可以通过改变元素的display样式值，来改变元素的显示模式

![87c479d35bc640759e1a84fa621556a8.png][]

但是并非所有的块级元素都是display:block，比如li，它的display为list-item；

li也表现为块级元素的特点，比如独占一行，支持宽高、内外边距、边框设置，和纯正块级元素的区别仅在于li会有一个默认的“●”开头

![f043e80fdec84e3b89877c23b5343465.png][]

也并非所有的行内块元素都是display:inline-block，比如td，它的display为table-cell，

td也表现为行内块元素的特点，比如和其他td共享一行，支持宽高、内外边距、边框设置，和纯正行内块的区别仅在于td仅能在table中生效，并且td可以通过设置vertical-align：middle来控制内容垂直居中，其他行内块元素设置vertical-align只能控制自身与文字基准线对齐。

![0e176653c0d14db0907caaf915eb315f.png][]

### 元素的显示与隐藏 ###

我们还可以通过给元素设置display：none来让其隐藏

![5489fdd80afc4ffdbb7d22f88897308c.png][]

可以发现，被display:none的元素，将不再保留其在网页中的位置，它后面的元素将会进据其位置。我们可以将display:none改为display:block，让隐藏的元素重新显示出来

![2374b83c64c947fda69c62774997aa18.png][]

### 其他的元素隐藏手段 ###

*  overflow:hidden
 *  visibility: hidden

###  ###

visibility:hidden隐藏的元素依旧保留其在网页中的位置，所以它后面的元素无法进据其位置

我们可以通过visibility: visible来让隐藏的元素重新显示

### ![1940f280daac4ff4a594497fd36331da.png][] ###

overflow:hidden 设置在父元素上，作用是将超出父元素范围显示的子元素部分区域隐藏。

并且需要注意的是，子元素超出父元素范围的区域并不会占据父元素外的网页位置。

![c4976650f11a4f8eb43f2eddf98b3eec.png][]

[857e6beb2c4b4a589346125d378c8973.png]: https://img-blog.csdnimg.cn/857e6beb2c4b4a589346125d378c8973.png
[f649ae5878664398a7f883e2ffa3fbb0.png]: https://img-blog.csdnimg.cn/f649ae5878664398a7f883e2ffa3fbb0.png
[2d8487c99bfb4d68aba54f537e349697.png]: https://img-blog.csdnimg.cn/2d8487c99bfb4d68aba54f537e349697.png
[88e9861192a8446e9f2d25822b687b2a.png]: https://img-blog.csdnimg.cn/88e9861192a8446e9f2d25822b687b2a.png
[38661f2f78614919805817a3116f7158.png]: https://img-blog.csdnimg.cn/38661f2f78614919805817a3116f7158.png
[2f508b2623db4a3199a7088aa1c049ee.png]: https://img-blog.csdnimg.cn/2f508b2623db4a3199a7088aa1c049ee.png
[ac7dc6a9c3334297b009f5a29979d557.png]: https://img-blog.csdnimg.cn/ac7dc6a9c3334297b009f5a29979d557.png
[382a3595459342ec96174098399f5104.png]: https://img-blog.csdnimg.cn/382a3595459342ec96174098399f5104.png
[98710a7d9a8646ce9a95922af0470e3c.png]: https://img-blog.csdnimg.cn/98710a7d9a8646ce9a95922af0470e3c.png
[c790c71065924d289b2334fc660b55e0.png]: https://img-blog.csdnimg.cn/c790c71065924d289b2334fc660b55e0.png
[87c479d35bc640759e1a84fa621556a8.png]: https://img-blog.csdnimg.cn/87c479d35bc640759e1a84fa621556a8.png
[f043e80fdec84e3b89877c23b5343465.png]: https://img-blog.csdnimg.cn/f043e80fdec84e3b89877c23b5343465.png
[0e176653c0d14db0907caaf915eb315f.png]: https://img-blog.csdnimg.cn/0e176653c0d14db0907caaf915eb315f.png
[5489fdd80afc4ffdbb7d22f88897308c.png]: https://img-blog.csdnimg.cn/5489fdd80afc4ffdbb7d22f88897308c.png
[2374b83c64c947fda69c62774997aa18.png]: https://img-blog.csdnimg.cn/2374b83c64c947fda69c62774997aa18.png
[1940f280daac4ff4a594497fd36331da.png]: https://img-blog.csdnimg.cn/1940f280daac4ff4a594497fd36331da.png
[c4976650f11a4f8eb43f2eddf98b3eec.png]: https://img-blog.csdnimg.cn/c4976650f11a4f8eb43f2eddf98b3eec.png