認識盒子模型
盒子模型的組成部分
學習盒子模型的相關元素margin padding
文字溢位相關的屬性
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間，即都包含邊框、邊界、補白、內容區，這就是盒模型。
1、padding的使用方法
說明：填充：padding，在設定頁面中乙個元素內容到元素的邊緣（邊框）之間的距離。也稱補白。
用法：2、margin的使用方法
說明：邊界：margin，在元素外邊的空白區域，被稱為邊距。
margin-left：左邊界
margin-right：右邊界
margin-top：上邊界
margin-bottom：下邊界
屬性值的4種方式：
四個值：上 右 下 左
三個值：上 左右 下
二個值：上下 左右
乙個值：四個方向margin：2px；/*定義元素四邊邊界為2px*/
margin：0 auto；/*乙個有寬度的元素在瀏覽器中橫向居中*/。
定義元素上、下邊界為2px，
說明：可單獨設定一方向邊界，如：margin-top：10px；
寬=左右margin+左右border+左右padding+width，
高=左右margin+左右border+左右padding+height，
例如：乙個盒子的margin為20px，border為1px，padding為10px，content的寬為200px、高為50px，
寬=margin2+border2+content.width=202+12+102+200=262px，
高=margin2+border2+content.width=202+12+102+50=112px，
1、溢位屬性（容器的）
overflow：visible/hidden(隱藏)/scroll/auto(自動)/inherit
visible:預設值，內容不會被修建，會成現在元素框之外；
hidden：內容會被修剪，並且其餘內容是不可見的；
scroll：內容會被修剪，但是瀏覽器會顯示滾動條，以便檢視其餘的內容；
auto：如果內容被修剪，則瀏覽器會顯示滾動條，以便檢視其它的內容；
inherit：規定應該從父元素繼承overflow屬性的值。
2、空餘空間（了解）
說明：white-space：normal/nowrap/pre/pre-wrap/pre-line/inherit該屬性用來設定如何處理元素內的空白；
3、省略號顯示
說明：text-overflow：clip/ellipsis
clip:不顯示省略號（...），而是簡單的裁切；
ellipsis：當物件內文字溢位時，顯示省略標記；
text-overflow：屬性僅是...，當單行文字溢位時是否顯示省略標記，並不具備其它的樣式屬性定義。
要實現單行文字溢位時產生省略號的效果還需定義：
1、容器寬度：width：value；
2、強制文字在一行內顯示：white-space：nowrap；
3、溢位內容為隱藏：overflow：hidden；
4、溢位文字顯示省略號：text-overflow：ellipsis；
盒模型和文字溢位
如果css對html文件元素生成了乙個描述該元素在html文件布局中所佔空間的矩形元素框 element box 那麼我們可以形象的將其看做是乙個盒子 css圍繞這些盒子產生了一種 盒子模型 概念，通過定義一系列與盒子相關的屬性 內容 填充 邊框 邊界 可以控制各個盒子乃至整個html文件的表現效果...
4 css盒模型和文字溢位
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間，即都包含邊框 邊界 補白 內容區，這就是盒模型。寬 左右margin 左右border 左右padding width，高 上下margin 上下border 上下padd...
004 盒模型及文字溢位
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都以擁有可像盒子一樣的外形和平面空間，即都包含邊框 邊界 補白 內容區，這就是盒模型。填充 內邊距 padding的使用方法 填充 padding,在設定頁面中乙個元素內容到元素的邊緣 邊框 之間的距離。也稱補...