css3 box-sizing屬性
翻譯結果:
box
英[bɒks] 美[bɑ:ks]
n.盒;箱狀物;包廂;哨房
vt.把…裝入盒子[箱,盒子]中
vt.& vi. 拳擊
第三人稱單數:boxes 複數: boxes 現在分詞: boxing 過去式:boxed 過去分詞: boxed
sizing
英['saɪzɪŋ] 美['saɪzɪŋ]
n.分選;膠料;渣磨;依尺寸加工渣磨;依尺寸加工
css3 box-sizing屬性語法
作用:讓您以確切的方式定義適應某個區域的具體內容。
說明:Internet Explorer、Chrome、Safari 以及 Opera 支援 box-sizing 屬性。 Firefox 需要前綴 -moz-。
css3中的box-sizing屬性允許以特定的方式定義符合某個區域的特定元素,它有兩個值分別為content-box表示實際寬度為width與border、padding總和;border -box表示實際寬度等於width值
css3 box-sizing屬性範例
<!DOCTYPE html> <html> <head> <style> div.container { width:30em; border:1em solid; } div.box { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; border:1em solid red; float:left; } </style> </head> <body> <div class="container"> <div class="box">这个 div 占据左半部分。</div> <div class="box">这个 div 占据右半部分。</div> </div> </body> </html>
執行實例 »
點擊 "執行實例" 按鈕查看線上實例