CSS中:margin:auto与margin: 0 auto;有什么区别 求教css中元素的auto属性值是什么意思,比如margin...

css\u4ee3\u7801\u4e2d margin:auto \u548c margin:0 auto \u6709\u4ec0\u4e48\u533a\u522b\uff1f

\u4e00\u3001\u533a\u522b
1\u3001\u53c2\u6570\u8be6\u89e3
margin:auto = margin:auto auto auto auto;margin:0 auto = margin:0 auto 0 auto;
margin:n m p q\u8868\u793a\u8be5\u5143\u7d20\u4e0a\u5916\u8fb9\u8ddd\u4e3an\uff0c\u53f3\u5916\u8fb9\u8ddd\u4e3am\uff0c\u4e0b\u5916\u8fb9\u8ddd\u4e3ap\uff0c\u5de6\u5916\u8fb9\u8ddd\u4e3aq\uff0c\u5373 margin:\u4e0a \u53f3 \u4e0b \u5de6 \uff0c\u9006\u65f6\u9488\u4e00\u5708\u3002
2\u3001\u5b9e\u4f8b\u8bf4\u660e
margin\u540e\u9762\u662f\u67094\u4e2a\u53c2\u6570\u7684\u3002
\u4f8b\u5982\uff1amargin:1px 2px 3px 4px\uff0c\u5206\u522b\u8868\u793a \u4e0a\uff081px\uff09\u3001\u53f3(2px)\u3001\u4e0b(3px)\u3001\u5de6(4px)\u3002
margin\u540e\u9762\u5982\u679c\u53ea\u51992\u4e2a\u53c2\u6570\u7684\u3002
\u4f8b\u5982\uff1amargin\uff1a1px 2px
\u90a3\u4e48\u8fd9\u662f\u4ee3\u8868 \u4e0a\u4e0b\u90fd\u4e3a1px \u5de6\u53f3\u90fd\u4e3a2px\u3002

\u6269\u5c55\u8d44\u65991\u3001margin 0px auto\u5c5e\u6027\u89c4\u5219
margin:0px auto\u4ee3\u8868\u5bf9\u8c61\u4e0a\u4e0b\u95f4\u9694\u4e3a0px\uff0c\u5de6\u53f3\u95f4\u9694\u6839\u636e\u5bf9\u8c61\u5bbd\u5ea6\u81ea\u9002\u5e94\u3002
margin:0px auto\u7b80\u5199\uff1a\u53ef\u4ee5\u53bb\u63890\u540e\u9762\u7684px\u5355\u4f4d\uff0c\u4e00\u822cCSS\u4ee3\u7801\u4e2d\u5982\u679c\u503c\u4e3a0\uff0c\u90a3\u53ef\u4ee5\u4e0d\u7528\u8ddfhtml\u957f\u5ea6\u5355\u4f4d\u3002
margin;0px auto\u6216margin:0 auto\u4f5c\u7528\uff1a\u5e38\u7528\u4e8e\u8ba9DIV\u5e03\u5c40\u5c45\u4e2d,\u8d77\u5230\u8ba9\u5e03\u5c40\u5c45\u4e2d\u4f5c\u7528\u3002
2\u3001margin:auto\u5c5e\u6027\u8bf4\u660e
margin:auto\u65f6\u6d4f\u89c8\u5668\u8ba1\u7b97\u5916\u8fb9\u8ddd,\u5f53margin\u5b9a\u4e49\u4e3aauto\u65f6,\u5c06\u5360\u7528\u53ef\u7528\u7a7a\u95f4\u62160px \u3002
margin:auto\u65f6\u6d4f\u89c8\u5668\u4f1a\u81ea\u52a8\u5206\u914d\u5de6\u53f3\u8fb9\u8ddd\uff0c\u4f7f\u5143\u7d20\u5e73\u5747\u5206\u914d\u5360\u7528\u7236\u7ea7\u5bb9\u5668\u7684\u5de6\u53f3\u8fb9\u8ddd\uff0c\u8fbe\u5230\u5143\u7d20\u5c45\u4e2d\u7684\u76ee\u7684
3\u3001CSS\u4e2dauto\u5143\u7d20
\u5b9a\u4e49auto\u5143\u7d20\uff0c\u56e0\u5143\u7d20\u7c7b\u578b\u548c\u4e0a\u4e0b\u6587\u800c\u5f02\u3002\u5728\u8fb9\u8ddd\u4e2d\uff0cauto\u53ef\u4ee5\u8868\u793a\u4e24\u79cd\u60c5\u51b5\uff1a\u5360\u7528\u53ef\u7528\u7a7a\u95f4\u62160 px\u3002\u8fd9\u4e24\u4e2a\u5c06\u4e3a\u5143\u7d20\u5b9a\u4e49\u4e0d\u540c\u7684\u5e03\u5c40\u3002
4\u3001margin\u7684\u5144\u5f1f\u5c5e\u6027padding
margin\u5c5e\u6027\u662f\u5916\u8fb9\u8ddd\uff0c\u800cpadding\u5c5e\u6027\u662f\u5185\u8fb9\u8ddd\u3002padding\u662f\u6307\u81ea\u8eab\u8fb9\u6846\u5230\u81ea\u8eab\u5185\u90e8\u53e6\u4e00\u4e2a\u5bb9\u5668\u8fb9\u6846\u4e4b\u95f4\u7684\u8ddd\u79bb\uff0c\u5c31\u662f\u5bb9\u5668\u5185\u8ddd\u79bb\u3002

