css已设置width100% 为什么宽度没有占满浏览器？ CSS样式DIV设置了宽度为100%。但是浏览器中没100%...
css\u5df2\u8bbe\u7f6ewidth100% \u4e3a\u4ec0\u4e48\u5bbd\u5ea6\u6ca1\u6709\u5360\u6ee1\u6d4f\u89c8\u5668\u6d4f\u89c8\u5668\u6709\u9ed8\u8ba4\u5bbd8\u50cf\u7d20
body{margin: 0;}
\u56e0\u4e3a\u4f60\u7684top1\u7684\u5bbd\u5ea6\u662f1200px,\u800c\u4f60\u7684\u6d4f\u89c8\u5668\u5728\u7f29\u5c0f\u540e\uff0c\u6574\u4f53\u5bbd\u5ea6\u6bd41200\u8981\u7a84\uff0c\u6d4f\u89c8\u5668\u4e0b\u65b9\u662f\u80af\u5b9a\u4f1a\u6709\u6a2a\u5411\u6eda\u52a8\u6761\u7684\u3002\u6240\u4ee5\uff0c\u5982\u679c\u4f60\u60f3\u8ba9\u4ed6\u7f29\u5c0f\u540e\u4ecd\u7136\u6ca1\u6709\u6eda\u52a8\u6761\uff0c\u5c31\u628a\u4ed6\u7684\u5bbd\u5ea61200px,\u6539\u4e3a\u767e\u5206\u6bd4\u3002\u5b9a\u80fd\u836f\u5230\u75c5\u9664\u3002
因为浏览器默认情况下会为元素添加margin和padding属性，需要将这两个属性初始化为0.
1、新建html文档，在body标签中添加一个div标签，然后为这个div设置一些样式：
2、用浏览器打开编辑好的html文档，这时可以从浏览器中发现浏览器四周留有一些白色空隙：
3、在style标签中为“*”添加“margin: 0;padding: 0;”样式，“*”表示所有元素，“margin”和“padding”表示外边距和内边距：
4、用浏览器重新打开编辑好的html文档，这时浏览器四周的白色空隙都会被去除：
css已设置width100% 宽度没有占满浏览器是设置错误造成的，解决方法为：
1、首先需要新建一个html文件，命名为test.html。
2、接下来在test.html文件内，使用div创建一个模块，下面将对该div进行样式设置。
3、然后在test.html文件内，给div添加一个class属性，主要用于在css标签中设置它的样式。
4、在css标签中，使用width属性设置div的宽度，设置width100%即可。
你是给什么元素设置宽度的看给块状元素设置宽度是可以的，但是内联元素设置宽度是没有效果的，比如a标签 这个我们在css里面设置宽度是没有效果的，要把a标签转换成块状元素，宽度的效果才可以实现，其次还有种可能，你写的可能是块状元素，但是没有设置边框，你看不见而已，但是宽度是发生变化的，具体内容你可以参考下php中文网上面的资料，希望对你有帮助！
这个要看外侧的设置，一般情况下加上下面的即可
html,body{
margin:0;padding:0;border:0
}
即可铺满宽度
body有默认外边距，默认外边距是8px;
通过body { margin:0; }清除默认外边距
绛旓細鍏堣涓涓嬶紝濡傛灉width:100%;浜嗭紝閭ｄ箞鍦璁剧疆border锛岃繖涓洅瀛愮殑鎬诲搴,灏变細澶т簬鐖剁洅瀛愶紝涔熷氨鏄,杩欎釜灏忕洅瀛愭瘮澶х洅瀛愯繕瑕佸ぇ锛屼細婧㈠嚭銆傞櫎闈烇紝浣犵粰杩欎釜灏忕洅瀛愬啀鍔犱竴涓睘鎬ox-sizing: border-box;bordre鐨勫睘鎬ц缃紝鏄繖绉嶆牸寮廱order: 1px solid #000;1px锛屾槸鎸嘼order鐨勫搴︿负1鍍忕礌銆俿olid锛屾槸鎸嘼order鐨...
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歵able {width: 70%}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵棤璁虹綉椤靛ぇ灏忓浣曞彉鍖栵紝table鎬昏兘鍗犵敤缃戦〉70%鐨勫搴︼紝鍙互瀹炵幇闅忕潃灞忓箷鍙樺寲鑰屽彉鍖栥
绛旓細杩欎釜闇瑕佺敤鍒癶tml5璺CSS3浜嗭紝浣犺繖绉嶆晥鏋滀篃鍙搷搴斿紡锛屽氨鏄牴鎹獥鍙ｅぇ灏忚嚜鍔ㄧ缉鏀撅紝浜嗚В涓涓婥SS3鍚
绛旓細鍦ㄤ綘鐨勫100%鍚庨潰鍔犱釜min-width:1200px; 渚嬶細#wp_100{background:url(../img/footerbj22.jpg) repeat-x; background-position:center bottom;width:100%;min-width:1200px; margin:0 auto; padding:0; }
绛旓細鐪嬩笅鏄笉鏄湪html鐨勯偅琛屽唴缃簡鐩稿叧鐨勫畾涔夛紝濡傛灉鏄叏閮ㄦ竻闄わ紝鏍峰紡鍙渶瑕佽皟鐢css灏卞彲浠ヤ簡銆
绛旓細鍥犱负鐖跺厓绱燿iv璁剧疆浜唌argin涓8锛屼慨鏀逛负锛歞iv{ margin:0;} fixed锛氳〃绀哄浐瀹氬畾浣嶏紝鐩稿绉诲姩鐨勫潗鏍囨槸瑙嗗浘锛堝睆骞曞唴鐨勭綉椤电獥鍙ｏ級鏈韩銆傜敱浜庤鍥炬湰韬槸鍥哄畾鐨勶紝涓嶄細闅忔祻瑙堝櫒绐楀彛鐨勬粴鍔ㄦ潯婊氬姩鑰屽彉鍖栵紝闄ら潪鍦ㄥ睆骞曚腑绉诲姩娴忚鍣ㄧ獥鍙ｇ殑灞忓箷浣嶇疆锛屾垨鏀瑰彉娴忚鍣ㄧ獥鍙ｇ殑鏄剧ず澶у皬锛屽洜姝ゅ浐瀹氬畾浣嶇殑鍏冪礌浼氬缁堜綅浜庢祻瑙堝櫒绐楀彛鍐...
绛旓細div鏈潵灏辨槸鍧楀厓绱狅紝鐢ㄤ笉鐫鍔width:100%;鍟娿備綘瑕佺殑鏁堟灉灏辨槸div鍔犱簡border鍏呮弧鏁翠釜椤甸潰锛屽搴︿笂鍙互瀹炵幇鐨勫摝...楂樺害浣犳槸瀹氫箟姝荤殑銆傚鏋滆繕鏈夊叾浠栧師鍥狅紝姣斿鍏朵粬灞炴у奖鍝嶅埌鐨勮瘽锛屼綘鍐欏叏涓鐐逛唬鐮佹剰鎬濇剰鎬濓紝浠庝綘缁欑殑demo鐪嬩笉鍑烘潵鏈変粈涔堥棶棰樸傚彟澶杦idth:100%-10px;CSS閲岄潰鍙病鏈夎繖涔堢畻涓滆タ鐨勶紝浣犺鏄...
绛旓細璇曚竴璇曪細鐖跺厓绱犵殑瀹藉害鏄 50 閭ｄ箞瀛愬厓绱犵殑瀹藉害鍒嗗埆鏄width:100%; 鍜 width:inherit;inherit 鏄户鎵跨殑鎰忔濄傘傜户鎵跨殑鏄 鐖跺厓绱犵殑width锛屼篃灏辨槸50%銆傘
绛旓細浜宐ody鐨勫瓙鍏冪礌height100浣嗗疄闄呴珮搴︽湭濉弧鏁翠釜椤甸潰...鏍规嵁CSS鐨勭浉鍏崇煡璇嗘垜浠煡閬,褰撳瓙鍏冪礌娌℃湁璁剧疆鏍峰紡鏃...=0,body涓巋tml鐨width澶у皬鐩稿悓,涓嶅啀鍑虹幇婊.
绛旓細鏃㈣瀹藉害100%锛屽張瑕佷笉鍙樺舰锛岃繖涓や釜鏉′欢鍐冲畾浜嗗浘鐗囩殑楂樺害涓嶈兘鍙﹀璁剧疆锛屽彧鑳借窡闅忓搴︾殑鍙樺寲鑰屽彉鍖栵紝杩欐牱灏辨棤娉曚繚璇佸畬鍏ㄨ鐩栧墿浣欏尯鍩熴傞櫎闈炴妸鏉′欢鏀逛负锛氬綋鍥剧墖鐨勫楂樻瘮澶т簬鍖哄煙鐨勫楂樻瘮锛屽垯鍥剧墖鐨勯珮搴100%锛屽搴﹁秴鍑哄尯鍩熺殑閮ㄥ垎鍏佽绐佸嚭鍦ㄥ尯鍩熷闈紱鍙嶄箣锛屽垯瀹藉害100%锛岄珮搴﹁秴鍑哄尯鍩熺殑閮ㄥ垎鍏佽绐佸嚭鍦ㄥ尯鍩熷闈
