第4天css盒模型和文本溢出

Day4：css盒模型和文本溢出 學(xué)習(xí)目標(biāo) 1、認(rèn)識盒子模型 2、盒子模型的組成部分 3、學(xué)習(xí)盒子模型的相關(guān)元素 margin padding 4、文本溢出相關(guān)的屬性 一、css屬性和屬性值的定義

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

1、padding的使用方法 說明： 填充：padding,在設(shè)定頁面中一個元素內(nèi)容到元素的邊緣(邊框) 之間的距離。 也稱補(bǔ)白。 用法： 1）用來調(diào)整內(nèi)容在容器中的位置關(guān)系 2）用來調(diào)整子元素在父元素中的位置關(guān)系。 注：padding屬性需要添加在父元素上。 3）padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉后添加的padding屬性值 屬性值的4種方式： 四個值：上 右 下 左 {padding:0px 0px 0px 40px;} 三個值：上 左右 下 {padding:10px 20px 30px ;} 二個值：上下 左右 {padding:10px 20px ;} 一個值：四個方向 padding:2px;/定義元素四周填充為2px/ 說明：可單獨(dú)設(shè)置一方向填充，如：上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px; 2、margin的使用方法 說明： 邊界：margin,在元素外邊的空白區(qū)域，被稱為邊距。 margin-left:左邊界 margin-right:右邊界 margin-top:上邊界 margin-bottom:下邊界 屬性值的4種方式： 四個值：上 右 下 左 三個值：上 左右 下 二個值：上下 左右 一個值：四個方向 margin:2px;/定義元素四邊邊界為2px/ margin:0 auto;/*一個有寬度的元素在瀏覽器中橫向居中。 定義元素上、下邊界為2px， 說明：可單獨(dú)設(shè)置一方向邊界，如：margin-top:10px; 三、盒子的實(shí)際大小

寬 =左右margin+左右border+左右padding+width， 高 =上下margin+上下border+上下padding+height， 例如：一個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px， 寬=margin2 + border2 + padding2 + content.width = 202 + 12 + 102 +200 = 262px， 高=margin2 + border2 + padding2 + content.height = 202 + 12 +102 + 50 = 112px， 四、文本溢出相關(guān)的屬性

1、溢出屬性（容器的） 說明： overflow:visible/hidden(隱藏)/scroll/auto(自動)/inherit; 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屬性的值。 2、空余空間 說明： white-space：normal/nowrap/pre/pre-wrap /pre-line /inherit 該屬性用來設(shè)置如何處理元素內(nèi)的空白； normal：默認(rèn)值，空白會被瀏覽器忽略， nowrap:文本不會換行，文本會在同一行上繼續(xù)，直到遇到 標(biāo)簽為止； pre：空白會被瀏覽器保留，其行為方式類似HTML中的pre標(biāo)簽； pre-wrap：保留空白符序列，但是正常的進(jìn)行換行； pre-line:合并空白符序列，但是保留換行符； inherit：規(guī)定應(yīng)該從父元素繼承White-space屬性的值；(ie瀏覽器不支持此屬性值) 3、省略號顯示 說明： ext-overflow:clip/ellipsis clip：不顯示省略號（...），而是簡單的裁切; ellipsis：當(dāng)對象內(nèi)文本溢出時，顯示省略標(biāo)記； 說明： text-overflow屬性僅是...，當(dāng)單行文本溢出時是否顯示省略標(biāo)記，并不具備其它的樣式屬性定義，要實(shí)現(xiàn)溢出時產(chǎn)生省略號的效果還需定義： 1、容器寬度：width：value； 2、強(qiáng)制文本在一行內(nèi)顯示:white-space：nowrap; 3、溢出內(nèi)容為隱藏：overflow：hidden； 4、溢出文本顯示省略號：text-overflow：ellipsis;

& < < ? ?