行内元素

em和a标志，这两个标志都是非替换元素。图像属于行内元素，不过图像是替换元素。

行布局

多行行内元素

剪断，末尾的空格会变成回车。第一行下边框在下一行上边框的下面。

父元素红色框

基本术语和概念

匿名文本：所有放在块级元素未包含在行内元素中的字符串。

<p>
  I'm<em>so</em> happy!
</p>
<!-- I'm happy 和空格都是匿名文本-->

em框：字体中定义，也称为==字符框==，实际的字形可能比em框更高或更矮。==font-size==确定了各个em框的高度。
内容区：非替换元素中，可以是元素中各字符em框串在一起构成的框，也可以是由元素中字符字形描述的框。替换元素中，内容区就是元素固有高度再加上可能有的外边距、边框和内边距（==margin box==）。
行间距(leading)：是font-size值和line-height值之差。==只应用与非替换元素==
行内框：对于==非替换元素，行内框高度行好等于line-height的值==。对于==替换元素，行内框高度恰好等于内容区（margin box）的高度==。
行框：包含该行中出现的行内框的最高点和最低点的最小框。
非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果。他们不会用影响行内框和行框的高度。（只跟line-height及vertical-align有关。）
替换元素长度外边距和边框确实会影响该元素行内框的高度，亦可能影响包含该元素的行内框的高度。
行内框在行中根据其vertical-align属性垂直对齐。

如何构造一个行框

确定各元素行内框的高度。
1. 得到各行内费替换元素及不属于后代行内元素的所有文本的font-size和line-height值，再将line-height减去font-size，得到行间距，再除以2，将其一半分别应用到em框的顶部和底部。
2. 得到各替换元素的height、margin-top、margin-bottom、padding-top、padding-bottom、border-top-width和border-bottom-width（margin-box）值。
对于各内容区，确定它在整行基线的上方和下方分别超出多少。必须知道各元素及匿名文本各部分的基线的位置，还要知道该行本身基线的位置；然后把他们对齐。对于替换元素，要将其底边放在整行的基线上。
对指定了vertical-align值的元素。确定其垂直偏移量。
确定了所有行内框，可以计算最后的行框宽度。

行内元素img marginbox底部与基线对齐。如何去掉下面边距三种方法
1. display：block
2. font-size 等于0
3. line-height：0 打字会重合

行内格式化

所有元素都有一个line-height。默认继承，影响行内元素如何显示。写没有单位的数字，继承的就是数。只影响行内元素和行内内容。
对一个块级元素设置line-height值，从某种程度讲，块级元素中包含的个文本行本身（匿名文本）都是行内元素。

行内非替换元素

行中非替换元素（或匿名文本）将如何构造。

建立框，font-szie确定内容区的高度，如果一个行内元素内容区设置为15px，em框的高度都是15px。
line-height21px。

行高12，继承给下面所有元素。对于strong，line-height和font-size之差是-12px，除2确定半间距。再分别增加到内容区的顶部和底部，得到行内框。行内框12px。

行内框确定了整个行框的高度，各行框的顶端挨着上一行行框的底端。

垂直对齐

vertical-align:4px指定垂直对齐元素基线向上4px。
vertical-align:百分比==相对于元素自己的行高==
- top：将元素==行内框==顶端与包含该元素的==行框顶端==对齐、
- bottom：将元素==行内框底端==与包含该元素的==行框底端-==对齐
- text-top：将元素==行内框的顶端==与父元素内容区的顶端（==匿名文本em框的顶端==）对齐。实际上浏览器并不这样。
- text-bottom：将元素行内框的底端与父元素内容区的底端对齐
- middle:将元素行内框的垂直中点与父元素基线上0.5ex（0.25em）处的一点（小写x的中点）对齐
- super：将元素内容区和行内框上移。上移距离未指定，因浏览器不同而不同。
- sub：下移