\u628a\u4e00\u4e2a\u5c5e\u6027\u7684\u503c\u8bbe\u7f6e\u4e3aauto\uff0c\u5c31\u662f\u8ba9\u5404\u4e2a\u6d4f\u89c8\u5668\u5bf9\u8be5\u5c5e\u6027\u4f7f\u7528\u5404\u81ea\u7684\u9ed8\u8ba4\u503c\u3002
\u5b9a\u4e49\u4e00\u4e2a\u65b9\u5411\u4e3aauto\uff0c\u8ba9\u6d4f\u89c8\u5668\u81ea\u52a8\u9009\u62e9\u5408\u9002\u7684margin\uff08\u9875\u8fb9\u8ddd\uff09\u5927\u5c0f\uff1b
margin:0 auto\u53ef\u4ee5\u5b9e\u73b0\u6c34\u5e73\u5c45\u4e2d\uff0c\u5176\u76f8\u5f53\u4e8emargin\uff1a0\uff0cauto\uff0c0\uff0cauto
margin:auto = margin:auto auto auto auto;
margin:0 auto = margin:0 auto 0 auto;
margin:n m p q\u8868\u793a\u8be5\u5143\u7d20\u4e0a\u5916\u8fb9bai\u8ddd\u4e3an\uff0c\u53f3\u5916\u8fb9\u8ddd\u4e3am\uff0c\u4e0b\u5916\u8fb9\u8ddd\u4e3ap\uff0c\u5de6\u5916\u8fb9\u8ddd\u4e3aq\uff0c\u5373 margin:\u4e0a \u53f3 \u4e0b \u5de6 \uff0c\u9006\u65f6\u9488\u4e00\u5708\u3002

\u6269\u5c55\u8d44\u6599\uff1a
\u201cmargin:20px;\u201d\u8868\u793a\u56db\u4e2a\u65b9\u5411\u7684\u5916\u8fb9\u8ddd\u90fd\u662f20px\uff1b
\u201cmargin:20px 40px;\u201d\u8868\u793atop\u4e3a20px\uff0cright\u4e3a40px\uff1b\u7531\u4e8ebottom\u548cleft\u7f3a\u7701\uff0c\u6240\u4ee5\u81ea\u52a8\u5c06\u5b83\u4eec\u5206\u522b\u8bbe\u4e3a20px\u548c40px\u3002\u8f6c\u5316\u4e3a\u7b2c4\u79cd\u5199\u6cd5\u4e3a\uff1a\u201cmargin:20px 40px 20px 40px;\u201d\u3002
\u201cmargin:20px 40px 60px;\u201d\u8868\u793atop\u4e3a20px\uff0cright\u4e3a40px\uff0cbottom\u4e3a60px\uff1b\u7531\u4e8eleft\u7f3a\u7701\uff0c\u6240\u4ee5\u81ea\u52a8\u5c06\u5b83\u8bbe\u4e3a40px\u3002\u8f6c\u5316\u4e3a\u7b2c4\u79cd\u5199\u6cd5\u4e3a\uff1a\u201cmargin:20px 40px 60px 40px;\u201d\u3002
\u53c2\u8003\u8d44\u6599\u6765\u6e90\uff1a\u767e\u5ea6\u767e\u79d1-margin

