CSS學習（9）塊盒模型應用

1.改變寬高範圍

默認狀況下，width和height設置的是內容盒的寬高

頁面重構師：將psd文件（設計稿）製做爲靜態頁面

衡量設計稿尺寸的時候，每每使用的是邊框盒

CSS3中 box-sizing 可設置width height的設置對象，如contant-box  border-box

2.改變背景覆蓋範圍

默認狀況下，背景大小和邊框盒同樣大

可經過background-clip進行更改範圍大小

3.溢出處理

當內容過多超出盒子時，使用overflow處理

值：hidden 溢出部分隱藏

　　scroll 使用滾動條

　　overflow-x：scroll  或   overflow-y：scroll

　　auto 須要時纔出現滾動條

4.斷詞規則

word-break，會影響文字在什麼位置被截斷換行

normal：普通。CJK(中日韓)字符（文字位置截斷），非CJK字符（單詞位置截斷）

break-all：全部文字都在文字位置截斷（英文單詞字母會被截斷）

keep-all：全部文字都在單詞之間截斷（中文沒有空格，標點符號的話，就不會被截斷）

5.空白處理

white-space:nowrap;  不換行

overflow:hidden;  溢出部分隱藏

text-overflow:ellipsis;  顯示不全的地方使用...代替