使用vertical-align：middle 让文字（span内）居中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      background-color: rgba(0, 0, 0, 0.1);
    }

    p {
      font-size: 0px;
      line-height: 80px;
    }

    span {
      line-height: 40px;
      width: 100px;
      font-size: 42px;
      vertical-align: middle;
      line-height: 58px;
    }
  </style>
</head>

<body>
  <p>fdskjajgfkaljlfl<span>elit</span
    >fasdf</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      background-color: rgba(0, 0, 0, 0.1);
    }

    p {
      font-size: 0px;
      line-height: 80px;
    }

    span {
      line-height: 40px;
      width: 100px;
      font-size: 42px;
      vertical-align: middle;
      line-height: 58px;
    }

    img {
      width: 20px;
      height: 20px;
    }
  </style>
</head>

<body>
  <p>
    <span>我我你</span>
    <img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
    <span>在在在</span>
  </p>
</body>

</html>

==图片对的是外层匿名文本的基线==

管理line-height

为了避免重叠 line-height设置为纯数字

增加框属性

padding，margin，border都能影响行内非替换元素的行内框。但是不影响布局。不影响行框高度。
内边距和边框不能改变行高。
外边距不会应用到行内非替换元素的顶端和底端。
行内元素作为一行放置。向一个行内元素应用外边距。这些外边距将出现在其开始和末尾；分为左右外边距，内边距也出现在边界上。不影响行高，但可能将文本推离其左右两端。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    span {
      border: 5px solid;
      /* 上下边框重叠 */
      line-height: 3.5;
      box-shadow: 0 0 0px 5px white, 0 0 0px 10px black;
      /* 去掉左右边框重复 */
      border-left: none;
      border-right: none;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    div {
      padding-left: 5px;
      padding-right: 5px;
      text-align: justify;
    }
  </style>
</head>

<body>
  <div>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione suscipit saepe minus consequuntur voluptatum
      obcaecati itaque aliquam possimus assumenda id. Odit provident distinctio velit natus incidunt mollitia voluptas
      architecto aliquid.</span>
  </div>
</body>

</html>

行内替换元素

margin-box
行内替换元素的唯一用处是vertical-align：百分比的参照

改变元素显示

display：none；
display：inline-block；从外面看：它是行内替换元素，从里面看，他的内容认为自己在一个块里面。看他自身位置时，当成行内元素。看他内容布局时，内容们认为自己在一个块级元素里。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      background-color: rgba(0, 0, 0, 0.1);
    }

    span {
      display: inline-block;
      width: 50px;
      height: 50px;
      margin: 5px;
      border: 1px solid;
      /* font-size:16px; */
    }

    div {
      /* 消除span间空格 */
      /* font-size: 0px; */
    }
  </style>
</head>

<body>
  <div>
    fkjlasdjflkjsskdffjk
    <span>asdf<br>dsajh</span> <span></span>
    <!-- 有内容时，基线是内容的最后一行的基线。
    无内容时，将margin-box底部做为基线。
    inline-block 触发bfc 子元素margin跑不出去
    inline-block里面最后一个元素是一个inline-block，基线是
    里面inline-block的基线，里面inline-block的基线是他内容最后一行
    的基线 -->
  </div>
</body>

</html>

多行文本居中：给多行文本套一个inline-block，高度就是被撑起来的。然后middle垂直居中。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      background-color: rgba(0, 0, 0, 0.1);
    }

    div {
      font-size: 10px;
      height: 120px;
      line-height: 120px;
      /*对齐匿名文本x的中点 align middle*/
      text-align: center;

    }

    div * {
      font-size: 16px;
    }

    span {
      line-height: normal;
      width: 150px;
      display: inline-block;
      border: 1px solid;
      vertical-align: middle;
      text-align: left;
    }
  </style>
</head>

<body>
  <div>x
    <span>Lorem ipsum dolor sit amet./span>
  </div>
</body>

</html>

005行内元素

行内元素

行布局

多行行内元素

基本术语和概念

如何构造一个行框

行内格式化

行内非替换元素

垂直对齐

管理line-height

增加框属性

行内替换元素

改变元素显示