块元素和行内元素
- 块元素
- 行内元素
display 简介
display:none
- 简介
- display:none & visibility:hidden
display:table-cell
去除 inline-block 元素间距

块元素和行内元素

已知在浏览器的显示效果中，有些元素是独占一行的，其他元素不能跟这个元素位于同一行，如 h1~h6、p、div 等；而有些元素是可以跟其他元素位于同一行的，如 strong、em、u 等。

在 HTML 中，根据元素的表现形式，一般将元素分为两类，即块元素（block）和行元素（inline），这两个是最常见的，除此之外，还有 inline-block、table-cell 等元素类型。

块元素

在 HTML 中，块元素在浏览器显示状态下将占据一整行，并且排斥其他元素与其位于同一行。此外，一般情况下块元素内部可以容纳其他块元素和行内元素，可以定义 width 和 height，以及四个方向的 margin。

行内元素

在 HTML 中，行内元素跟块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的。此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。可以与其他行元素位于同一行，可以容纳行内元素，不能容纳块元素。无法定义 width 和 height，可以定义 margin-left/right 不能定义 margin-top/bottom。

display 简介

已知有多种元素类型，当需要进行元素类型转换时，可以使用 display 实现。
行内和块元素之前已经介绍，这里介绍行内块元素，在 CSS 中，我们可以使用 display:inline-block; 将元素转换为行内块元素。行内块元素具有以下两个特点：

▶ 可以定义 width 和 height。

▶ 可以与其他行内元素位于同一行。

可见 inline-block 元素同时具备了 block 和 inline 元素的特点，在 HTML 中常见的由两个：img 和 input。

<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      span
      {
        display:inline-block;
        width:60px;
        height:100px;
        background-color:red;
      }
    </style>
  </head>
  <body>
    <span></span>
    <span></span>
    <span></span>
  </body>
</html>
将行元素改为行内块元素，给其加上宽高

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    a {
      /*去除默认样式*/
      text-decoration: none;
      /*转换为inline-block元素*/
      display: inline-block;
      width: 100px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      border: 1px solid #DADADA;
      border-radius: 5px;
      font-family: "微软雅黑";
      cursor: pointer;
      cursor: pointer;
      background: linear-gradient(to bottom, #F8F8F8, #a19797);
      /*使用CSS3渐变*/
    }

    a:hover {
      color: white;
      background: linear-gradient(to bottom, #FFC559, #FFAF19);
      /*使用CSS3渐变*/
    }
  </style>
</head>

<body>
  <a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
</body>

</html>

模拟按键，给 a 标签添加样式，注意这里的渐变色方式。

在实际开发中，我们可能经常需要为 span、a 等行内元素定义一定的 width 和 height，此时就应该考虑使用 display:inline-block; 来实现。

display:none

简介

在 CSS 中，我们可以使用 display:none 来隐藏一个元素。display:none 在实际开发中应用非常广泛，比如二级导航、tab 选项卡等地方都会用到。不过大多数情况下，display:none 都是配合 JavaScript 来动态隐藏元素的，注意以下两点：

▶ display:none 一般用来配合 JavaScript 动态隐藏元素，被隐藏的元素不占据原来位置的空间。

▶ display:none 不推荐用来隐藏一些对 SEO（Search Engine Optimization，搜索引擎优化）关键的部分。因为对于搜索引擎来说，它会直接忽略 display:none 隐藏的内容，不会把 display:none 隐藏的内容加入权重考虑。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      div {
        display: inline-block;
        width: 80px;
        height: 80px;
        line-height: 80px;
        border: 1px solid red;
        font-size: 80px;
        text-align: center;
      }
      #second{
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="first">A</div>
    <div id="second">B</div>
    <div id="third">C</div>
  </body>

</html>

第二个元素被隐藏，并且不再占据原来的位置空间。

display:none & visibility:hidden

在 CSS 中，如果想要隐藏某一个元素，我们可以使用 display:none 或者 visibility:hidden 来实现。虽然两种方式都可以隐藏元素，但是它们之间有着本质的区别。

▶ display:none ：元素被隐藏之后，不占据原来的位置，也就是说元素“彻底地消失了，看不见也摸不着”。

▶ visibility:hidden ：元素被隐藏之后，依然占据原来的位置，也就是说元素“并没有彻底消失，看不见但摸得着”。 visibility&display.png

display:table-cell

在 CSS 中，display:table-cell 可以让元素以表格单元格的形式呈现。换句话说，就是 table-cell 类型元素具备 td 元素的特点，常见用途如下：

▶ 图片垂直居中于元素。

▶ 等高布局。

▶ 自动平均划分元素。

图片垂直居中于元素

在 CSS 中，我们可以配合使用 display:table-cell 和 vertical-align:middle 来实现大小不固定的图片的垂直居中效果。

父元素
{
  display:table-cell;
  vertical-align:middle;
}
子元素{vertical-align:middle;}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    div {
      display: table-cell;
      vertical-align: middle;
      width: 150px;
      height: 150px;
      border: 1px solid gray;
      text-align: center;
    }

    img {
      vertical-align: middle;
    }

    div+div {
      border-left: none;
    }
  </style>
</head>

<body>
  <div></div>
  <div><img src="fhn1.jpg" alt="" /></div>
  <div><img src="fhn2.jpg" alt="" /></div>
  <div><img src="lani.jpg" alt="" /></div>
</body>

</html>

 图片的水平居中可以使用 text-align:center 来实现，而图片的垂直居中可以配合使用 display: table-cell 和 vertical-align:middle 来实现。

等高布局

已知同一行的单元格 td 元素高度是相等的，因此，table-cell 元素也具备这个特点。根据这个特点，我们可以实现等高布局效果。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    /*定义父元素具备tr特点*/
    #wrapper {
      display: table-row;
    }

    #img-box {
      display: table-cell;
      vertical-align: middle;
      /*垂直居中*/
      text-align: center;
      /*水平居中*/
      width: 1500px;
      border: 1px solid red;
    }

    #text-box {
      display: table-cell;
      width: 2000px;
      border: 1px solid red;
      border-left: none;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div id="wrapper">
    <div id="img-box">
      <img src="fhn2.jpg" alt="" />
    </div>
    <div id="text-box">
      <span>黑暗之魂. 编辑. 锁定. 讨论 9. 《黑暗之魂》由2009年2月推出的《恶魔之魂（Demon's Souls）
