ボックスの4つの部分：
border：border
padding：inner margin
margin：outer margin
content：コンテンツボックスの長さと幅は、実際にはコンテンツ
の長さと幅と同じです。
ボーダー：ボーダー
3つの属性：境界線の色、境界線の種類、境界線の太さ
- 4辺は別々に設定できます。
- 境界線の定義は省略でき、3つの属性には順序要件はありません。
パディング：内側マージン
- 4辺は別々に設定できます。
- 一般的な設定の意味は次のとおり
です。パディング：10px;
4つの
パディングはすべて10pxのパディング：10px 15px;
4つの
パディングは上下、左右のパディングを表します：10px 15px 20px;
4つのパディングは上、左、下部の
パディング：10px 15px 20px 25px;
4つの内側の余白は上、右、下、左を表し
ます3.アプリケーション：ナビゲーションバーを均等に
パディングするように設定できます：0px 20px;
内側の余白は20で、グリッドを作成できますユニフォーム
マージン：外側マージン
- 4辺は別々に設定できます。
- 意味は次のようにまとめることができます
：パディング：10px;
4つの外側の余白はすべて10pxの
パディング：10px 15px;
4つの外側の余白は上下、左右の
パディングを表します：10px 15px 20px;
4つの外側の余白は上、左、および下の
パディング：10px 15px 20px 25px;
4つの外側の余白は、上、右、下、左を表し
ます3.アプリケーション：要素を中央に配置するように設定できます。
余白：自動;または
余白：0自動;
左と右外側の境界線は自動で、ブロックレベルの要素を
中央揃えにすることができますtext-align：center;
幅のない別のインライン要素を中央揃えにすることができます。
コード例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子属性</title>
<style>
.div0 {
height: 50px;
background-color: black;
/* 为了显示边界，方便观察 */
}
.div1 {
border: red 5px solid;
/* 简写模式 无顺序要求*/
/* border-style: solid; */
/* 边框线的类型 */
border-top: solid 5px blue;
/* 四个边可分别设置 */
padding: 10px 15px 20px 25px;
/* 四个内边距 代表上，右，下，左 */
/* padding-left: 10px; */
/* 四个边可分别设置 */
margin: 10px 15px 20px 25px;
/* 四个外边距 代表上，右，下，左 */
background-color: chartreuse;
}
.div2 {
width: 500px;
height: 200px;
border: red 5px solid;
padding: 10px 15px 20px 25px;
margin: 0 auto;
/* 只要左右外边框为自动，便可以居中 */
text-align: center;
/* 另没有宽度的行内元素，可以居中 */
background-color: chartreuse;
}
.div3 {
/* width: 500px; */
/* 不设置宽 */
height: 20px;
padding: 0px 20px;
margin: 0 auto;
/* 内边距为20，可以是格子均匀 */
text-align: center;
background-color: chartreuse;
}
.span1 {
background-color: rosybrown;
}
.span2 {
background-color: blanchedalmond;
}
* {
margin: 0px;
/* 清除自带的外边距 */
padding: 0px;
/* 清除自带的内边距 */
}
</style>
</head>
<body>
<div class="div0"></div>
<div class="div1">四大属性</div>
<div class="div0"></div>
<div class="div2">居中</div>
<div class="div0"></div>
<div class="div3">
<span class="span1">长的内容----</span>
<span class="span2">短的</span>
<span class="span1">较长的</span>
</div>
</body>
</html>
Webページのスタイル：
