胸無大志者，必受制于人<\/div><\/body><\/html><\/pre>

<\/p>

　　在默認值(content-box)標準盒模型下，盒子被內邊距與邊框撐大了。<\/p>

div{   width:100px;   height:100px;   background:hsla(360,50%,30%,0.5);   padding:10px;   border:10px solid red;   box-sizing:border-box;}<\/pre>   

<\/p>   
　　在IE傳統(tǒng)盒模型(border-box)下，盒子大小不變。<\/p>   
　　IE6以下版本對盒模型的解析模式雖然不符合W3C的標準規(guī)范，但這種方式并不是一無是處，它也有好的一面：不管如果修改元素的邊框或者內邊距大小，都不會影響元素盒子的總尺寸，也就不會打亂頁面的整體布局。而在標準瀏覽器下，按照W3C規(guī)范對盒模型的解析，一旦修改了元素的邊框或者內邊距，就會影響元素的盒子尺寸，也就不得不重新計算元素的盒子尺寸，從而影響到整個頁面的布局。<\/p>   
overflow-x和overflow-y<\/h2>   
　　overflow屬性是css2.1規(guī)范中的特性，而在css3中增加了overflow-x和overflow-y屬性。
　　overflow-x與overflow-y主要用來定義水平或垂直方向內容溢出的效果。<\/p>   
overflow-x:visible | hidden | scroll | auto | no-display | no-contentoverflow-y:visible | hidden | scroll | auto | no-display | no-content<\/pre>   
　　visible:默認值。不裁剪內容，可能會顯示在內容框之外。
　　hidden:裁剪內容，不提供滾動機制。
　　scroll:裁剪內容，提供滾動機制。
　　auto:如果溢出框，則提供滾動機制。
　　no-display:如果內容不適合內容框，則刪除整個框。
　　no-content: 如果內容不適合內容框，則隱藏整個內容。<\/p>   
div{   width:200px;   white-space:nowrap;   overflow-x:scroll;}<\/pre>   
<\/p>   
　　overflow-x:scorll,使x軸添加了滾動機制。<\/p>   
div{   width:100px;   height:100px;   overflow-y:scroll;}<\/pre>   
<\/p>   
　　overflow-y:scorll,使y軸添加了滾動機制。<\/p>   
resize<\/h2>   
　　用來改變元素尺寸大小，主要目的是增強用戶體驗。<\/p>   
resize:none | both | horizontal | vertical | inherit<\/pre>   
　　none:用戶不能拖動元素修改尺寸大小。
　　both:用戶可以拖動元素，同時修改元素的寬度和高度。
　　horizontal:用戶可以拖動元素，僅可以修改元素的寬度。
　　vertical:用戶可以拖動元素，僅可以修改元素的高度。
　　inherit:繼承父元素的resize屬性值。<\/p>