エレメント表示モード
要素表示モードの定義
要素表示モード：要素ラベルはどのように表示されますか。
ブロックとインライン要素
ブロック要素
1<h><p><ul><ol><div>
行のみ
高さ、幅、外側マージン、内側マージンを制御できます。
デフォルトの幅はコンテナ（親レベルの100％）です
。コンテナまたはボックスであり、ブロックレベルの要素を配置できます
。ブロックレベルの要素は、p / h
インライン要素などのテキストクラスに配置できません。（インライン要素）
隣接する行で1つの行が複数の要素を占める可能性
があります
高さと幅の設定が無効ですデフォルトの幅は独自の幅です
テキストやその他のインライン要素にインテリジェントに対応します
リンクはリンクできなくなります
特別にケースaはブロックレベルの要素に配置できますブロック
インライン要素
<img/>,<input/><td>
複数行にすることができますが、ギャップがあります。
デフォルトの幅はそれ自体です
。幅、線の高さ、マージンを設定できます。
要素表示モード変換
要素表示モード変換：
使用：トリガー範囲を拡大
表示：ブロック
表示：インライン
表示：インラインブロック
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示模式的转换</title>
<style>
/* div是块元素，span是行内元素，a是行内元素 */
.div1 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
}
.div2 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
display: inline;
}
.a1 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
}
.a2 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
display: block;
}
.span1 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
}
.span2 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 300px;
/* 盒子宽 */
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div1">div1</div>
<br/>
<div class="div2">div2</div>
<div class="div2">div2</div>
<br/>
<a href="#" class="a1">a1</a>
<a href="#" class="a1">a1</a>
<br/>
<a href="#" class="a2">a2</a>
<a href="#" class="a2">a2</a>
<br/>
<span class="spa1">spa1</span>
<span class="spa1">spa1</span>
<br/>
<span class="spa2">spa2</span>
<span class="spa2">spa2</span>
<br/>
</body>
</html>
