如果css對html文件元素生成了乙個描述該元素在html文件布局中所佔空間的矩形元素框（element box），那麼我們可以形象的將其看做是乙個盒子
css圍繞這些盒子產生了一種「盒子模型」概念，通過定義一系列與盒子相關的屬性（內容、填充、邊框、邊界），可以控制各個盒子乃至整個html文件的表現效果和布局結構。
雖然css中沒有盒子這個單獨的屬性物件，但它卻是css中無處不在的乙個重要組成部分
css盒模型具備：內容（content）、填充（padding）、邊框（border）、邊界（margin）這些屬性
怎麼理解這幾個屬性呢?
邊框：可以理解為是盒子本身
內容： 盒子裡裝的東西
填充： 內容與邊框之間的填充物
邊界： 盒子與盒子之間的空隙，或者是大盒子與之內的小盒子之間的空隙
可用來調整內容在容器中位置關係
用來調整子元素在父元素中的位置關係。（padding需要新增在父元素上）
pdding值是額外加在元素原有大小之上的，如想保證元素大小不變，需減掉padding屬性
系統會為某些元素設定預設的margin或padding，可先清掉所有元素的margin padding值
相鄰兄弟元素在垂直方向上的margin值會出現融合的情況，融合後取兩個元素裡較大的值作為融合後的值
當父級子級元素都設定了margin時，自己的margin值會傳遞到父級。可給父級使用overflow：hidden屬性避免
overflow屬性：定義溢位元素內容區的內容會如何處理
【語法】：overflow:vosoble/hidden/scroll/auto/inherit
【說明】：
visible：預設值，內容不會被修剪，會出現在元素框之外；
hidden：內容會被修剪，並且其餘內容是不可見的；
scroll：內容會被修剪，但瀏覽器會顯示滾動條，以便檢視其餘的內容；
auto：如果內容被修剪，則瀏覽器會顯示滾動條，以便檢視其他的內容
inherit：規定應該從父元素繼承overflow屬性的值
white-space屬性：設定如何處理元素內的空白
【語法】：white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit
【說明】：
normal:預設。空白會被瀏覽器忽略
pre：空白會被瀏覽器保留
nowrap：文字不會換行，文字會在同一行上繼續，直到遇到
標籤pre-wrap：保留空白符序列，但是正常的進行換行
pre-line：合併空白符序列，但是保留換行符
inherit：規定應該從父元素繼承****e-space屬性的值
text-overflow屬性：當文字溢位包含元素時發生的事情
【語法】：text-overflow:clip/ellopsis;
【說明】：
clip:不顯示省略號，而是簡單的裁剪
ellipsis：當物件內文字溢位時，顯示省略標記
【注】：一般設計網頁都用背景圖方法當前面的序號
用padding position等元素實現
CSS盒模型和文字溢位
認識盒子模型 盒子模型的組成部分 學習盒子模型的相關元素margin padding 文字溢位相關的屬性 盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間，即都包含邊框 邊界 補白 內容區，這就是盒模型。1 padding...
4 css盒模型和文字溢位
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間，即都包含邊框 邊界 補白 內容區，這就是盒模型。寬 左右margin 左右border 左右padding width，高 上下margin 上下border 上下padd...
004 盒模型及文字溢位
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都以擁有可像盒子一樣的外形和平面空間，即都包含邊框 邊界 補白 內容區，這就是盒模型。填充 內邊距 padding的使用方法 填充 padding,在設定頁面中乙個元素內容到元素的邊緣 邊框 之間的距離。也稱補...