盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都以擁有可像盒子一樣的外形和平面空間，即都包含邊框、邊界、補白、內容區，這就是盒模型。padding的使用方法
填充：padding,在設定頁面中乙個元素內容到元素的邊緣(邊框) 之間的距離。 也稱補白。
用法： 1）用來調整子元素在父元素中的位置關係。
注：padding屬性需要新增在父元素上。
2）padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉後新增的padding屬性值。
屬性值的4種方式：
四個值：上 右 下 左
三個值：上 左右 下
二個值：上下 左右
乙個值：四個方向 padding:2px;/*定義元素四周填充為2px*/
說明： 可單獨設定一方向填充，如：
上方向padding-top:10px;
右方向pahdding-right:10px;
下方向padding-bottom:10px;
左方向padding-left:10px;
外邊距margin的使用方法
邊界：margin,在元素外邊的空白區域，被稱為邊距。
margin-left:左邊界
margin-right:右邊界
margin-top:上邊界
margin-bottom:下邊界
屬性值的4種方式：
四個值：上 右 下 左
三個值：上 左右 下
二個值：上下 左右
乙個值：四個方向
margin:2px;/*定義元素四邊邊界為2px*/
margin:2px 4px;/*定義元素上下邊界為2px，左右邊界為4px/
margin:2px 4px 6px;/*定義元素上邊界為2px，左右邊界4px下邊界為6px，*/
margin:2px 4px 6px 8px;/*定義元素上、右邊界為2px，下右邊界為6px，左邊界為8px*/
margin:0 auto;/*在瀏覽器中橫向居中。*/
說明：可單獨設定一方向邊界，如：margin-top:10px;
*margin值的解析：左右邊界累加，上下邊界重合。
*子元素（塊）直接寫margin-top時，會將margin-top屬性值加上父元素身上,(不設定任何浮動及定位的屬性的前提下)
邊框border的使用方法
border:邊框寬度 邊框風格 邊框顏色;
例如：border:5px solid #f00
邊框：border,網頁中很多修飾性線條都是由邊框來實現的。
邊框寬度：border-width:
邊框顏色：border-color:
邊框樣式：border-style:solid(實線)/dashed(虛線)dotted(點劃線)double(雙線)
可單獨設定一方向邊框，
如：border-bottom:邊框寬度 邊框風格 邊框顏色;底邊框
border-left:邊框寬度 邊框風格 邊框顏色;左邊框
border-right:邊框寬度 邊框風格 邊框顏色;右邊框
border-top:邊框寬度 邊框風格 邊框顏色;上邊框
盒子的實際大小
1）盒子的實際大小：
寬 =左右border+左右padding+width
高 =上下border+上下padding+height
例如：乙個盒子的 border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px
寬= border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px
高= border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px
overflow:visible/hidden(隱藏)/scroll/auto(自動)/inherit;
visible:預設值，內容不會被修剪，會成現在元素框之外；
hidden：內容會被修剪，並且其餘內容是不可見的；
scroll：內容會被修剪，但是瀏覽器會顯示滾動條，以便檢視其餘的內容;
auto：如果內容被修剪，則瀏覽器會顯示滾動條，以便檢視其他的內容;
inherit：規定應該從父元素繼承overflow屬性的值。
white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit
該屬性用來設定如何處理元素內的空白；
normal：預設值，空白會被瀏覽器忽略，
pre：空白會被瀏覽器保留，其行為方式類似html中的pre標籤；
nowrap:文字不會換行，文字會在同一行上繼續，直到遇到
標籤為止；
pre-wrap：保留空白符序列，文字超出邊界時會正常換行；
pre-line:合併空白符序列，但是保留換行符；
inherit：規定應該從父元素繼承white-space屬性的值；(ie瀏覽器不支援此屬性值)
盒模型和文字溢位
如果css對html文件元素生成了乙個描述該元素在html文件布局中所佔空間的矩形元素框 element box 那麼我們可以形象的將其看做是乙個盒子 css圍繞這些盒子產生了一種 盒子模型 概念，通過定義一系列與盒子相關的屬性 內容 填充 邊框 邊界 可以控制各個盒子乃至整個html文件的表現效果...
CSS盒模型和文字溢位
認識盒子模型 盒子模型的組成部分 學習盒子模型的相關元素margin padding 文字溢位相關的屬性 盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間，即都包含邊框 邊界 補白 內容區，這就是盒模型。1 padding...
4 css盒模型和文字溢位
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間，即都包含邊框 邊界 補白 內容區，這就是盒模型。寬 左右margin 左右border 左右padding width，高 上下margin 上下border 上下padd...