css代码中 margin:auto 和 margin:0 auto 有什么区别？ 求助css相关问题text-align与margin：aut...

css\u4ee3\u7801table {margin: 0 auto;}\u662f\u4ec0\u4e48\u610f\u601d?

margin\u4e3a\u5916\u8fb9\u8ddd\uff0c\u53ca\u8fb9\u6846\u5916\u5230\u5916\u90e8\u5bb9\u5668\u7684\u8ddd\u79bb\uff0c\u6709\u56db\u79cd\u53c2\u6570\u8bbe\u7f6e\u65b9\u5f0f\uff1a

margin:5px; /*\u56db\u8fb9\u5916\u8fb9\u8ddd\u90fd\u4e3a5px*/
margin:5px 10px; /*\u4e0a\u4e0b\u5916\u8fb9\u8ddd5px\uff0c\u5de6\u53f3\u5916\u8fb9\u8ddd10px*/
margin:5px 10px 15px; /*\u4e0a\u5916\u8fb9\u8ddd5px\uff0c\u5de6\u53f3\u5916\u8fb9\u8ddd10px\uff0c\u4e0b\u5916\u8fb9\u8ddd15px*/
margin:5px 10px 15px 20; /*\u987a\u65f6\u9488\u65b9\u5411\uff1a\u4e0a5px\uff0c\u53f310px\uff0c\u4e0b15px\uff0c\u5de620px*/

margin:0 auto; /* \u4e0a\u4e0b\u5916\u8fb9\u8ddd\u4e3a0\uff0c\u5de6\u53f3\u81ea\u52a8\uff0c\u5b9e\u9645\u6548\u679c\u4e3a\u5de6\u53f3\u5c45\u4e2d */

table {margin: 0 auto;}
\u5c31\u662f\u8bf4\u8bbe\u5b9a\u9875\u9762\u91cctable\u8868\u683c\u7684\u4e0a\u4e0b\u5916\u8fb9\u8ddd\u4e3a0\uff0c\u5de6\u53f3\u81ea\u9002\u5e94\u5c45\u4e2d

margin\uff1aauto 0\uff1b \u8fd9\u4e2a\u7684\u610f\u601d\u662f \u5916\u8865\u4e01\u4e0a\u4e0b\u4e3a\u81ea\u9002\u5e94 \u5de6\u53f3\u4e3a0px
\u548c\u4e0d\u540c\u7684\u6837\u5f0f\u7ed3\u5408\u6709\u4e0d\u540c\u7684\u6548\u679c

\u4ee5\u4e0b\u662fmargin\u7684 \u8be6\u89e3 \u548c\u4f8b\u5b50

margin
\u57fa\u672c\u7279\u6027
\u521d\u59cb\u503c\uff1a \u65e0\uff08not defined for shorthand properties\uff09 \u9002\u7528\u4e8e\uff1a \u6240\u6709\u5143\u7d20
\u7ee7\u627f\u6027\uff1a \u65e0 \u767e\u5206\u6bd4\uff1a \u6839\u636e\u5305\u542b\u5143\u7d20\u7684\u5bbd\uff08refer to width of containing block \uff09
\u5a92\u4f53\uff1a visual \u7248\u672c\uff1a CSS1
\u517c\u5bb9\u6027\uff1a IE4+ NS4+

