网页设计中CSS样式里设定margin:0 20px 30% 0;其中30%是相对于什么?是个什么概念? 网页css代码的 margin:0 auto是什么意思
\u7528\u4e86margin:0 auto;\u8ba9div\u5c45\u4e2d\u4e86\u3002\u600e\u4e48\u8ba9\u8fd9\u4e2adiv\u518d\u5411\u5de6\u79fb\u52a820px\u90a3\uff0c\u8981\u7528\u4ec0\u4e48\u5c5e\u6027\uff1f1:position:relative; left:-20px;\u76f8\u5bf9\u5b9a\u4f4d \u76f8\u5bf9\u4e8e\u672c\u8eab\u4f4d\u7f6e\u5411\u5de6\u79fb\u52a820px\u3002
2:\u8bf7\u786e\u5b9a\u4f60\u6ca1\u6709\u4e3a\u8fd9\u4e2aDIV\u8bbe\u7f6efloat\u3002
3:\u6c34\u5e73\u5c45\u4e2d\u5f80\u5f80\u4e0d\u80fd\u5355\u9760margin\u5b9e\u73b0\uff0c\u5728IE\u4e0b\u8fd8\u8981\u7ed3\u5408text-align\u5b9e\u73b0\uff0c\u7ed9DIV\u52a0\u4e0a\u6837\u5f0f\uff1a#divid{width:100px;margin:0 auto;text-align:center;}\u3002
DIV\u662f\u5c42\u53e0\u6837\u5f0f\u8868\u4e2d\u7684\u5b9a\u4f4d\u6280\u672f\uff0c\u5168\u79f0DIVision\uff0c\u5373\u4e3a\u5212\u5206\u3002DIV\u5728\u7f16\u7a0b\u4e2d\u53c8\u53eb\u505a\u6574\u9664\uff0c\u5373\u53ea\u5f97\u5546\u7684\u6574\u6570\u3002DIV\u662f\u4e00\u4e2a\u5757\u7ea7\u5143\u7d20\u3002\u8fd9\u610f\u5473\u7740\u5b83\u7684\u5185\u5bb9\u81ea\u52a8\u5730\u5f00\u59cb\u4e00\u4e2a\u65b0\u884c\u3002\u5b9e\u9645\u4e0a\uff0c\u6362\u884c\u662f\u56fa\u6709\u7684\u552f\u4e00\u683c\u5f0f\u8868\u73b0\u3002\u53ef\u4ee5\u901a\u8fc7class\u6216id\u5e94\u7528\u989d\u5916\u7684\u6837\u5f0f\u3002DIV\u5143\u7d20\u662f\u7528\u6765\u4e3aHTML\u6587\u6863\u5185\u5927\u5757\uff08block-level\uff09\u7684\u5185\u5bb9\u63d0\u4f9b\u7ed3\u6784\u548c\u80cc\u666f\u7684\u5143\u7d20\u3002DIV\u7684\u8d77\u59cb\u6807\u7b7e\u548c\u7ed3\u675f\u6807\u7b7e\u4e4b\u95f4\u7684\u6240\u6709\u5185\u5bb9\u90fd\u662f\u7528\u6765\u6784\u6210\u8fd9\u4e2a\u5757\u7684\uff0c\u5176\u4e2d\u6240\u5305\u542b\u5143\u7d20\u7684\u7279\u6027\u7531DIV\u6807\u7b7e\u7684\u5c5e\u6027\u6765\u63a7\u5236\uff0c\u6216\u8005\u662f\u901a\u8fc7\u4f7f\u7528\u6837\u5f0f\u8868\u683c\u5f0f\u5316\u8fd9\u4e2a\u5757\u6765\u8fdb\u884c\u63a7\u5236\u3002
margin\u662f\u5916\u8fb9\u8ddd\u7684\u610f\u601d\uff0c\u5f53\u4e00\u4e2a\u5143\u7d20\u6837\u5f0f\u5c5e\u6027\u91cc\u6709margin:0 auto\u65f6\uff0c\u5e76\u4e14\u7236\u5143\u7d20\u7684\u5bbd\u5ea6\u662f\u786e\u5b9a\u7684\uff0c\u610f\u601d\u662f\u8fd9\u4e2a\u5143\u7d20\u5904\u4e8e\u5176\u7236\u5143\u7d20\u7684\u5c45\u4e2d\u4f4d\u7f6e\uff0c\u5e76\u4e14\u8fd9\u4e2a\u5143\u7d20\u7684\u4e0a\u4e0b\u5916\u8fb9\u8ddd\u4e3a0\u3002
margin\u8fd8\u6709\u5176\u4ed6\u914d\u7f6e\u7c7b\u578b\uff1a
margin-bottom\uff1a\u8bbe\u7f6e\u5143\u7d20\u7684\u4e0b\u5916\u8fb9\u8ddd\u3002
margin-left\uff1a\u8bbe\u7f6e\u5143\u7d20\u7684\u5de6\u5916\u8fb9\u8ddd\u3002
margin-right\uff1a\u8bbe\u7f6e\u5143\u7d20\u7684\u53f3\u5916\u8fb9\u8ddd\u3002
margin-top\uff1a\u8bbe\u7f6e\u5143\u7d20\u7684\u4e0a\u5916\u8fb9\u8ddd\u3002
\u6269\u5c55\u8d44\u6599\uff1a
css\u7684\u8bed\u8a00\u7279\u70b9\uff1a
1\u3001\u4e30\u5bcc\u7684\u6837\u5f0f\u5b9a\u4e49\uff1a
CSS\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u6587\u6863\u6837\u5f0f\u5916\u89c2\uff0c\u4ee5\u53ca\u8bbe\u7f6e\u6587\u672c\u548c\u80cc\u666f\u5c5e\u6027\u7684\u80fd\u529b\uff1b\u5141\u8bb8\u4e3a\u4efb\u4f55\u5143\u7d20\u521b\u5efa\u8fb9\u6846\uff0c\u4ee5\u53ca\u5143\u7d20\u8fb9\u6846\u4e0e\u5176\u4ed6\u5143\u7d20\u95f4\u7684\u8ddd\u79bb\uff0c\u4ee5\u53ca\u5143\u7d20\u8fb9\u6846\u4e0e\u5143\u7d20\u5185\u5bb9\u95f4\u7684\u8ddd\u79bb\uff1b\u5141\u8bb8\u968f\u610f\u6539\u53d8\u6587\u672c\u7684\u5927\u5c0f\u5199\u65b9\u5f0f\u3001\u4fee\u9970\u65b9\u5f0f\u4ee5\u53ca\u5176\u4ed6\u9875\u9762\u6548\u679c\u3002
2\u3001\u6613\u4e8e\u4f7f\u7528\u548c\u4fee\u6539\uff1a
CSS\u53ef\u4ee5\u5c06\u6837\u5f0f\u5b9a\u4e49\u5728HTML\u5143\u7d20\u7684style\u5c5e\u6027\u4e2d\uff0c\u4e5f\u53ef\u4ee5\u5c06\u5176\u5b9a\u4e49\u5728HTML\u6587\u6863\u7684header\u90e8\u5206\uff0c\u4e5f\u53ef\u4ee5\u5c06\u6837\u5f0f\u58f0\u660e\u5728\u4e00\u4e2a\u4e13\u95e8\u7684CSS\u6587\u4ef6\u4e2d\uff0c\u4ee5\u4f9bHTML\u9875\u9762\u5f15\u7528\u3002\u603b\u4e4b\uff0cCSS\u6837\u5f0f\u8868\u53ef\u4ee5\u5c06\u6240\u6709\u7684\u6837\u5f0f\u58f0\u660e\u7edf\u4e00\u5b58\u653e\uff0c\u8fdb\u884c\u7edf\u4e00\u7ba1\u7406\u3002
3\u3001\u591a\u9875\u9762\u5e94\u7528
CSS\u6837\u5f0f\u8868\u53ef\u4ee5\u5355\u72ec\u5b58\u653e\u5728\u4e00\u4e2aCSS\u6587\u4ef6\u4e2d\uff0c\u8fd9\u6837\u6211\u4eec\u5c31\u53ef\u4ee5\u5728\u591a\u4e2a\u9875\u9762\u4e2d\u4f7f\u7528\u540c\u4e00\u4e2aCSS\u6837\u5f0f\u8868\u3002CSS\u6837\u5f0f\u8868\u7406\u8bba\u4e0a\u4e0d\u5c5e\u4e8e\u4efb\u4f55\u9875\u9762\u6587\u4ef6\uff0c\u5728\u4efb\u4f55\u9875\u9762\u6587\u4ef6\u4e2d\u90fd\u53ef\u4ee5\u5c06\u5176\u5f15\u7528\u3002\u8fd9\u6837\u5c31\u53ef\u4ee5\u5b9e\u73b0\u591a\u4e2a\u9875\u9762\u98ce\u683c\u7684\u7edf\u4e00\u3002
margin:0 20px 30% 0对应的是与上，右，下，左四边相邻元素的距离。
30%指下边距为其父元素的宽度的30%
补充：
1.如果margin只有三个值，按照值的顺序为margin：top right bottom; 缺少了left，根据原则，则left的值有right来代替。
margin:10px 20px 30px;就等于margin:10px 20px 30px 20px;
2.如果margin只有两个值，按照值的顺序为margin：top right; 缺少了bottom和left，根据原则left的值由right来代替，bottm的值由top来代替。
margin:10px 20px;就等于margin:10px 20px 10px 20px;
3.如果margin只有一个值，按照值的顺序为margin:top; 缺少了bottom、left和right，根据原则left的值由right来代替，bottom的值由top来代替，right的值右top来代替，也就是说left的值也由top来代替。
margin:10px;就等于margin:10px 10px 10px 10px;
相对于他的父容器高度，也就是他外层div的高度
绛旓細DIV2鍦―IV1涓嬫柟锛屽叾鍚勮嚜鍗犱竴鏉★紝骞朵笉鍦ㄥ悓涓琛屼笂锛屽洜涓烘病鏈夌粰DIV璁剧疆float灞炴э紝閭ｄ箞榛樿DIV灏辨槸涓琛屼竴涓殑
绛旓細棣栧厛锛宎mxx缂栬瘧鍣ㄧ紪鐮佽矊浼煎涓枃缂栫爜涓嶆劅鍐掞紝鎵浠ユ枃浠跺悕鏈濂戒笉瑕佷腑鏂囷紝鍌ㄥ瓨鐩綍鏈濂藉埆鏈変腑鏂囥 閭ｄ釜鈥滃浠垛濈殑鍓嶇紑鎹簡鍚с傚啀娆★紝濡傛灉鏄敤璁颁簨鏈慨鏀逛负UTF-8鏍煎紡锛屼細甯︽湁bom锛屾棤娉曟甯哥紪璇戙傛帹鑽愮敤UltraEdit淇濆瓨涓轰笉甯om鐨刄TF-8鏍煎紡銆傚氨鏄繖鏍枫
绛旓細瀵逛簬CSS鏍峰紡鐨鍛藉悕瑙勫垯,寤鸿鐢ㄥ瓧姣嶃乢鍙峰伐銆-鍙枫佹暟瀛楃粍鎴,蹇呴』浠ュ瓧姣嶅紑澶,涓嶈兘涓虹函鏁板瓧,涓轰簡寮鍙戝悗鏍峰紡鍚嶇鐞嗘柟渚,澶у璇风敤鏈夋剰涔夌殑鍗曡瘝鎴栫缉鍐欑粍鍚堟潵鍛藉悕,璁╁悓浜嬩竴鐪嬪氨鏄庣櫧杩欐牱寮忓ぇ姒傛槸鍝竴鍧楃殑,杩欐牱灏辫妭鐪佷簡鏌ユ壘鏍峰紡鐨勬椂闂淬備緥濡:澶撮儴鏍峰紡鐢╤eader,澶撮儴宸﹁竟,鍙互鐢╤eader_left鎴杊eader_l,杩樻湁濡傛灉鏄垪缁撴瀯鐨勫彲浠...
绛旓細1銆佹柊寤篽tml鏂囦欢銆2銆佸垱寤轰袱涓猟iv锛屽苟璧嬩簣id銆3銆佷负涓や釜div璁剧疆瀹介珮鍜岃儗鏅紝骞惰缃乏鍙虫诞鍔ㄣ4銆侀瑙堟晥鏋滃鍥俱5銆佸垱寤虹涓変釜div銆6銆佷负绗笁涓猟iv璁剧疆瀹介珮鍜岃儗鏅7銆侀瑙堟晥鏋滃鍥俱傛敞鎰忎簨椤癸細闅忕潃HTML鐨勬垚闀匡紝涓轰簡婊¤冻椤甸潰璁捐鑰呯殑瑕佹眰锛孒TML娣诲姞浜嗗緢澶氭樉绀哄姛鑳姐備絾鏄殢鐫杩欎簺鍔熻兘鐨勫鍔狅紝HTML鍙樼殑瓒...
绛旓細13.閾炬帴鐨刪over鐘舵併俛:hover img{width:300px} 鎴戜滑鎯宠榧犳爣hover鏃,閾炬帴閲屽寘鍚殑鍥剧墖瀹藉害鍙樺寲,鍙儨鍦╥e6涓嬫棤鏁,ie7銆乫f涓嬫湁鏁堛14.闈為摼鎺ョ殑hover鐘舵併俤iv:hover{} 杩欐牱鐨勬牱寮ie6鏄笉璁ょ殑,鍦╥e7銆乫f涓嬫墠鏈夋晥鏋溿15.block鍖栫殑a閾炬帴,鍏跺唴濂梐bsolute灞,absolute灞傚唴鏀剧疆img,ie涓,榧犳爣鐐瑰嚮img涓嶄細鏈夐摼鎺...
绛旓細window.location.href = 'http://www.mahaixiang.cn/';} setTimeout(jumurl,3000); 鍥涖佹牴鎹瀹㈡潵婧愯烦杞殑JS浠ｇ爜 1銆丣S鍒ゆ柇鏉ヨ矾浠ｇ爜 姝ゆ浠ｇ爜涓昏鐢ㄤ簬鐧惧害璋锋瓕鐐瑰嚮杩涘叆璺宠浆锛岀洿鎺ユ墦寮缃戠珯涓嶈烦杞細 var s=document.referrer if(s.indexOf("google")>0 || s.indexOf("baidu")>0 || s.index...
绛旓細缃戦〉涓殑婊氬姩鍥剧墖鐨勪唬鐮佹湁涓婁笅宸﹀彸鍥涗釜鏂瑰悜锛屽垎鍒槸锛 <---> <锛--鍚戜笂婊氬姩浠ｇ爜寮濮--> <
绛旓細鍦ㄦ柊寤鐨勬牱寮琛ㄦ枃浠"MyStyle.css鈥濇枃浠朵腑杈撳叆濡備笅浠ｇ爜锛* { padding:0; margin:0;} /*璁剧疆鎵鏈夊鍍忕殑鍐呰竟璺濅负0*/body { text-align:center;} /*璁剧疆椤甸潰灞呬腑瀵归綈*/#photo-list {/* 6寮犲浘鐗囩殑瀹藉害锛堝寘鍚搴︺乸adding銆乥order銆佸浘鐗囬棿鐨勭暀鐧斤級璁＄畻锛6*(100+2*2+1*2+9) - 9 涔嬫墍...
绛旓細Typorama 鏄竴娆鹃潪甯稿疄鐢ㄧ殑iOS 璁捐APP锛屽畠鍙互灏嗕綘鎵鎻愪緵鐨勬枃鏈嚜鍔ㄨ浆鍖栦负婕備寒鐨勬帓鐗堟晥鏋溿侾RODUCT BOARD Product Board 鏄竴涓彂甯冪敤鎴风湡姝ｆ兂瑕佺殑涓滆タ鐨勫钩鍙帮紝濡傛灉浣犵殑浜у搧闇瑕佹槑纭垬鐣ョ洰鏍囧拰鎬濊冪殑浼樺厛绾э紝涓嶅Θ鐪嬬湅杩欎釜缃戠珯銆5 QUESTIONS FOR 100 DESIGNERS 杩欐槸閽堝100鍚嶄笉鍚岃璁″笀鐨勯噰璁匡紝姣忎釜閲囪閮戒細...
绛旓細鏍峰紡閮ㄥ垎:.nav_bg li {float: left;display: inline;height: 26px;color: #fff;font-size: 14px;font-weight: 700;padding: 0 20px;margin: 0 5px;line-height: 26px;text-align: center;border: 1px transparent solid;border-radius: 5px;behavior: url(css/PIE.htc);position: relative;}.nav_bg...
