垂直整列性の深い理解

文法

指定された行または垂直配向素子のテーブル要素のため

親要素に対する相対値

ベースライン
- ベースライン整列要素の親要素のベースラインとなるよう。HTML仕様では、要素は、この値は、ブラウザの性能に依存して変化使用することを意味し、そのようなTEXTAREAとして、ベースラインの要素の別の部分を指定していません。
中間
- 半分のアラインメント：親要素に加えて、Xの高さ（高さx注釈）の中心的な要素を作るためのベースライン親要素。
サブ
- 親要素を作るための添字基本要素は、ベースラインに揃えています。
素晴らしい
- だから、親要素のベースラインおよびベースラインのアライメントマーク。
テキストトップ
- だから、親要素のフォントの上端は上部に並びます。
テキストの下
- 底部要素の親要素のフォントの下端に揃えています。
  
  ラインの相対値
上
- ライン全体のトップの上部に位置合わせ要素極めて子孫要素。
底
- 底部要素及びその子孫要素の行全体の底部と整列されます。
代替用途の下縁の外側からベースラインのない要素ありません。

BASELINE

1、ベースラインの意味

スクリーンショット2019年8月31日3.11.20 PM

図2に示すように、ベースラインはルールを決定します

1. inline-table 的 baseline 是他的table的第一行的 baseline
2. 父元素 [line box] 的 baseline 是最后一个 line box 的 baseline。
3. inline-block 元素的 baseline 确定规则
    1. inline-block 元素，如果内部有 line box，则 inline-block 元素的 baseline 就是最后一个作为内容存在的元素 [inline box] 的 baseline，而这个元素的 baseline 的确定就要根据它自身来定了。
    2. inline-block 元素，如果内部没有 line box 或他的 overflow 属性是 visible 以外的值,那么 baseline 将是这个 inline-block 元素的 margin 边界。

図3に示すように、インラインブロックの例

ブロック内の子要素の列、なしインラインボックス。
`` `HTML

バツ

`` `

理由：

ルール2に従い。親要素のベースラインベースラインは、ボックス内の最後の行です。
最後に、ブロック列内の行内ボックス。内側のブロック列プロパティ以外の最初の決意値がオーバーフローvisiableず、次いでこれは内部インラインボックスを決定しない、素子ベースラインが下マージンと同一平面である星。
ベースラインは、黄色のブロックの親要素の下マージンです。
子要素の行ブロック内で、インラインボックスがあります。

<style type="text/css">
      .ctn-block {
        background-color: #bbb;
        height: 500px;
        text-align: center;
      }
    
      .ctn-block .child {
        display: inline-block;
        width: 100px;
        height: 200px;
        background: orange;
      }
</style>
<body>
    <div class="ctn-block">
      x
      <div class="child">
        x
      </div>
    </div>
</body>

スクリーンショット2019年8月31日5.15.10 PM
理由：
*ルール2に従い。親要素のベースラインベースラインは、ボックス内の最後の行です。最後に、ブロック列内の行内ボックス。
*最初に決定する。この行ブロックオーバーフロープロパティがvisiableない星のボックス内の現在の行のベースラインは、コンテンツ要素、xのすなわちベースライン内容、デフォルトとして最後のものの存在であるので、次に、要素のコンテンツが存在するベースラインを持っているかを決定下のx。
*だから、現在の親要素のベースラインは、コンテンツ領域Xの最下部です。

子要素は、ブロック内の行を有し、オーバーフロープロパティが隠されています。
ベースラインの子要素は、下マージンです。したがって、ベースラインに対応する親要素は、下余白です。

以下ボイドインラインブロック要素。

垂直方向に離間

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0
    }

    ul {
      background-color: bisque;
    }

    .box {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: aliceblue;
    }
  </style>
</head>

<body>

  <ul>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <span>x</span>
  </ul>
</body>

</html>

スクリーンショット2019年8月31日5.53.01 PM
理由：ブロック内のLi行、及び垂直-alignプロパティのデフォルトベースライン、文字の即ち下端ので、ベースラインの下に、大統領の底部に、より高い文字S、Y、等のいくつかに関して、xは文字の部分は、空間、従ってギャップを残すであろう。解決策は、中央に垂直整列のLiセットとして、基準位置**行ボックスを変更することです。下図のように。
スクリーンショット2019年8月31日5.58.34 PM

横方向の空間
的な理由：リチウム元素の段差が生じてラップは、ラップが空白になるので、ブランクは、DOM内のテキストノードとして解析されるであろう。
ソリューション：
1. リー兄弟は、書き込みの前と後に一緒に入れ。
2. 代わりに、コメントと空白の描画がレンダリングされていない場合、コメントノードがデフォルト。

文法