\u57fa\u672c\u8bed\u6cd5
margin : auto | length
\u8bed\u6cd5\u53d6\u503c
auto : \u53d6\u8ba1\u7b97\u673a\u503c
length : \u7531\u6d6e\u70b9\u6570\u5b57\u548c\u5355\u4f4d\u6807\u8bc6\u7b26\u7ec4\u6210\u7684\u957f\u5ea6\u503c | \u767e\u5206\u6570\u3002
\u767e\u5206\u6570\u662f\u57fa\u4e8e\u7236\u5bf9\u8c61\u7684\u9ad8\u5ea6\u3002\u9664\u4e86\u5185\u8054\u5bf9\u8c61\u7684\u4e0a\u4e0b\u5916\u8865\u4e01\u5916\uff0c
\u652f\u6301\u4f7f\u7528\u8d1f\u6570\u503c\u3002\u8bf7\u53c2\u9605 \u957f\u5ea6\u5355\u4f4d \u3002
\u4f7f\u7528\u8bf4\u660e
\u68c0\u7d22\u6216\u8bbe\u7f6e\u5bf9\u8c61\u56db\u8fb9\u7684\u5916\u8865\u4e01\u3002\u9ed8\u8ba4\u503c\u4e3a 0 0\u3002\u5982\u679c\u63d0\u4f9b\u5168\u90e8\u56db\u4e2a\u53c2\u6570\u503c\uff0c\u5c06\u6309\u4e0a\uff0d\u53f3\uff0d\u4e0b\uff0d\u5de6\u7684\u987a\u5e8f\u4f5c\u7528\u4e8e\u56db\u8fb9\u3002\u5982\u679c\u53ea\u63d0\u4f9b\u4e00\u4e2a\uff0c\u5c06\u7528\u4e8e\u5168\u90e8\u7684\u56db\u8fb9\u3002\u5982\u679c\u63d0\u4f9b\u4e24\u4e2a\uff0c\u7b2c\u4e00\u4e2a\u7528\u4e8e\u4e0a\uff0d\u4e0b\uff0c\u7b2c\u4e8c\u4e2a\u7528\u4e8e\u5de6\uff0d\u53f3\u3002\u5982\u679c\u63d0\u4f9b\u4e09\u4e2a\uff0c\u7b2c\u4e00\u4e2a\u7528\u4e8e\u4e0a\uff0c\u7b2c\u4e8c\u4e2a\u7528\u4e8e\u5de6\uff0d\u53f3\uff0c\u7b2c\u4e09\u4e2a\u7528\u4e8e\u4e0b\u3002
\u5728IE4.0+\u4e2d\u4f60\u53ef\u4ee5\u4f7f\u7528 em \u548c ex \u5355\u4f4d\u3002\u5728IE4.0+\u4e2d\u6b64\u5c5e\u6027\u4e0d\u652f\u6301\u7528\u4e8e td \u548c th \u5bf9\u8c61\u3002\u8981\u8bbe\u7f6e\u5355\u5143\u683c\u5185\u7684\u5916\u8865\u4e01\uff0c\u8bf7\u4f7f\u7528\u5355\u5143\u683c\u5185\u7684\u5982 div \u3001 p \u7b49\u7c7b\u578b\u5bf9\u8c61\u7684\u6b64\u5c5e\u6027\u3002\u5728IE5.5+\u4e2d\u6b64\u5c5e\u6027\u652f\u6301\u5185\u8054\u5bf9\u8c61\u4f7f\u7528\u3002\u800c\u5728\u6b64\u524d\u7684\u7248\u672c\u4e2d\uff0c\u5185\u8054\u8981\u7d20\u8981\u4f7f\u7528\u8be5\u5c5e\u6027\uff0c\u5fc5\u987b\u5148\u8bbe\u5b9a\u5bf9\u8c61\u7684 height \u6216 width \u5c5e\u6027\uff0c\u6216\u8005\u8bbe\u5b9a position \u5c5e\u6027\u4e3a absolute \uff0c\u6216\u8005\u8bbe\u5b9a display \u5c5e\u6027\u4e3a block \u3002\u5bf9\u4e8e\u5185\u8054\u5bf9\u8c61\u6765\u8bf4\uff0c\u4e0a\u4e0b\u5916\u8865\u4e01\u5982\u679c\u88ab\u8bbe\u7f6e\u4e86\uff0c\u5c06\u662f\u7528\u4e8e\u8ba1\u7b97\u73af\u7ed5\u5185\u8054\u5bf9\u8c61\u7684\u8fb9\u6846\u533a\u57df\u7684\u3002\u5b83\u4eec\u7684\u503c\u4e0d\u4f1a\u5f71\u54cd\u5185\u8054\u5bf9\u8c61\u6240\u5728\u884c\u7684\u9ad8\u5ea6( height )\u3002\u5916\u8865\u4e01\u603b\u662f\u900f\u660e( transparent )\u7684\u3002\u6b64\u5c5e\u6027\u5bf9\u4e8e currentStyle \u5bf9\u8c61\u800c\u8a00\u662f\u53ea\u8bfb\u7684\u3002\u5bf9\u4e8e\u5176\u4ed6\u5bf9\u8c61\u800c\u8a00\u662f\u53ef\u8bfb\u5199\u7684\u3002\u5bf9\u5e94\u7684\u811a\u672c\u7279\u6027\u4e3a margin \u3002

\u4ee3\u7801\u793a\u4f8b


BODY { margin: 2em } /* all margins set to 2em */
BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
\u6216
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side (right) */
}


\u8fd9\u91cc em px \u7b49\u90fd\u662f\u5355\u4f4d


text-align

