css中div块元素的width和height包括border数值吗？ CSS的border属性加上后，为什么会无缘由的增加DIV块...
DIV\u5e03\u5c40\uff0cwidth\u5305\u542bborder\u503c\u8fd8\u662f\u4e0d\u5305\u542b\uff1fwidth\u662f\u4e0d\u5305\u542bborder\u7684div\u9ed8\u8ba4border\u4e3a0 \u6240\u4ee5\u5e03\u5c40\u65f6\u6ca1\u6709border\u5c5e\u6027\u5c31\u4e0d\u7528\u8ba1\u7b97\uff0c\u4e00\u65e6\u589e\u52a0border\u5c5e\u6027 \u5982\uff1aborder:1px #000 solid;\u5e03\u5c40\u65f6\u5c31\u8981\u9ad8\u51cf2 \u5bbd\u51cf2 \u6837\u5f0f\u624d\u4f1a\u4e0d\u53d8
\u662f\u56e0\u4e3a\u4e00\u4e2acss\u8bbe\u7f6e\uff1abox-sizing
\u9ed8\u8ba4\u662fcontent-box\uff0c\u5b9e\u9645width=\u8bbe\u7f6ewidth+\u8fb9\u6846+\u95f4\u8ddd\uff0c\u800c\u5728border-box\u4e0b\uff0c\u5bbd\u5ea6\u8bbe\u7f6e\u597d\uff0c\u8fb9\u6846\u548c\u95f4\u8ddd\u4f1a\u81ea\u52a8\u8c03\u6574\u5bbd\u5ea6\uff0c\u6ee1\u8db3\u8bbe\u7f6e\u7684\u503c\u3002
\u8bed\u6cd5
box-sizing\uff1acontent-box | border-box
\u9ed8\u8ba4\u503c\uff1acontent-box
\u53d6\u503c
content-box\uff1a
padding\u548cborder\u4e0d\u88ab\u5305\u542b\u5728\u5b9a\u4e49\u7684width\u548cheight\u4e4b\u5185\u3002\u5bf9\u8c61\u7684\u5b9e\u9645\u5bbd\u5ea6\u7b49\u4e8e\u8bbe\u7f6e\u7684width\u503c\u548cborder\u3001padding\u4ee5\u53camargin\u4e4b\u548c\uff0c\u5373 ( Element width = width + border + padding+margin )
\u6b64\u5c5e\u6027\u8868\u73b0\u4e3a\u6807\u51c6\u6a21\u5f0f\u4e0b\u7684\u76d2\u6a21\u578b\u3002
border-box\uff1a
padding\u548cborder\u88ab\u5305\u542b\u5728\u5b9a\u4e49\u7684width\u548cheight\u4e4b\u5185\u3002\u5bf9\u8c61\u7684\u5b9e\u9645\u5bbd\u5ea6\u5c31\u7b49\u4e8e\u8bbe\u7f6e\u7684width\u503c\uff0c\u5373\u4f7f\u5b9a\u4e49\u6709border\u548cpadding\u4e5f\u4e0d\u4f1a\u6539\u53d8\u5bf9\u8c61\u7684\u5b9e\u9645\u5bbd\u5ea6\uff0c\u5373 ( Element width = width )
\u53c2\u8003\u767e\u5ea6\u767e\u79d1\uff1ahttp://baike.baidu.com/link?url=gAYu8r1bOOTURx9cwRl_ltLeEisHwww-TWvOxngNc5gWS_bCl0pE869koc1s2xGVISwuOObHYNWa3Gy0FQYBuq
元素的宽跟高和元素的border是没有关系的，在border在多元素的宽高值依旧不会变化，你穿的再多，你的净重依旧还是不会变化的，买个猪肉还要去个毛！
看下盒模型吧
是你说的后一种，320 和220
绛旓細CSS鍙互灏嗘牱寮忓畾涔夊湪HTML鍏冪礌鐨style灞炴т腑锛屼篃鍙互灏嗗叾瀹氫箟鍦℉TML鏂囨。鐨刪eader閮ㄥ垎锛屼篃鍙互灏嗘牱寮忓０鏄庡湪涓涓笓闂鐨凜SS鏂囦欢涓紝浠ヤ緵HTML椤甸潰寮曠敤銆傛讳箣锛孋SS鏍峰紡琛ㄥ彲浠ュ皢鎵鏈夌殑鏍峰紡澹版槑缁熶竴瀛樻斁锛岃繘琛岀粺涓绠＄悊銆傚彟澶栵紝鍙互灏嗙浉鍚屾牱寮忕殑鍏冪礌杩涜褰掔被锛屼娇鐢ㄥ悓涓涓牱寮忚繘琛屽畾涔夛紝涔熷彲浠ュ皢鏌愪釜鏍峰紡搴旂敤鍒版墍鏈夊悓鍚嶇殑...
绛旓細CSS鍙互灏嗘牱寮忓畾涔夊湪HTML鍏冪礌鐨style灞炴т腑锛屼篃鍙互灏嗗叾瀹氫箟鍦℉TML鏂囨。鐨刪eader閮ㄥ垎锛屼篃鍙互灏嗘牱寮忓０鏄庡湪涓涓笓闂鐨凜SS鏂囦欢涓紝浠ヤ緵HTML椤甸潰寮曠敤銆傛讳箣锛孋SS鏍峰紡琛ㄥ彲浠ュ皢鎵鏈夌殑鏍峰紡澹版槑缁熶竴瀛樻斁锛岃繘琛岀粺涓绠＄悊銆傚彟澶栵紝鍙互灏嗙浉鍚屾牱寮忕殑鍏冪礌杩涜褰掔被锛屼娇鐢ㄥ悓涓涓牱寮忚繘琛屽畾涔夛紝涔熷彲浠ュ皢鏌愪釜鏍峰紡搴旂敤鍒版墍鏈夊悓鍚嶇殑...
绛旓細html浠ｇ爜锛<div id="ID">姝ゅ涓哄睆骞曞搴︿负414涓900涔嬮棿鐨勫睍绀烘牱寮<div> 杩欐牱灏卞彲浠ユ牴鎹笉鍚岀殑灞忓箷澶у皬缁欏搴鐨刣iv娣诲姞涓嶅悓鐨勬牱寮忎簡銆備絾鏄敤js鏈変竴涓己鐐瑰氨鏄鏋滀綘鍦1400灞忓箷娣诲姞瀵瑰簲鐨刢lass涔嬪悗锛屽鏋滀綘姝ゆ椂缂╁皬绐楀彛锛屾牱寮忎緷鐒惰繕鏄1400鐨勶紝闄ら潪閲嶆柊鍒锋柊椤甸潰銆傚洜涓簀s鍙兘鎵ц涓娆★紝涓嶈兘鍗虫椂鍒锋柊娓叉煋椤甸潰銆
