一、盒模型的概念
html的布局類似盒子模型，直觀理解如下圖：
簡單介紹：
margin是相鄰div之間的間距，影響的是不同塊元素的之間的位置；
border是div盒模型的盒邊框，分別有三個要素：邊框厚度反應的是邊框大小，邊框風格即邊框樣式（實線，虛線，點線等等），邊框顏色color；
padding內邊框厚度，這個值主要控制div內容的縮減程度，其顏色跟隨div背景顏色。
**示例：
盒子的border三要素 寬,樣式,顏色
實線效果截圖:
二、css控制div的邊框畫三角形
示例**：
效果截圖：
練習：嘗試用css控制margin,border布局，畫出簡單的聖誕樹
示例**：
效果圖：
三、padding詳解
示例**：
《三體》三部曲，又名「地球往事」三部曲，作者劉慈欣。該系列**由《三體》、《黑暗森林》、《死神永生》三部**組成，於2023年至2023年由《科幻世界》雜誌**，出版。
《三體》三部曲講述了地球文明和三體文明在宇宙中的興衰歷程。作品對人類歷史、物理學、天文學、社會學及哲學等均有涉及，從科幻的角度對人性進行了深入**，全書格局巨集大，立意高遠，被譽為迄今為止中國當代最傑出的科幻**，是中國科幻文學的里程碑之作，將中國科幻推上了世界的高度。
2023年底**第一部的英文版在美國上市，反響熱烈，[1] 並於2023年獲得美國科幻奇幻協會「星雲獎」等五個獎項提名。[2] 2023年8月23日，《三體》獲第73屆世界科幻大會頒發的雨果獎最佳長篇**獎[3] ，這是亞洲科幻**首次獲得雨果獎。[4] 10月，作者劉慈欣因該作獲得全球華語科幻文學最高成就獎。
效果圖：
以上效果圖1、2、3、4處畫素分別是10px,20px,30px,40px
一半div增加了padding值，整體變大
示例**：
hello world
效果圖：
說明：div大小為200px*200px；
border邊框寬度為10px，邊框樣式為藍色實線；
div背景顏色為灰色
padding內邊距為20px，顏色跟隨div背景色
四、實戰首頁布局示例（運用padding對文中縮排進行優化）
示例**：
《三體》三部曲，又名「地球往事」三部曲，作者劉慈欣。該系列**由《三體》、《黑暗森林》、《死神永生》三部**組成，於2023年至2023年由《科幻世界》雜誌**，出版。
《三體》三部曲講述了地球文明和三體文明在宇宙中的興衰歷程。作品對人類歷史、物理學、天文學、社會學及哲學等均有涉及，從科幻的角度對人性進行了深入**，全書格局巨集大，立意高遠，被譽為迄今為止中國當代最傑出的科幻**，是中國科幻文學的里程碑之作，將中國科幻推上了世界的高度。
2023年底**第一部的英文版在美國上市，反響熱烈，[1]
並於2023年獲得美國科幻奇幻協會「星雲獎」等五個獎項提名。[2] 2023年8月23日，《三體》獲第73屆世界科幻大會頒發的雨果獎最佳長篇**獎[3]
2023年8月23日，《三體》獲第73屆世界科幻大會頒發的雨果獎最佳長篇**獎[3] ，這是亞洲科幻**首次獲得雨果獎。[4] 10月，作者劉慈欣因該作獲得全球華語科幻文學最高成就獎。
效果圖：
五、盒子模型的總結
1、盒子與盒子之間距離優先用margin,盒子與文字之間的距離優先用padding
2、盒子的實際佔據空間大小：
豎直方向上：height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottomm
水平方向上：width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
六、利用margin實現元素的水平居中
示例**：
效果圖：
七、margin重疊現象研究(暫不含父子div的margin重疊現象)
結論：上下相鄰的普通元素，上下邊距並非是簡單的相加，而是取其中較大的邊距值，這種現象叫做margin重疊。
示例**：
上下相鄰的普通元素，上下邊距並非是簡單的相加，
而是取其中較大的邊距值
這種現象叫做margin重疊。
效果圖:
八、內聯元素（行內元素）
內聯元素小結：因為是行內元素，所以受到行的限制，在豎直方向上的margin和padding設定了都將沒有效果。
目的：修改古詩中的「小荷」字型顏色為紅色。
示例**：
泉眼無聲惜細流，
樹陰照水愛晴柔。
小荷才露尖尖角，
早有蜻蜓立上頭。
效果圖：
九、塊元素與內聯元素的區別
獨佔一行
能設寬高
豎直方向的margin,padding
塊元素是
是有，可以設定
內聯元素否否
沒有，也不能設定
十、內聯與塊狀元素的轉化
display:inline; 轉為內聯元素
display:block;轉為塊狀元素
display:none;沒有
示例**：
塊狀行內
效果圖：
CSS自學5 盒模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model 中的任意一屬性...
標準盒模型 怪異盒模型 彈性盒模型
box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...