レイアウトとは: ブラウザは要素を正しい位置に正しいサイズで配置します。
レイアウト: 要素を配置するモード。
要素のサイズと位置に影響を与えるCSSプロパティ: 表示位置 float flex
display
サイズと位置を含む要素の表示モードを設定します。display の値は次のとおりです:
block
inline
inline- block
none
display:block
block要素は「ブロックレベル要素」とも呼ばれます
display:inline
display:line features:
1デフォルトの幅はコンテンツ幅
2 です。幅と高さは同じ行の行レベル要素
3 に設定できないためです。前の要素と後続の要素の両方が display:inline (行レベルの要素) である場合、それらは同じ行に表示されます。要素内で行を折り返すことができます。
デフォルトの表示: インライン要素span、a、label、cite、em、…
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display_inline</title>
<style type="text/css">
.sample{
background-color: pink;
}
/* 行级元素设置宽高无效 */
.sample{
width: 200px;
height: 200px;
}
/* 指定em为块级元素 ，块级元素换行显示（自身相对前序元素是换行的）*/
em{
display: block;
}
</style>
</head>
<body>
<span>before inline</span>
<span class="sample">display : inline;</span>
<em>after inline</em>
</body>
</html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
