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; 顯示不全的地方使用...代替
CSS 盒模型應用
預設情況下，width和height設定的是內容盒寬高 矛盾 衡量設計稿的時候往往使用的是邊框盒，但設定weight和height，則設定的是內容盒 方法 精確計算 css3屬性 box sizing 預設情況下，背景覆蓋邊框盒 可以通過background clip進行修改 background ...
css 行內 塊級 盒模型
行內元素 a span strong img input select 和其他元素都在一行上 高，行高及頂和底邊距不可改變 寬度就是它的文字或的寬度，不可改變。塊級元素 h1 h6 div p ul ol li dl dt dd 總是在新行上開始 高度，行高以及頂和底邊距都可控制 寬度預設是它的容器...
CSS 盒模型（側重於塊盒）
可以把盒模型看成乙個手機盒子 box 盒子，每個元素在頁面中都會生成乙個矩形區域 盒子 盒子型別 1.行盒 display等於inline 預設值 的元素 2.塊盒 display等於block的元素 行盒在頁面中不換行，塊盒獨佔一行 瀏覽器預設樣式表設定的塊盒 容器元素 h1 h6 p 常見的行盒...