CSS中关于margin有一点不明白

NewUserFF 2011-01-31 09:06:38

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<div style="height:300px; background:#ccc;">
<div style="width:50px; height:50px; background:#f00; margin:0 0 0 0;"></div>
</div>
</body>
</html>

其中margin设置为0 0 0 0,按照我的理解,margin的四个值不是按上,右,下,左的顺序取的吗?那应该先取上外边距为0,再取右外边距为0,由于父辈的div的height已确定,则下外边距为浏览器自动计算,然后左边距再设为0,这样最后显示的效果应该是一个红色的方框靠在背景的右上角,可实际是一个红色的方框靠在背景的左上角,这是为什么?那如果我想让红色方块显示在背景的下方中央处,应该怎么搞?十分感谢!
...全文
84 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
NewUserFF 2011-02-03
  • 打赏
  • 举报
回复
各位大哥大姐啊,我咋一个都没看懂在说什么呢?不过这两天我琢磨了一下,我有一点明白了,目前只想知道一个问题:我如何才能把这个红色的方块放到灰色大块(即父辈的div)的下方中央,再麻烦各位高手解释一下为什么这样可以放到下方中央,解决掉这个问题的话,立即就结贴,谢谢各位大哥大姐,新年快乐!
beowulf2005 2011-02-03
  • 打赏
  • 举报
回复
思路好像不对。这个问题没那么简单哦!
光用margin可能做不到的,适当运用position。
下面这段,红方沉底居中。父高度可任意。
FF Chrome 通过,IE 我没测

<body>
<!-- 父 -->
<div style=" height:300px; background:#ccc; position: relative;">
<!-- 沉底 -->
<div style=" width:100%; height:50px; position: absolute; bottom: 0px;">
<!-- 红方 -->
<div style="width:50px; height:50px; background:#f00; margin: 0 auto;"></div>
</div>
</div>
</body>
KK3K2005 2011-02-03
  • 打赏
  • 举报
回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<div style="height:300px; background:#ccc;">
<div style="width:50px; height:50px; background:#f00; margin:100PX AUTO;"></div>
</div>
</body>
</html>

athrunzero 2011-01-31
  • 打赏
  • 举报
回复
其实当margin取4个值的时候,margin只认上和左,右和下不认的。
athrunzero 2011-01-31
  • 打赏
  • 举报
回复

<body>
<div style="height:300px; background:#ccc;">
<div style="width:50px; height:50px; background:#f00; margin:250px auto 0 auto;"></div>
</div>
</body>

这个是红色方块显示在背景的下方中央处 其中margin:250px auto 0 auto;表示 上边距250px 左右自适应。
athrunzero 2011-01-31
  • 打赏
  • 举报
回复
当margin的四个值都设置为相同时,它会默认取上外边距和左外边距
例如 margin:10px 10px 10px 10px;(可以写成margin:10px;) 实际效果是 居左10px 居上10px
chokobo 2011-01-31
  • 打赏
  • 举报
回复
实在没看懂都在说什么,
<div style="height:300px; background:#ccc;">
<div style="width:50px; height:50px; background:#f00; margin:0 0 0 0;"></div>
理所当然是左上角有个红的div
xmlife 2011-01-31
  • 打赏
  • 举报
回复
其实很简单,别忘了给分
为了兼容IE和FF浏览器,可以修改如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<div style="height:300px; background:#ccc; clear:both;">
<div style="width:50px; height:50px; background:#f00; margin:0; float:right;"></div>
</div>
</body>
</html>
<!-------不太漂亮的分隔线,分啊分啊------>
athrunzero 2011-01-31
  • 打赏
  • 举报
回复
margin-top:250px; margin-left:auto; margin-right:auto;
可以写成
margin:250px auto 0 auto;
athrunzero 2011-01-31
  • 打赏
  • 举报
回复
[Quote=引用 4 楼 newuserff 的回复:]
引用 2 楼 athrunzero 的回复:

HTML code

<body>
<div style="height:300px; background:#ccc;">
<div style="width:50px; height:50px; background:#f00; margin:250px auto 0 auto;"></div>
</div>
</body>

……
[/Quote]
这里有个bug 应该是

<body>
<div style="height:300px; background:#ccc; overflow:hidden;">
<div style="width:50px; height:50px; background:#f00; margin-top:250px; margin-left:auto; margin-right:auto;"></div>
</div>
</body>
Acesidonu 2011-01-31
  • 打赏
  • 举报
回复
是按从左到右从上到下的顺序
gw6328 2011-01-31
  • 打赏
  • 举报
回复
<div style="background-color:red;margin:30px;height:10px;">

</div>

如果你没有设宽度,左右会有效果的
NewUserFF 2011-01-31
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 athrunzero 的回复:]

HTML code

<body>
<div style="height:300px; background:#ccc;">
<div style="width:50px; height:50px; background:#f00; margin:250px auto 0 auto;"></div>
</div>
</body>


这个是红色方块显示在背景的下方中央处 其中margin……
[/Quote]
这位兄弟,我也感觉你这段代码应该靠在背景下方中央处,可我实际运行一下,发现居然靠在上方中央处了(我用的是Chrome),看来这个margin十分诡异......

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