1、意思不同。margin:auto=margin:auto auto auto auto,表示上下左右都为auto;margin:0 auto=margin:0 auto 0 auto,表示上下为0,左右为auto;

2、居中方式不同。margin:auto表示横竖都居中,margin: 0 auto表示横居中,竖不居中;

margin后面一般会跟4个参数,如margin:1px、1px、1px、1px,分别表示上外边距为1px、右外边距为1px、下外边距为1px、左外边距为1px。

如果后面只写2个参数的话,如margin:1px、2px,则表示上下外边距为都为1px,左右外边距都为2px。

扩展资料

Cascading Style Sheets,中文含义是层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

margin是CSS的一个属性,主要功能是简写属性在一个声明中设置所有当前或者指定元素外边距属性。该属性可以有 1 到 4 个值。margin属性接受任何长度单位、百分数值甚至负值。

margin 属性可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。所有浏览器都支持 margin 属性。

参考资料

CSS(层叠样式表)_百度百科  



margin的这个问题在w3school中就有详细的解释建议你看看,
margin有着一个属性继承的机制,大概意思是margin:上 右 下 左 ,其中:
你如果只填写了上,上的属性就会被右和下继承,然后右的属性又会继承给左
margin:auto完全写开的话应该是margin:auto auto auto auto;而margin:0 auto完全写开的话是margin:0 auto 0 auto;一个是上下左右全自动,一个是上下0左右自动
——来自一个前端学徒

看下css手册,margin后跟四个参数:top right bottom left 还可简写为两个参数 即为 上下 左右 也可以设置一个参数 这样就代表设置这四个选项了,解释下margin: 0 auto;0为上下外间距为0px auto代表左右自动适应。

margin:auto 意思是四个方向都用auto
margin:0 auto 的意思是上下为0 左右是auto
用div+css布局时多数会这样来居中
<div style="margin:0 auto"></div>

首先你要知道,margin后面是有4个参数的。例如:margin:1px 1px 1px 1px
分别表示 上、右、下、左。如果只写2个参数的话,比如:margin:1px 2px
那么着是代表 上下都为1px 左右都为2px.
至于居中,很明显,margin:0 auto 是标准的写法!明白???

  • 鍦ㄧ嚎绛!!鍚勭娴忚鍣ㄥ眳涓棶棰樺緢鐑﹁簛,姹備富div 鐨勬牱寮忓竷灞,璁╀粬閫傚悎鍚勭...
    绛旓細绗竴锛岀湅缂栫爜璺css瀵逛笉瀵瑰緱涓婏細UTF-8 鍜 GBK 锛堝涓嶄笂鍙兘浼氬け鏁堬級绗簩锛岀湅浣犲ご閮ㄦ槸浠涔堣鏍硷紙濡傚浘锛夛紝鎴戜竴鑸繖绉嶅啓娉曟槸鑳藉疄鐜扮殑
  • 濡備綍瀹氬埗Foundation4椤堕儴宸ュ叿鏍
    绛旓細margin-top: 2.5px;}鎴戜滑宸茬粡鏀瑰彉鑿滃崟鐨勫ソ鍑犱釜鍦版柟(鏍峰紡),濡傞鍏,鎴戜滑灏辨敼鍙樻縺娲(active)鑿滃崟榛樿鐨勯粦鑳屾櫙涓衡CSS娓愬彉鈥,鎺ョ潃缁欎笉婵娲昏彍鍗曟坊鍔爃over鐘舵,骞舵敼鍙橀噷闈㈢殑鏂囧瓧棰滆壊涓烘繁鐏拌壊,鐩殑鏄樉绀哄緱鏇翠负娓呮櫚銆傜劧鍚.top-bar-section li:hover 鐨勬牱寮忓皢浣垮緱涓嬫媺鑿滃崟閲岀殑瀛愰」鐩榧犳爣鎮┖鏃舵樉绀虹壒瀹氭晥鏋溿備负浜嗗畬鍠勬牱寮...
  • 扩展阅读:www.sony.com.cn ... mac十大最好看色号31 ... java.52emu.cn ... 2024永久免费access进销存 ... www.ccsoa.org.cn ... m.4j4j.cn ... www.968777.cn ... www.9377.cn ... 国产377vc精华真能祛斑吗 ...

    本站交流只代表网友个人观点,与本站立场无关
    欢迎反馈与建议,请联系电邮
    2024© 车视网