淘宝（タオバオ）のレイアウト実装において、いくつかの重要な技術ポイントに遭遇しました。ここでは、その中核となる知識をまとめました。

行高の単位と継承

font-sizeが16pxの場合を例に説明します。

• line-height: normal;: ブラウザのデフォルト値が適用されます。
• line-height: 1.5;: 16px × 1.5 = 24px。相対単位は、継承された後に計算されます。
• line-height: 200%;: 16px × 200% = 32px。パーセンテージ単位は、計算された後に継承されます。
• line-height: 50px;: 固定値（ピクセル）です。
• line-height: 5em;: 16px × 5 = 80px。em単位も、計算された後に継承されます。

ピクセル値以外の単位は、font-sizeの値に基づいて計算されます。

baseタグの役割

• 基本URLの設定: ページ内のすべての相対URLの基準となるURLを設定します。例えば、<a href="#top"> のようなURLは、baseタグで指定したURLにジャンプします。
• target属性: リンクの開き方（例: target="_blank"）を指定できます。
• 制約: 一つのHTMLページ内には、一つしか存在できません。

空白の折りたたみ

親要素にfont-size: 0;を設定すると、子要素間の空白（スペース、タブ、改行）が折りたたまれます。この空白のサイズは、親要素のfont-sizeによって決まります。

IE向けのグラデーションフィルタ

古いバージョンのInternet Explorerでグラデーションを表示するためのフィルタです。

filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#ff0080',
    endColorstr='#ff8000',
    GradientType=1
);

GradientType=1は水平方向のグラデーション、GradientType=0は垂直方向のグラデーションを意味します。

画像の垂直中央揃え

画像を含む親要素にdisplay: table-cell;とvertical-align: middle;を設定すると、子要素を垂直方向に中央揃えできます。

.parent {
    display: table-cell;
    vertical-align: middle;
    height: 200px; /* 親要素の高さを指定 */
}

テーブルのスタイル

テーブルのボーダーと列幅を制御するためのプロパティです。

table {
    border-collapse: collapse; /* ボーダーを重ねて表示 */
}

th, td {
    padding: 0;
}

/* 列幅をテーブルの幅に基づいて均等に分配 */
table {
    table-layout: fixed;
    width: 100%;
}

単語の改行制御

word-break: keep-all;は、空白やハイフンで改行されず、単語の区切りでしか改行されないようにします。