在CSS中,margin:10px auto; margin-bottom:35px;这两句写在一起,表示什么意思?分别是哪个方面的距离? css中 *margin-bottom:20px!impor...
html css \u7f51\u9875\u5236\u4f5c \u7ed9\u4e00\u4e2adiv\u8bbe\u7f6e\u4e86margin\uff1a0 auto \u4e4b\u540e\u518d\u8bbe\u7f6e\u4e00\u4e2a margin-bottom\uff1a10px 10px\u4f1a\u751f\u6548\u5417\u4f1a\uff0ccss\u7684\u8fd0\u884c\u987a\u5e8f\u662f\u4ece\u4e0a\u5230\u4e0b\uff0c\u6240\u4ee5\u5148\u5199\uff1a
margin: 0 auto;\u7136\u540e\u518d\u8bbe\u7f6e\u5176
margin-bottom:10px;10px\u662f\u4f1a\u751f\u6548\u7684
*\u662f\u533a\u5206\u6d4f\u89c8\u5668\u517c\u5bb9\u6027\u7684\uff0c\u5199\u5728\u4e00\u6761\u6837\u5f0f\u91cc\u53ef\u4ee5\u533a\u5206IE6\u3001IE7\u548c\u522b\u7684\u6d4f\u89c8\u5668\u7684\u4e0d\u540c\uff0c\u5982\uff1a
.bor { border:20px solid green; *border:20px solid red ; padding: 30px;width : 300px;}
\u7eff\u8272\u8fb9\u6846\u7684\u6837\u5f0f\u5199\u5728\u524d\u9762\uff0c\u8fd9\u65f6\u5019\u6240\u6709\u6d4f\u89c8\u5668\u90fd\u662f\u7eff\u8272\u8fb9\u6846\uff0c\u7ea2\u8272\u8fb9\u6846\u7684\u6837\u5f0f\u7528\u4e86*\uff0cIE6\u548cIE7\u80fd\u8bc6\u522b\uff0c\u5176\u4ed6\u6d4f\u89c8\u5668\u4e0d\u80fd\u8bc6\u522b\uff0c\u6240\u4ee5\u8986\u76d6\u4e86\u524d\u9762\u7684\u7eff\u8272\u8fb9\u6846\uff0c\u6240\u4ee5IE6\u548cIE7\u663e\u793a\u7ea2\u8272\u8fb9\u6846\uff0c\u5176\u4ed6\u6d4f\u89c8\u5668\u663e\u793a\u7eff\u8272\u8fb9\u6846
!important\u7684\u4f5c\u7528\u662f\u63d0\u9ad8\u6307\u5b9a\u6837\u5f0f\u89c4\u5219\u7684\u5e94\u7528\u4f18\u5148\u6743\u3002\u5199\u5728\u5b9a\u4e49\u7684\u6700\u540e\u9762\uff0c\u4f8b\u5982\uff1abox{color:red !important;} \u6700\u91cd\u8981\u7684\u4e00\u70b9\u662f\uff1aIE 6.0\u4e00\u76f4\u90fd\u4e0d\u652f\u6301\u8fd9\u4e2a\u8bed\u6cd5\uff0c\u800c\u5176\u4ed6\u7684\u6d4f\u89c8\u5668\u90fd\u652f\u6301\u3002\u56e0\u6b64\u6211\u4eec\u5c31\u53ef\u4ee5\u5229\u7528\u8fd9\u4e00\u70b9\u6765\u5206\u522b \u6bd4\u5982\uff1a
.bor{ border:20px solid red !important; border:20px solid green;padding: 30px;width : 300px;}
\u56e0\u4e3aie6\u4e0d\u8ba4\u8bc6!important\uff0c\u540e\u9762\u7684\u7eff\u8272\u8fb9\u6846\u6837\u5f0f\u5c31\u4f1a\u8986\u76d6\u524d\u9762\u90a3\u53e5\u7ea2\u8272\u8fb9\u6846\u6837\u5f0f\uff0c\u800c\u5982ie7\u3001\u706b\u72d0\u7b49\u6d4f\u89c8\u5668\u8ba4\u8bc6!important\uff0c\u77e5\u9053\u8fd9\u4e00\u6761\u6837\u5f0f\u7684\u4f18\u5148\u7ea7\u8981\u6bd4\u540e\u9762\u90a3\u53e5\u9ad8\uff0c\u5c31\u53ea\u4f1a\u6267\u884c\u8fd9\u53e5\u7ea2\u8272\u8fb9\u6846\u7684\u6837\u5f0f\u3002
margin-bottom:35px; 设置下方的外边距为35像素；
position:relative和position:absolute, 即常说的绝对定位，一般会在用一般的排版方法无法实现布局效果的时候使用，例如你用img标签插入一张图片后又想在图片上边写字就可以用绝对定位把包住文字的标签（例如p）定位到图片上。
position:relative 这个是设置偏移的参考对象的，不设置的话会默认以浏览器左上角为参考对象；
position:absolute 这个是给要产生偏移的对象设置的，同时需要使用top、right或者bottom、left几个属性设置偏移值。
margin:10px auto; 两个参数时，参数一代表上下，参数二代表左右，即上下间距10像素，左右间距自动，左右间距自动代表居中定位。
margin 是对四个方向一起定义，margin-bottom 是对下间距定义，由于 margin-bottom:35px; 写在后面，所以最终的下间距为 35px 。
你的margin:10px auto; 是距上10px 左右下都是自动，也就是说距上10px 居中对齐。margin-bottom：35px 是距下35px ； 其实你可以这样写 margin:10px auto 35px auto；
外边距的上端为10px，下左右的外边距为自动。margin-bottom:35px是改变元素的下外边距为35px。
补充的问题是令样式表对内容元素的作用position:relative，这个是位置固定不变，position:absolute这个是位置相对的，可以发生改变
前面的是内边距上下左右10像素，兼容火狐！后面的是外下边距35像素！ 就这意思！明白！
绛旓細CSS 妗嗘ā鍨 (Box Model) 瑙勫畾浜嗗厓绱犳澶勭悊鍏冪礌鍐呭銆佸唴杈硅窛銆佽竟妗 鍜 澶栬竟璺 鐨勬柟寮忋傛墍浠ヤ袱涓箣闂寸殑璺濈鍙互鐢ㄥ杈硅窛锛坢argin锛夋潵瀹炵幇锛歱{margin:10px 0;} // 璁剧疆p鏍囩涓婁笅闂磋窛涓10px锛屽乏鍙充负0瀹炰緥婕旂ず澶栬竟璺濆p鏍囩涔嬮棿璺濈鐨勫奖鍝嶏細鍒涘缓Html鍏冪礌 婕旂ず澶栬竟璺濆p鏍囩涔嬮棿璺濈鐨勫奖鍝嶏細鎴戞槸绗竴...
绛旓細鍏堢湅margin锛宮argin鏈4涓硷細margin:10px 11px 9px 8px; 锛屾寜椤哄簭鍒嗗埆浠ｈ〃瀵硅薄涓庣埗瀹瑰櫒鐨勪笂銆佸彸銆佷笅銆佸乏鐨勮窛绂诲间负10px,11px,9px,8px銆傚鏋滃彧鍐欎袱涓硷細margin:10px 5px; 锛岃〃绀哄璞′笌鐖跺鍣ㄧ殑涓婁笅璺濈鍊奸兘鏄10px锛屼笌宸﹀彸鐨勮窛绂诲奸兘鏄5px銆傞偅涔堣繖鏃跺欐垜浠潵鐪媘argin:0 auto; 锛岃繖涓氨...
绛旓細p {margin : 10%;} 鐧惧垎鏁版槸鐩稿浜庣埗鍏冪礌鐨 width 璁＄畻鐨勩備笂闈㈣繖涓緥瀛愪负 p 鍏冪礌璁剧疆鐨勫杈硅窛鏄叾鐖跺厓绱犵殑 width 鐨 10%銆 margin 鐨勯粯璁ゅ兼槸 0,鎵浠ュ鏋滄病鏈変负 margin 澹版槑涓涓,灏变笉浼氬嚭鐜板杈硅窛銆備絾鏄,鍦ㄥ疄闄涓,娴忚鍣ㄥ璁稿鍏冪礌宸茬粡鎻愪緵浜嗛瀹氱殑鏍峰紡,澶栬竟璺濅篃涓嶄緥澶栥備緥濡,鍦ㄦ敮鎸 CSS 鐨勬祻瑙堝櫒涓...
绛旓細Margin鏄CSS涓鐨勪竴涓睘鎬э紝鎸囩殑鏄竴涓厓绱犵殑杈规澶栦晶鍒扮浉閭诲厓绱犺竟妗嗗唴渚т箣闂寸殑璺濈銆margin锛鏄疌SS璇硶锛岃繖涓畝鍐欏睘鎬х敤浜庡湪涓涓０鏄庝腑璁剧疆鎵鏈夊綋鍓嶆垨鑰呮寚瀹氬厓绱犳墍鏈夊杈硅窛鐨勫搴︼紝鎴栬呰缃悇杈逛笂澶栬竟璺濈殑瀹藉害銆俶argin鐨勫畾涔锛歮argin绠鍐欏睘鎬у湪涓涓０鏄庝腑璁剧疆鎵鏈夊綋鍓嶆垨鑰呮寚瀹氬厓绱犲杈硅窛灞炴с傝灞炴у彲浠ユ湁 1 ...
绛旓細鏈枃浠嬬粛CSS涓璵argin锛堝杈硅窛锛夊拰padding锛堝唴杈硅窛鐨勫尯鍒級鏉愭枡/宸ュ叿 Dreamwear 鍏蜂綋鍖哄埆锛氬涓婂浘鎵绀猴紝澶栬竟璺漨argin鎸囩殑鏄暣涓洅瀛愪笌缃戦〉鐨勮窛绂伙紱鍐呰竟璺漰adding鎸囩殑鍒欐槸鐩掑瓙鐨勫唴瀹圭浉瀵圭洅瀛愭湰韬殑璺濈
绛旓細margin鏄敤鏉ヨ瀹氳鍏冪礌涓庣浉閭诲厓绱犵洿鎺ョ殑璺濈銆俶argin:0 20px 30% 0瀵瑰簲鐨勬槸涓庝笂锛屽彸锛屼笅锛屽乏鍥涜竟鐩搁偦鍏冪礌鐨勮窛绂汇30%鎸囦笅杈硅窛涓哄叾鐖跺厓绱犵殑瀹藉害鐨30 琛ュ厖锛1.濡傛灉margin鍙湁涓変釜鍊硷紝鎸夌収鍊肩殑椤哄簭涓簃argin锛歵op right bottom; 缂哄皯浜唋eft锛屾牴鎹師鍒欙紝鍒檒eft鐨勫兼湁right鏉ヤ唬鏇裤margin:10px 20px 30...
绛旓細榛樿鎯呭喌涓嬶紝html鏍囩閮芥湁margin灞炴у杈硅窛锛屽鏋滀笉璁剧疆0锛屼細鏈夐棿璺濅笉濂界湅锛屼负浜嗘竻鐞嗚繖涓粯璁ょ殑闂磋窛锛屾墍鏈夐渶瑕佺粰鍏冪礌璁剧疆css灞炴margin:0 margin:0 涓虹畝鍐欙紝鎰忔濇槸涓婁笅宸﹀彸鍏ㄩ儴璁剧疆澶栬竟璺濅负0锛屽鏋滆璁剧疆鍙抽棿璺濅负10px锛屽叾瀹冩柟鍚戜负0 鍙互杩欎箞璁剧疆 margin:0 10px 0 0 鎰忔濅负 涓婂杈硅窛涓0 鍙冲杈硅窛...
绛旓細鏈绠鍗曠殑璁板繂鐨勬柟娉曟槸锛氬彧瑕佽繖涓睘鎬ц缃簡瀹藉害鍙堣缃簡杈硅窛锛屽氨蹇呴』鍑忓幓杩10鍍忕礌銆傚洜涓轰竴涓畬鏁寸殑妯″潡瀹為檯瀹藉害鏄敱瀹冪殑浣犺缃殑瀹藉害+鍐呰竟璺+澶栬竟璺+杈圭嚎锛屾墍浠ヨ鍋囧浣犺缃殑瀹藉害鏄粬鏈潵鐨勫疄闄呭搴︾殑璇濓紝濡傛灉浣犳兂鍔犱笂鍐呰竟璺濓紝澶栬竟璺濇垨鑰呰竟绾匡紝浣犲氨蹇呴』浠庝綘璁剧疆鐨勫搴閲鍑忓幓浠栦滑銆傚綋鐒朵綘濡傛灉浣犲湪杩欎釜...
绛旓細鍋囪鏈夊洓涓猟iv锛屽浜庝粬浠叡鏈夌殑灞炴э紝鍙互璋冪敤绫昏缃細鎶婄被鍚嶉泦涓湪涓璧凤細.class-1 .class-2 .class-3 .class-4{杩欓噷鏄洓涓被鍏卞悓鎷ユ湁鐨勫睘鎬;} 杩欐牱灏卞彲浠ヤ竴娆¤缃4涓猟iv鐨勫叡鍚屽睘鎬т簡锛佸浜庡悇鑷鏈夌殑灞炴у彲浠ヨ皟鐢↖D璁剧疆锛涗袱鑰呬簰涓嶅奖鍝嶏紒
绛旓細CSS浠ｇ爜缂╁啓鍙互鎻愰珮浣犲啓浠ｇ爜鐨勯熷害,绮剧畝浣犵殑浠ｇ爜閲忋鍦–SS閲岄潰鏈変笉灏戝彲浠ョ缉鍐欑殑灞炴,鍖呮嫭margin,padding,border,font,background鍜岄鑹插肩瓑,濡傛灉鎮ㄥ浼氫簡浠ｇ爜缂╁啓,鍘熸湰杩欐牱鐨勪唬鐮:li{font-family:Arial, Helvetica, sans-serif;font-size: 1.2em;line-height: 1.4em;padding-top:5px;padding-bottom:10px;padding...