\u57fa\u672c\u7279\u6027
\u521d\u59cb\u503c\uff1a \u6839\u636e\u7528\u6237\u4ee3\u7406\u548c\u4e66\u5199\u65b9\u5411\uff08depends on user agent and writing direction \uff09 \u9002\u7528\u4e8e\uff1a \u5757\u72b6\u5143\u7d20
\u7ee7\u627f\u6027\uff1a \u6709 \u767e\u5206\u6bd4\uff1a N/A
\u5a92\u4f53\uff1a visual \u7248\u672c\uff1a CSS1
\u517c\u5bb9\u6027\uff1a IE4+

\u57fa\u672c\u8bed\u6cd5
text-align : left | right | center | justify
\u8bed\u6cd5\u53d6\u503c
left : \u9ed8\u8ba4\u503c\u3002\u5de6\u5bf9\u9f50
right : \u53f3\u5bf9\u9f50
center : \u5c45\u4e2d\u5bf9\u9f50
justify : \u4e24\u7aef\u5bf9\u9f50
\u4f7f\u7528\u8bf4\u660e
\u8bbe\u7f6e\u6216\u68c0\u7d22\u5bf9\u8c61\u4e2d\u6587\u672c\u7684\u5bf9\u9f50\u65b9\u5f0f\u3002\u6b64\u5c5e\u6027\u4f5c\u7528\u4e8e\u6240\u6709\u5757\u5bf9\u8c61(block elements)\u3002\u5728\u4e00\u4e2a div \u5bf9\u8c61\u91cc\u7684\u6240\u6709\u5757\u5bf9\u8c61\u7684\u4f1a\u7ee7\u627f\u6b64\u5c5e\u6027\u503c\u3002 \u5047\u5982\u5c5e\u6027\u6ca1\u6709\u8bbe\u7f6e\uff0c\u8fd9\u4e2a\u53c2\u6570\u5c06\u83b7\u53d6 null \u503c\u3002\u6b64\u5c5e\u6027\u5bf9\u4e8e currentStyle \u5bf9\u8c61\u800c\u8a00\u662f\u53ea\u8bfb\u7684\u3002\u5bf9\u4e8e\u5176\u4ed6\u5bf9\u8c61\u800c\u8a00\u662f\u53ef\u8bfb\u5199\u7684\u3002\u5bf9\u5e94\u7684\u811a\u672c\u7279\u6027\u4e3a textAlign \u3002
\u4ee3\u7801\u793a\u4f8b

2 DIV.center { text-align: center }

一、区别

1、参数详解

margin:auto = margin:auto auto auto auto;
margin:0 auto = margin:0 auto 0 auto;

margin:n m p q表示该元素上外边距为n，右外边距为m，下外边距为p，左外边距为q，即 margin:上 右 下 左 ，逆时针一圈。

2、实例说明

margin后面是有4个参数的。

例如：margin:1px 2px 3px 4px，分别表示 上（1px）、右(2px)、下(3px)、左(4px)。

margin后面如果只写2个参数的。

例如：margin：1px 2px

那么这是代表 上下都为1px 左右都为2px。

扩展资料

1、margin 0px auto属性规则

margin:0px auto代表对象上下间隔为0px，左右间隔根据对象宽度自适应。

margin:0px auto简写：可以去掉0后面的px单位，一般CSS代码中如果值为0，那可以不用跟html长度单位。

margin;0px auto或margin:0 auto作用：常用于让DIV布局居中,起到让布局居中作用。

2、margin:auto属性说明

margin:auto时浏览器计算外边距,当margin定义为auto时,将占用可用空间或0px 。

margin:auto时浏览器会自动分配左右边距，使元素平均分配占用父级容器的左右边距，达到元素居中的目的

3、CSS中auto元素

定义auto元素，因元素类型和上下文而异。在边距中，auto可以表示两种情况：占用可用空间或0 px。这两个将为元素定义不同的布局。

4、margin的兄弟属性padding

margin属性是外边距，而padding属性是内边距。padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

前者是作用于四条边上的，所以它在水平垂直方向上都居中，后者是分别作用在上下边和左右边上的，所以它只在水平方向上居中，auto就是实现居中的关键，它就像是一根弹簧，帮盒子在某个方向实现居中。

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

有区别
margin:auto是指上下左右全都auto
margin:0 auto 是指上下是0，左右auto
auto实现居中很简单啊，你左右边距都auto了，那不就是居中么

扩展阅读：js修改css样式margin ... 2024永久免费access进销存 ... 16888精品货源入口 ... 2023永久免费acces ... css margin auto ... css中margin和padding ... css中margin-bottom ... windows永久禁止更新mv ... 免费代码生成器 ...