本文為個人學習總結，如有謬誤歡迎指正。前端知識眾多，后續將繼續記錄其他知識點！
目錄
前言
一、組成
?編輯content
padding
border
margin
margin塌陷
margin合并
使用場景
標題與段落間距
卡片列表布局
二、內容溢出—overflow
三、隱藏元素
visibility
display
塊元素（塊級元素）—block
行內元素（內聯元素）—inline
行內塊元素（內聯塊元素）—inline-block
修改顯示模式
使用場景
(1) 行內元素適用場景
(2) 塊級元素適用場景
(3) 行內塊級元素適用場景
前言
例如：隨著人工智能的不斷發展，機器學習這門技術也越來越重要，很多人都開啟了學習機器學習，本文就介紹了機器學習的基礎內容。在網頁布局與設計中，盒子模型是最為核心和基礎的概念之一，它支撐起整個網頁的結構框架。理解盒子模型的組成、內容溢出的處理方式以及元素隱藏的實現方法，是掌握網頁布局技巧、打造美觀且功能完善的網頁界面的關鍵。本文介紹盒子模型的組成要素（包括content、padding、border、margin）、內容溢出時的處理屬性overflow，以及隱藏元素的常用方法（visibility和display）。希望這份筆記能為同樣正在學習CSS的同學提供參考，也歡迎大家結合原課程視頻深入學習，共同進步。
網課鏈接： https://www.bilibili.com/video/BV1p84y1P7Z5/?share_source=copy_web&vd_source=faad59aa4025692c65fca19bc4320e39
一、組成
CSS會把所有的HTML元素都看成一個盒子，所有的樣式也都是基于這個盒子。
1.margin（外邊距）：盒子與外界的距離。
2.border（邊框）：盒子的邊框。
3.padding（內邊距）：緊貼內容的補白區域。
4.content（內容）：元素中的文本或后代元素都是它的內容。
- 盒子的大小=content+左右padding+左右border
- 外邊距不影響盒子的大小，會影響盒子的位置（看是否給盒子指明width）
- 只寫height和width的值，表明的是content的大小
- 背景色也會填充邊框區域
content
拉動瀏覽器顯示時最大/小寬度和高度
默認寬度，不設置width屬性時，元素呈現的寬度—與父元素有關（子元素要出現在父元素的content區）
- 總寬度=父的content-自身左右的margin
- 內容區的寬度=父的content-自身左右的margin-自身左右的border-自身·左右的padding
padding
padding復合屬性的使用規則：
1.padding:10px;四個方向內邊距都是10px。
2.padding:10px 20px；上下10px，左右20px。（上下、左右）
3.padding:10px 20px 30px;：上10px，左右20px，下30px。（上、左右、下）4.padding:10px 20px 30px 40px;上10px，右20px，下30px，左40px。（上、右、下、左）—順時針
- 值不能為負數
- 行內元素左右邊距沒問題，上下邊距不能完美設置
- 塊級元素，行內塊元素，四個方向內邊距都可以完美設置
border
| 屬性 | 作用 | 屬性值 |
|
| 符合屬性，簡寫所有邊框屬性 | 基本是width，color，style 值沒有順序要求
|
|
| 設置邊框寬度 復合四個方向的邊框寬度 | 長度，默認3px
|
|
| 定義邊框風格 復合四個方向的邊框風格 | none：默認值 solid：實線邊框線風格dashed：虛線 dotted：點線 double：雙實線 。。。。
|
|
| 設置邊框顏色 復合四個方向的邊框顏色 | 顏色，默認黑色
|
|
border-left border-left-style border-left-width border-left-color border-right border-right-style border-right-width border-right-color border-top border-top-style border-top-width border-top-color border-bottom border-bottom-style border-bottom-width border-bottom-color | 設置邊框某一邊 每一個 | 同上 border-top: 1px solid black; /* 上邊框 */ border-right: 2px dashed red; /* 右邊框 */ border-bottom: 3px dotted blue; /* 下邊框 */ border-left: none; /* 左邊框無 */ |
|
| 圓角邊框 |
分角設置 border-radius: 10px 5px 20px 0; /* 左上 右上 右下 左下 */ button { border: 2px solid #333; border-radius: 8px; /* 圓角按鈕 */ } |
|
| 邊框陰影 |
|
透明邊框技巧
通過 transparent 實現占位或懸停效果：
.box {border: 2px solid transparent; /* 初始透明 */
}
.box:hover {border-color: gold; /* 懸停時顯示 */
}- border-style、border-width、border-color其實也是復合屬性。
margin
margin復合屬性的使用規則：
1.margin:10px;四個方向內邊距都是10px。
2.margin:10px 20px；上下10px，左右20px。（上下、左右）
3.margin:10px 20px 30px;：上10px，左右20px，下30px。（上、左右、下）4.margin:10px 20px 30px 40px;上10px，右20px，下30px，左40px。（上、右、下、左）—順時針
注意
- 父親的content中承裝著子元素，子元素要出現在父元素的內容區，所以子元素的margin是參考父元素的content計算的
- margin-top，margin-left會影響自身位置；margin-bottom，margin-right會影響兄弟元素位置
- 塊級元素，行內塊元素，四個方向內邊距都可以完美設置；行內元素，左右margin是可以完美設置的，但是上下margin不能設置（設置后無效）
- margin值可以為auto；塊級元素，margin-left，margin-right可以設置為auto，呈現其在父元素內水平居中；但是margin-top，margin-bottom不能設置auto（margin：0px auto）
- 值可以是負數，兩個盒子層疊
margin塌陷
第一個子元素的上margin會作用在父元素上，最后一個子元素的下margin會作用在父元素上。
解決方法
-
方案一：給父元素設置不為0的padding。
-
方案二：給父元素設置寬度不為0的border。（例如border：1px solid grey）
-
方案三：給父元素設置css樣式overflow：hidden（不影響父元素容器的大小）
-
使用overflow屬性控制溢出的部分，把溢出的部分隱藏（hidden）
-
margin合并
上面兄弟元素的下外邊距和下面兄弟元素的上外邊距會合并，取一個最大的值，而不是相加。當兩個或多個垂直相鄰的塊級元素的上下外邊距相遇時，它們會合并成一個外邊距，其大小為兩者中的較大者。這種現象僅發生在垂直方向，水平方向的外邊距不會合并。（行內元素的垂直方向由內容撐開，不能設置上下margin，不會發生外邊距合并）
解決方案：無需解決，布局的時候上下的兄弟元素，只給一個設置上下外邊距（希望上下間距多少就設置多少，不必拆分成上margin與下margin）就可以了。
使用場景
標題與段落間距
<h2 style="margin-bottom: 20px;">標題</h2>
<p style="margin-top: 15px;">正文內容</p>
<!-- 實際間距：20px -->優化：統一使用 margin-bottom 或 margin-top 避免混亂。
卡片列表布局
<div class="card" style="margin-bottom: 16px;">卡片1</div>
<div class="card" style="margin-top: 16px;">卡片2</div>
<!-- 實際間距：16px（非32px） -->解決：僅對卡片設置 margin-bottom。
二、內容溢出—overflow
內容溢出是指當元素的內容（文本、圖片、子元素等）超出其指定的寬度或高度時，內容超出容器邊界的現象。
- visible 默認值，內容溢出容器并顯示在容器外 需要完全展示內容（可能破壞布局）
- hidden 隱藏溢出部分 裁剪多余內容（如頭像圓形遮罩）
三、隱藏元素
visibility
visibility屬性默認值是show，如果設置為hidden，元素會隱藏。元素看不見了，還占有原來的位置（元素的大小依然保持）。
display
設置display：none，就可以讓元素隱藏。徹底地隱藏，不但看不見，也不占用任何位置，沒有大小寬高。display的值還可以控制是塊級元素/行內元素/行內塊級元素
塊元素（塊級元素）—block
- 頁面中獨占一行，不會與任何元素共用一行，是從上到下排列的。
- 默認寬度：撐滿父元素。
- 默認高度：由內容撐開。
- 可包含行內和塊級元素
- 獨占一行（前后自動換行）
- 可以通過CSS設置寬高。
- 主體結構標簽：<html> 、<body>
- 排版標簽：<h1>~<h6>、<p>、<hr>、<pre><div>
- 列表標簽：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
- 表格相關標簽：<table>、<tbody>、<thead>、<tfoot>、<tr><caption>
- 表單<form>與下拉框選項<option>（下拉框slect是行內塊元素）
行內元素（內聯元素）—inline
- 在頁面中不獨占一行（多個可并列），一行中不能容納下的行內元素，會在下一行繼續從左到右排列。
- 默認寬度：由內容撐開。
- 默認高度：由內容撐開。
- 不能包含塊級元素
- 不換行，與其他行內元素同行
- 無法通過CSS設置寬高。
- 文本標簽：換行/另起一行<br>、強調<em>、強調<strong>、文本上標<sup>、文本下標<sub>、表刪除文本<del>、表新增文本<ins>
- 超鏈接<a>與表單控件關聯<label>
注（這些都是邏輯上標簽，視覺效果可用css更改）；
行內塊元素（內聯塊元素）—inline-block
- 頁面中不獨占一行，一行中不能容納下的行內元素，會在下一行繼續從左到右排列。
- 默認寬度：由內容撐開。
- 默認高度：由內容撐開。
- 不換行，但可設置寬高
- 可包含行內和塊級元素（和塊元素相同；其余同行內元素）
- 可以通過CSS設置寬高（和塊元素相同；其余同行內元素）
- ???????圖片：<img>
- 單元格：<td>、<th>
- 表單控件：<input>、<textarea>、<select>、<button>
- 框架標簽：<iframe>
注意：元素在html中只分為：行內元素、塊級元素，區分條件也只有一條：“是否獨占一行”，如果按照這種分類方式，行內塊元素應該算作行內元素。
修改顯示模式
通過 display 屬性可改變元素的默認行為：
span { display: block; } /* 行內 → 塊級 */
div { display: inline; } /* 塊級 → 行內 */
a { display: inline-block; } /* 行內 → 行內塊級 */
p { display: none; } /* 元素會被隱藏，并且頁面將顯示為好像該元素不在其中 */使用場景
(1) 行內元素適用場景
- 文本修飾（如加粗
<strong>、斜體<em>）。 - 包裹少量文字或圖標（如
<span>、<a>）。
(2) 塊級元素適用場景
- 頁面布局容器（如
<div>、<section>）。 - 結構性內容（如段落
<p>、標題<h1>）。
(3) 行內塊級元素適用場景
- 水平排列但需控制尺寸的組件（如按鈕
<button>、輸入框<input>）。 - 圖文混排時對齊（如
vertical-align: middle）
