<sup id="4wiss"></sup>

胸?zé)o大志者，必受制于人<\/div><\/body><\/html><\/pre>

<\/p>

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