盒模型

　　盒模型是css布局的基石，它規(guī)定了網(wǎng)頁元素如何顯示以及元素間相互關(guān)系。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內(nèi)容區(qū)、補(bǔ)白(填充)、邊框、邊界(外邊距)這就是盒模型。

　　PADDING

　　MARGIN

　　盒子大小計(jì)算

　　文本溢出

　　overflow

　　visible:默認(rèn)值，內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外;

　　hidden：內(nèi)容會被修剪，并且其余內(nèi)容是不可見的;

　　scroll：內(nèi)容會被修剪，但是瀏覽器會顯示滾動條，以便查看其余的內(nèi)容;

　　auto：如果內(nèi)容被修剪，則瀏覽器會顯示滾動條，以便查看其他的內(nèi)容;

　　inherit：規(guī)定應(yīng)該從父元素繼承overflow屬性的值。

　　white-space

　　normal：默認(rèn)值，多余空白會被瀏覽器忽略只保留一個;

　　pre：空白會被瀏覽器保留;

　　pre-wrap：保留一部分空白符序列，但是正常的進(jìn)行換行;

　　pre-line:合并空白符序列，但是保留換行符;

　　nowrap:文本不會換行，文本會在同一行上繼續(xù)，直到遇到
標(biāo)簽為止;

　　text-overflow

　　clip：不顯示省略號(...)，而是簡單的裁切;

　　ellipsis：當(dāng)對象內(nèi)文本溢出時，顯示省略標(biāo)記;

　　文本溢出變省略號設(shè)置

　　省略號設(shè)置：

　　text-overflow屬性僅是：當(dāng)文本溢出時是否顯示省略標(biāo)記，并不具備其它的樣式屬性定義，要實(shí)現(xiàn)溢出時產(chǎn)生省略號的效果還需定義：

　　1、容器寬度：width：value;(px、%，都可以)

　　2、強(qiáng)制文本在一行內(nèi)顯示:white-space：nowrap;

　　3、溢出內(nèi)容為隱藏：overflow：hidden;

　　4、溢出文本顯示省略號：

　　text-overflow：ellipsis;

　　注：必須是單行文本才能設(shè)置本文溢出!!!