.box{width:100px;楂樺害锛?00px锛涘瓧浣撳ぇ灏忥細20px锛涚┖鐧斤細nowrap锛涚孩鑹?鑳屾櫙锛氶粦鑹诧紱杈规锛?0px绾摑鑹诧紱/*10cm娉℃搏鏉?/padding:10px;}鍓嶈█锛氬湪鍏徃鐨勭Щ鍔ㄧ椤圭洰涓紝缁忓父闇€瑕佸鐞咲OM鍏冪礌鐨勫悇绉嶅楂樸€備絾鏄繖閲屾湁閭ｄ箞澶氬叧浜巜idth鐨勫睘鎬э紝瀹冧滑涔嬮棿鏈変粈涔堝尯鍒憿锛熻繖鏄垜鍒氭帴瑙︾Щ鍔ㄧ椤圭洰鏃堕潪甯稿ご鐤肩殑闂銆傜粡杩囧嚑澶╃殑鐮旂┒锛岀粓浜庢悶娓呮浜嗚繖鍑犱釜鐨勫尯鍒紝鎵€浠ユ潵鍒嗕韩涓€涓嬨€俆ips锛氭湰鏂囨棬鍦ㄨ澶у閫氳繃鑱旀兂鏉ヨ浣忚繖浜涘睘鎬х殑鍖哄埆锛岃€屼笉鏄畝鍗曞湴琛ㄨ揪瀹冧滑鐨勬蹇靛樊寮傦紝鎵€浠ョ瘒骞呬細姣旇緝闀匡紝甯屾湜璇昏€呰€愬績闃呰鈽曪笍銆?.鍓嶆湡鍑嗗鍦ㄥ涔犺繖浜涙蹇典箣鍓嶏紝鎴戝己鐑堝缓璁ぇ瀹朵娇鐢ㄨ嚜宸卞枩娆㈢殑妗嗘灦鎴栬€呭伐鍏凤紝绠€鍗曠殑鍐欎竴涓?div>鍏冪礌锛屽鎺ヤ笅鏉ヨ璁茶В鐨勫唴瀹规湁鏇存繁鍒荤殑鐞嗚В銆備笉闇€瑕佺壒鍒鏉傦紝寰堢畝鍗曪紝涓€涓湁瀹介珮鐨刣iv灏卞彲浠ヤ簡銆傚湪椤甸潰涓婄殑鏁堟灉濡備笅銆傛帴涓嬫潵锛屾偍闇€瑕佽浆鍒板紑鍙戣€呴〉闈㈠苟閫夋嫨鎴戜滑鍒氬垰鍒涘缓鐨刣iv鍏冪礌銆傜劧鍚庨渶瑕佸湪鍙宠竟鐨勯€夐」鍗′腑鎵惧埌Properties锛坉om灞炴€э級锛岀瓫閫夊嚭鍑犱釜鏈墂idth鐨勫睘鎬с€傛帴涓嬫潵锛屼綘浼氱粡甯哥湅鍒拌繖涓変釜灞炴€х殑鍙樺寲銆?銆乧lientWidth鐨勪笁涓睘鎬т腑锛屾垜浠厛鏉ヨВ閲婁竴涓媍lientWidth銆傜浉淇″垰寮€濮嬪幓MDN鏌ヨ繖涓狢SS灞炴€х殑鏃跺€欙紝浣犱竴瀹氳杩囦笅鍥俱€傜涓€娆＄湅鍒拌繖骞呭浘鐨勬椂鍊欙紝瑙夊緱瀹冨凡缁忚鏄庝簡涓€鍒囷紝浣嗗張濂藉儚涓嶇煡閬撳畠鎯宠〃杈句粈涔堛€傚鏋滀綘涔熸湁杩欐牱鐨勭枒鎯戯紝鏈枃灏嗗甫浣犱竴姝ユ浜嗚В瀹冩兂琛ㄨ揪鐨勬剰鎬濄€傞鍏堬紝涓嶈姝昏纭儗灞炴€у悕銆傛垜浠渶瑕佺煡閬撲负浠€涔堝睘鎬у悕绉版槸clientWidth鑰屼笉鏄疨iggyPageWidth銆備互涓嬫槸杩欎釜璇嶇殑璇戞枃銆傛垜璁や负client杩欎釜璇嶅湪杩欎釜璇涓嬫渶濂界殑缈昏瘧搴旇鏄?--鈥滃鎴风锛岀敤鎴风鈥濄€俹k锛屾垜鐭ラ亾浣犲彲鑳借繕鏈夌枒鎯戯紝鍒潃鎬ワ紝鎴戜滑涓€姝ユ鏉ャ€備粠涓婇潰width灞炴€х殑鎼滅储缁撴灉鏉ョ湅锛岃仾鏄庣殑浣犲彲鑳藉凡缁忓彂鐜癱lientWidth鐨勫€煎苟涓嶆槸鎴戜滑缁欒繖涓洅瀛愯缃殑width灞炴€х殑鍊硷紝涔熷氨鏄?00锛熸槸鐨勶紝娌￠敊锛屼絾涓嶅畬鍏ㄦ槸銆傝繖閲屾洿濂界殑琛ㄨ堪搴旇鏄細鈥滄牴鎹垜浠綋鍓嶇殑甯冨眬鍜屾牱寮忥紝clientWidth鐨勫€肩瓑浜巜idth鐨勫€笺€傗€濆叏绛夈€傞偅涔堣繖涓猚lientWidth搴旇鎬庝箞鐞嗚В鍛紵鈥滃鎴风殑瀹藉害锛熺敤鎴风殑瀹藉害锛熲€濇垜鎬昏寰楁€€殑銆傪煠斿湪杩欓噷鎴戝厛鎶涘嚭涓€涓垜涓汉璁や负姣旇緝鍚堥€傜殑璇存硶锛氣€渃lientWidth鎸囩殑鏄竴涓猟om鍏冪礌鍦ㄥ綋鍓嶇姸鎬佷笅鍙互琚敤鎴风湅鍒扮殑瀹藉害锛堜篃鍙互鐞嗚В涓哄彲瑙佸尯鍩熺殑瀹藉害锛夈€傗€滀粈涔堟剰鎬濓紵鍋囪浣犻潰鍓嶆湁涓€涓┖绔嬫柟浣撳揩閫掔馃摝銆傞噷闈㈣婊′簡涓€鍧楀ぇ灏忎竴妯′竴鏍风殑榛戣壊绔嬫柟浣撻搧鍧椼€傞偅涔堜綘鐜板湪鐪嬪埌鐨勮繖涓搧鍧楃殑瀹藉害灏卞彨鍋氬揩閫掔锛坆ox锛夌殑clientWidth銆傜幇鍦ㄦ垜浠妸鐔ㄦ枟鎷垮嚭鏉ワ紝鎴戜滑寰楀埌涓€涓┖鐩掑瓙锛屽鍚э紵鐜板湪鎴戝湪鐩掑瓙鍛ㄥ洿璐翠簡涓€鍦?0鍘樼背瀹界殑鐧借壊娉℃搏鏉裤€傜劧鍚庡張鎵句簡涓€涓皬涓€鍙风殑閾佸潡锛屾濂戒竴璧峰杩涗簡绠卞瓙閲屻€備綋鐜板湪鎴戜滑鐨勪緥瀛愪腑锛岀洅瀛愭湁涓€涓?0px鐨刡order灞炴€с€傜劧鍚庢垜浠繘鍏roperties閫夐」鍗℃煡鐪嬭繖涓変釜灞炴€с€傛垜浠彂鐜癱lientWidth鐨勫搴﹀噺灏戜簡20px銆傦紙鎴戜滑涓嶆槸鍙缃簡10px鍚楋紵鎬庝箞涓€涓嬪瓙鍑忎簡20px鍛紵甯屾湜澶у涓嶈蹇樿锛屽鏋渂order娌℃湁鎸囧畾鍏蜂綋鐨勬柟鍚戯紝浼氬湪top,bottom,left,andrightsides...灏卞ソ鍍忎綘鍦ㄨ〃杈句竴鍧楁场娌澘濉炲湪鐩掑瓙鐨勫洓涓竟涓婏級杩欐椂鍊欎綘鑳界湅鍒扮殑閾佸潡鐨勫搴﹀氨鏄痗lientWidth銆傛垜浠技涔庡彲浠ュ緱鍑轰竴涓粨璁猴紝clientWidth=width-leftborder-rightborder銆備笉锛屾垜浠笉鑳借繖涔堟棭涓嬬粨璁猴紝鎴戜滑浼间箮蹇樿浜嗕竴涓噸瑕佺殑灞炴€adding銆傛垜浠繕涓嶇煡閬撳～鍏呮槸鍚︿細褰卞搷clientWidht鐨勫€笺€俹k锛屾垜浠潵楠岃瘉涓€涓嬶紝鐜板湪鎴戜滑缁欒繖涓鍔犱竴涓?0px鐨刾adding锛岀湅鐪嬫湁娌℃湁鍙樺寲銆傚彲浠ョ湅鍑烘垜浠坊鍔犵殑padding浼间箮骞舵病鏈夊奖鍝嶅埌clientWidth鐨勫搴︺€傛垜浠垰鍒氬緱鍒扮殑clientWidth=width-leftborder-rightborder浼间箮鏄珯寰椾綇鑴氱殑銆傚叾瀹炴垜杩欓噷鎯宠〃杈剧殑鏄紝褰撴垜浠悊瑙adding灞炴€х殑鏃跺€欙紝鍏跺疄鍙互鎶婂畠鐞嗚В涓哄唴瀹瑰尯鍩熺殑涓€閮ㄥ垎銆傚洜涓簆adding灞炴€у疄闄呬笂鏄彈bg-color(background-color)褰卞搷鐨勶紝鑰宐order灞炴€т笉鍙梑g褰卞搷锛屽彉鎴愰粦鑹层€傝繖涔熸槸涓轰粈涔坧adding娌℃湁padding-color杩欎釜灞炴€э紝鍥犱负瀹冭鐪嬩綔鏄唴瀹瑰尯鍩熺殑涓€閮ㄥ垎锛屽畠鐨勯鑹查殢鐫€鍐呭鍖哄煙鐨勫彉鍖栬€屽彉鍖栵紙鍗砨g-color锛夈€傝繖涓椂鍊欐垜浠啀鏉ョ湅杩欏紶鍥俱€備负浠€涔堣繖閲岀殑濉厖鏄僵鑹茬殑锛熻繖鍏跺疄鏄疢DN涓轰簡鏇村ソ鐨勫睍鐜皃adding灞炴€э紝鈥滄晠鎰忊€濆姞鍏ヤ簡涓嶅悓鐨勯鑹层€傚洜姝わ紝clientWidth灞炴€ф洿鍍忔槸鎻忚堪鐢ㄦ埛鍙互鐩存帴鐪嬪埌鐨勫唴瀹瑰尯鍩熴€倀ips锛氳繖閲岄渶瑕佺壒鍒敞鎰忥紒锛佹垜浠洰鍓嶇殑缁撹鏄缓绔嬪湪box-sizing灞炴€т负border-box鐨勫墠鎻愪笅鐨勩€傚悗闈細瑙ｉ噴box-sizing涓篶ontent-box鏃禼lientWidth鐨勫尯鍒€?.offsetWidth鍏充簬offsetWidth锛屽叾瀹濵DN鏈夎繖涔堜竴鍙ヨ瘽锛屽彲浠ュ畬缇庣殑琛ㄨ揪瀹冩兂琛ㄨ揪鐨勬剰鎬濄€傚畠鐨勬蹇靛叾瀹為潪甯搁潪甯哥畝鍗曪紝灏辨槸鍦╞ox-sizing:border鐨勬椂鍊欙紝offsetWidth鍏跺疄绛変簬dom鍏冪礌鐨勫搴︺€備笉鐭ラ亾澶у鏈夋病鏈夊繕璁癰ox-sizing:content杩欎釜姒傚康锛屾爣鍑嗙殑鐩掑瓙妯″瀷銆傝鎴戜滑灏哹ox-sizing灞炴€у垏鎹负content锛岀湅鐪嬭繖涓睘鎬х殑鍊兼槸濡備綍鍙樺寲鐨勩€傚彲浠ユ槑鏄剧湅鍑哄綋box-sizing:conetentoffsetWidth=width+leftborder+rightborder+leftpadding+rightpadding銆傝繖鏄洜涓哄湪content-box鐨勬儏鍐典笅锛屾垜浠缃殑dom鍏冪礌鐨勫搴﹀疄闄呬笂鍙槸鍐呭鍖哄煙鐨勫搴︺€傛垜浠缃殑border鍜宲adding浠庡唴瀹瑰尯鍩熷悜澶栨墿灞曘€俠order-box涓嬭缃殑border鍜宲adding閮芥槸琚玝ox鍚戝唴鏀剁缉锛屼负border鎴杙adding鈥滆吘鍑虹┖闂粹€濄€俹ffsetWidth灞炴€ф槸琛ㄧず鐩掑瓙鐪熷疄鐨勭墿鐞嗗搴︺€傛墍浠ュ畠鐨勮绠楁柟寮忎細鍥犵洅瀛愬ぇ灏忚€屽紓銆傝繖閲屽ぇ瀹跺彲鑳戒細濂藉锛屼负浠€涔坈lientWidth涔熷彉浜嗗憿锛熷叾瀹炴寜鐓ф垜浠笂闈㈣鐨勶細鈥減adding鍏跺疄绠椾綔涓€涓壒娈婄殑鍐呭鍖哄煙鈥濇潵鍒嗘瀽锛屽緢瀹规槗鎯冲埌clientWidth=100px+10px+10px锛屾墍浠ョ瓑浜?20px銆?.ScrollWidth涓轰粈涔堟垜涓婇潰鏍规湰娌℃湁鎻愬埌杩欎釜灞炴€э紵鐢变簬璇ュ睘鎬х殑瑙﹀彂鏉′欢闈炲父鐗规畩锛屽彧鑳藉湪鐗规畩鍦烘櫙涓嬩綋鐜颁笌clientWidth鐨勫尯鍒€傦紙tips锛氱‘瀹為渶瑕佸clientWidth杩涜benchmark锛屼笉瑕佹贩娣嗭紝鍒版椂鍊欎綘灏变細鏄庣櫧涓轰粈涔坆enchmark鏄痗lientWidth鑰屼笉鏄痮ffsetwidth锛夐偅涔堣繖涓€滅壒娈婂満鏅€濇寚鐨勬槸浠€涔堝憿锛熷叾瀹炲ぇ瀹跺簲璇ュ緢鐔熸倝----overflow銆傚ソ鐨勶紝閭ｄ箞鎴戜滑濡備綍鍒涘缓杩欎釜鐗规畩鍦烘櫙鍛紵鍏跺疄闈炲父闈炲父绠€鍗曪紝浣犲彧闇€瑕佸湪杩欎釜100px瀹界殑妗嗛噷澶氭墦鍑犱釜瀛楀氨鍙互浜嗐€傝鎴戜滑绠€鍗曞湴璁剧疆瀛椾綋鐨勯鑹插拰澶у皬銆傛敞鎰忥細杩欓噷鎴戜滑灏哹ox-sizing鍒囨崲涓篵order-box銆傝繖閲屼负浜嗚〃杈炬孩鍑猴紝鎴戜滑闇€瑕佽缃竴涓壒娈婄殑灞炴€hite-space:nowrap甯屾湜澶у鑳戒粠鎴戠殑鍗氬涓鍒颁竴浜涙柊鐭ヨ瘑
