一、盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
不同部分的說明：
Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。
div {width: 300px;border: 25px solid green;padding: 25px;margin: 25px;
}
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
300px (寬)+ 50px (左 + 右填充)+ 50px (左 + 右邊框)+ 50px (左 + 右邊距)= 450px
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.inline-block{display: block;padding: 15px;margin: 50px;border: 20px solid rgb(255, 0, 81);}</style>
</head>
<body><span>這是行內塊元素演示</span><img class="inline-block" src="example.jpg" alt="示例圖片" width="200" height="200">
</body>
</html>
二、浮動
例子：
<head><style>body {width: 90%;max-width: 900px;margin: 0 auto;font:0.9em/1.2 Arial,Helvetica,sans-serif;}.box {width: 150px;height: 100px;border-radius: 5px;background-color: rgb(207, 232, 220);padding: 1em;}</style>
</head>
<body><h1>Simple float example</h1><div class="box">Float</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquamdolor, eu lacinia lorem placerat vulputate. </p><p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit ametorci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornareex malesuada et. In vitae convallis lacus. </p><p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuadaultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sedest. Nam id risus quis ante semper consectetur eget aliquam lorem. </p>
</body>
使盒子浮動起來：
.box {float: left;margin-right: 15px;width: 150px;height: 100px;border-radius: 5px;background-color: rgb(207, 232, 220);padding: 1em;
}
清除浮動
.cleared {clear: left;
}
<style>body {width: 90%;max-width: 900px;margin: 0 auto;font:0.9em/1.2 Arial,Helvetica,sans-serif;}.box {float: left;margin-right: 15px;width: 150px;height: 100px;border-radius: 5px;background-color: rgb(207, 232, 220);padding: 1em;} .special {background-color: rgb(79, 185, 227);padding: 10px;color: #fff;}.cleared {clear: left;}</style>
</head>
<body><h1>Simple float example</h1><div class="box">Float</div><p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquamdolor, eu lacinia lorem placerat vulputate. Sed auctor cursus massa at porta.</p><p class="cleared">Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit ametorci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornareex malesuada et. In vitae convallis lacus. </p><p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuadaultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sedest. Nam id risus quis ante semper consectetur eget aliquam lorem. </p>
</body>
三、定位
1.相對定位
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{height: 350px;background-color: aqua; }.box-normal{width: 100px;height: 100px;background-color: red;margin: 10px;}.box-relative{width: 100px;height: 100px;background-color: blue;margin: 10px;position: relative; /* 相對定位 */top: 20px; /* 向下移動20px */left: 20px; /* 向右移動20px *//* 這兩個屬性可以讓元素相對于它原來的位置進行移動，而不是相對于父元素或視口。 *//* 這意味著它仍然占據原來的空間。 *//* 這就是相對定位的特點。 *//* 你可以通過調整top、left、right和bottom屬性來控制元素的位置。 *//* 你也可以使用負值來向上或向左移動元素。 *//* 這會讓元素看起來像是從原來的位置移動了，但是它仍然占據原來的空間。 */}</style>
</head>
<body><h1>相對定位</h1><div class="box1"><div class="box-normal"></div><div class="box-relative"></div><div class="box-normal"></div></div>
</body>
2.絕對定位
<style>.box2{height: 350px;background-color: rgb(251, 255, 0); margin-bottom: 300px; }.box-absolute{width: 100px;height: 100px;background-color: green;margin: 10px;position: absolute; /* 絕對定位 *//*top: 20px; /* 向下移動20px */left: 20px; /* 向右移動20px *//* 這兩個屬性可以讓元素相對于它的最近的定位祖先元素進行移動。 *//* 如果沒有定位祖先元素，它就相對于視口進行移動。 *//* 這意味著它不再占據原來的空間。 *//* 這就是絕對定位的特點。 *//* 你可以通過調整top、left、right和bottom屬性來控制元素的位置。 */}</style><body><h1>絕對定位</h1><div class="box2"><div class="box-normal"></div><div class="box-absolute"></div><div class="box-normal"></div></div>
</body>
相對定位和絕對定位的區別
相對定位是相對于元素原來的位置進行移動，而絕對定位是相對于最近的定位祖先元素進行移動。
相對定位仍然占據原來的空間，而絕對定位不再占據原來的空間。
相對定位可以使用top、left、right和bottom屬性來控制元素的位置，而絕對定位也可以使用這些屬性來控制元素的位置。
相對定位可以使用負值來向上或向左移動元素，而絕對定位也可以使用負值來向上或向左移動元素。
相對定位可以讓元素在文檔流中保持原來的位置，而絕對定位會讓元素脫離文檔流。
3.固定定位
<style>
.box-fixed{width: 100px;height: 100px;background-color: purple;position: fixed; /* 固定定位 */top: 1000px; /* 距離視口頂部0px */right: 15px; /* 距離視口左側0px *//* 這兩個屬性可以讓元素相對于視口進行移動。 *//* 這意味著它會固定在視口的某個位置，而不是相對于父元素或最近的定位祖先元素。 *//* 這就是固定定位的特點。 *//* 你可以通過調整top、left、right和bottom屬性來控制元素的位置。 */ /* 你也可以使用負值來向上或向左移動元素。 */}
</style>
<body><h1>固定定位</h1><div class="box-fixed"></div>
</body>
