（6）css盒子模型（基礎下）

一、理解多個盒子模型之間的相互關係

現在大部分的網頁都是很複雜的，原因是乙個「給人用的」網頁中是可能存在著大量的盒子，並且它們以各種關係相互影響著。

html與dom的關係

詳情了解「dom」 ：

dom 是 document object model（文件物件模型）的縮寫。「乙個網頁的所有元素組織在一起，就構成一顆dom樹。」

（html dom 節點樹）

html dom 將 html 文件視作樹結構。這種結構被稱為節點樹：

dom樹結構關係

上面所有的節點彼此間都存在關係。

除文件節點之外的每個節點都有父節點。舉例，div標記自動換行

第一章第二章

第三章span標記同一行

第四章第五章

第六章div標記自動換行

span標記同一行

效果圖：

4、盒子在標準流中的定位原則

若想精確地控制盒子的位置，那麼必須深入了解margin元素；margin元素是用於調整不同盒子之間的位置關係。

（1）、行內元素之間的水平margin

當兩個行內元素緊鄰時，他們之間的距離是第乙個
行內元素的margin-right加上第二個行內元素的margin-left。

**：

行內元素1

行內元素2

效果圖：

（2）、塊級元素之間的豎直margin兩個元素的之間的距離不是margin-bottom加margin-top的總和，而是兩者中的較大者。

**：

第乙個塊級元素

第二個塊元素

（3）、巢狀盒子之間的margin

當乙個塊包含在另乙個塊中時，便形成了典型的父子關係。其中兒子塊的margin將以父塊的內容為參考。

在標準流中，乙個塊級元素的盒子水平方向的寬度會自動延伸，直至上一級盒子的限制位置。
案例：

子div

效果圖：

以上第二節所介紹的是標準流中的盒子排列方式。

以上內容部分來自http：

css盒子模型 CSS 盒子模型

css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...

CSS基礎 盒子模型

width和height指內容區域的寬度和高度 元素實際寬度 左右外邊距 左右邊框 左右內邊框 width 元素實際高度 上下外邊距 上下邊框 上下內邊距 height 定義元素的寬和高需要使用下面屬性 1 width寬度 height高度 固定的寬度和高度，當內容超出寬度和高度之後，不會自動填充擴...

CSS基礎6之盒子模型1

盒子概述 以下是盒子模型的乙個圖形解釋 一 內邊距 填充 屬性有 1 padding 設定所有內邊距 2 padding top 設定上邊距 3 padding left 設定左邊距 4 padding right 設定右邊距 5 padding bottom 設定底邊距 如果在設定時 paddin...