》原班人马担纲制作，继承《 恶魔之魂 》黑暗魔幻风格与精神，以“探索迷
宫的紧张感”、“遭遇敌人的恐怖感”，“新发现的喜悦感”一直到“存活到最
后的达成感”为诉求，是款高难度的硬派动作游戏，整个《黑暗之魂》世界观
是完全唯心的，所有的流程完全靠玩家自行探索黑暗又隐晦。. 曾经凭借出色的新概念以及极高的难度，在欧美掀起巨大关注并获奖频频的日
本RPG《 恶魔之魂 》，其续作《黑暗之魂》日前确定了大概的发售时间。. 日版
为PS3独占并将于9月率先发布，而美版则是PS3和XBOX360双平台，预计10月发售。</span>
    </div>
  </div>
</body>

</html>

示例中两个盒子都没有定义高度，而是由盒子的内容撑开，但是这里要注意到：左右两个盒子高度相等，并且高度由两者高度的最大值决定。这就是 “自适应等高布局”。

这个样式可以利用到评论设计中，左边放头像，右边是用户名称和评论内容，在自适应等高布局中，左右两栏都不定义高度，而是由内容撑起来，并且左右两栏的高度都是相同的。

自动平均划分元素

父元素{display:table;}
子元素{display:table-cell;}

如果为父元素定义 display:table，为子元素定义 display:table-cell，然后为父元素定义一定的宽度，那么此时子元素的宽度就会根据子元素的个数自动平均划分。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      list-style-type: none;
      display: table;
      width: 300px;
    }

    li {
      display: table-cell;
      height: 80px;
      line-height: 80px;
      text-align: center;
      color: White;
    }

    ul li:nth-child(1) {
      background-color: red;
    }

    ul li:nth-child(2) {
      background-color: orange;
    }

    ul li:nth-child(3) {
      background-color: blue;
    }

    ul li:nth-child(4) {
      background-color: silver;
    }

    ul li:nth-child(5) {
      background-color: purple;
    }
  </style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>

</html>

 ul 元素的宽度自动根据 li 元素的个数进行平均划分，并不需要我们指定每一个 li 元素的宽度。

去除 inline-block 元素间距

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      list-style-type: none;
      font-size: 0%;                 去除 inline-block 元素的间距    
    }

    li {
      display: inline-block;
      width: 80px;
      height: 80px;
      line-height: 80px;
      font-size: 40px;
      text-align: center;
      color: white;
      background-color: purple;
    }
  </style>
</head>

<body>
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</body>

</html>

font-size:0 是在 inline-block 元素的父元素中添加的。img 属于块内行元素，所以如果要去除 img 之间的间隔，也可以用本方式。

这里要注意一点：因为父元素使用了 font-size:0，所以子元素如果有文字需要定义自身的 font-size，不然会因为继承而看不到文字。

🛠️Tech

display 属性