預設情況下，width和height設定的是內容盒寬高
矛盾：衡量設計稿的時候往往使用的是邊框盒，但設定weight和height，則設定的是內容盒
方法：精確計算
css3屬性：box-sizing
預設情況下，背景覆蓋邊框盒
可以通過background-clip進行修改
background-clip
:content-box
(只覆蓋內容區)、border-box
(只覆蓋邊框盒)、padding-box
(只覆蓋填充盒)
;
overflow
:hidden
(隱藏處理)、scroll
(出現滾動條)、auto
(自動處理，需要時出現，不需要時不出現)
overflow-x
(水平方向設定)
overflow-y
(豎直方向設定)
nomal:普通。cjk（中文，日文，韓文）字元（文字位置截斷），非cjk字元（單詞位置截斷）
break-all:截斷所有。所有文字都在文字處截斷（此時英文可從單詞內部截斷）
keep-all:保持所有。所有文字都在單詞之間截斷（一句話會被瀏覽器認為是乙個單詞，當出現空格時會被截斷）
模板：
white-space:nowrap;(設定不換行)
overflow:hidden;(隱藏溢位)
text-overflow:ellipsis;(溢位文字變為.)
white-space=pre;CSS盒模型及應用
注意事項 important 如果乙個盒子沒有給定寬度 高度或繼承父類的寬度 高度，盒子大小不受影響 新盒子 盒子大小就是寬度,padding width 包含在width中 box sizing border box 盒子計算尺寸 重點 box sizing content box 外盒尺寸計算 ...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
CSS 盒模型和怪異盒模型
盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係,css定義所有元素都可以擁有像盒子一樣的外形和平面空間,即都包含內容區,補白 填充,內邊距 邊框,邊界 外邊距 下面說明了盒子模型 盒模型又分為標準盒模型 w3c標準 和怪異盒模型 ie盒模型 標準盒模型與ie盒模型的區別在於寬高...