CSS3 box-sizing 灞炴


瀹炰緥

鎸囧畾涓や釜boxes鎺ュ¥锛

div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; float:left; }

灏濊瘯涓涓 禄

娴忚鍣ㄦ敮鎸

琛ㄦ牸涓殑鏁板瓧琛ㄧず鏀寔璇ュ睘鎬х殑绗竴涓祻瑙堝櫒鐗堟湰鍙枫

新快三讨论群—官方网址22270.COM绱ц窡鍦 -webkit-, -ms- 鎴 -moz- 鍓嶇殑鏁板瓧涓烘敮鎸佽鍓嶇紑灞炴х殑绗竴涓祻瑙堝櫒鐗堟湰鍙枫

灞炴
box-sizing 10.0
4.0 -webkit-
8.0 29.0
2.0 -moz-
5.1
3.2 -webkit-
9.5

灞炴у畾涔夊強浣跨敤璇存槑

box-sizing 灞炴у厑璁镐綘浠ユ煇绉嶆柟寮忓畾涔夋煇浜涘厓绱狅紝浠ラ傚簲鎸囧畾鍖哄煙銆

渚嬪锛屽亣濡傛偍闇瑕佸苟鎺掓斁缃袱涓甫杈规鐨勬锛屽彲閫氳繃灏 box-sizing 璁剧疆涓 "border-box"銆傝繖鍙护娴忚鍣ㄥ憟鐜板嚭甯︽湁鎸囧畾瀹藉害鍜岄珮搴︾殑妗嗭紝骞舵妸杈规鍜屽唴杈硅窛鏀惧叆妗嗕腑銆

榛樿鍊: content-box
缁ф壙: no
鐗堟湰: CSS3
JavaScript 璇硶: object.style.boxSizing="border-box"


璇硶

box-sizing: content-box|border-box|inherit:

璇存槑
content-box 杩欐槸 CSS2.1 鎸囧畾鐨勫搴﹀拰楂樺害鐨勮涓恒新快三讨论群—官方网址22270.COM鎸囧畾鍏冪礌鐨勫搴﹀拰楂樺害锛堟渶灏/鏈澶у睘鎬э級閫傜敤浜巄ox鐨勫搴﹀拰楂樺害銆傚厓绱犵殑濉厖鍜岃竟妗嗗竷灞鍜岀粯鍒舵寚瀹氬搴﹀拰楂樺害闄ゅ
border-box 鎸囧畾瀹藉害鍜岄珮搴︼紙鏈灏/鏈澶у睘鎬э級纭畾鍏冪礌杈规銆備篃灏辨槸璇达紝瀵瑰厓绱犳寚瀹氬搴﹀拰楂樺害鍖呮嫭浜 padding 鍜 border 銆新快三讨论群—官方网址22270.COM閫氳繃浠庡凡璁惧畾鐨勫搴﹀拰楂樺害鍒嗗埆鍑忓幓杈规鍜屽唴杈硅窛鎵嶈兘寰楀埌鍐呭鐨勫搴﹀拰楂樺害銆
inherit 鎸囧畾 box-sizing 灞炴х殑鍊硷紝搴旇浠庣埗鍏冪礌缁ф壙


鐩稿叧鏂囩珷

CSS3 鏁欑▼: CSS3 User Interface