margin:auto 与 margin:0 auto 区别
来源:互联网 发布:淘宝商家贷款条件 编辑:程序博客网 时间:2024/06/05 10:59
margin的重要性:
有个不容置疑的事,前端开发人员没有人能够忽视CSS margin
的重要性。CSS coding时,margin的使用频率就如同呼吸般频繁,如果我可以说得夸张点的话。
margin作为CSS盒模型基本组成要素之一,是非常Basis的一个技术手段,所以我想对于它的一些基本情况应该不用太介绍了?
margin经常被用来做什么?
- 让块元素水平居中;
- 让元素之间留有舒适的留白;
- 处理特殊的first或last,大家懂的?
- 一些布局;
需要注意的地方:
- margin折叠;
- margin的百分比值;
- margin的auto值;
- margin和相对偏移top, right, bottom, left的异同;
- IE6浮动双margin Bug;
- IE6浮动相邻元素3px Bug;
看起来似乎有不少的知识点?恩,这些都是我们需要了解的,包括一些没有被列举出来的点。
今天要讲的其实只是其中很少的一部分,恩,标题里有:keyword auto
keyword auto
auto是margin的可选值之一。相信大家平时使用auto值时,最多的用法大概是 margin: 0 auto;
和 margin: auto;
,恩,是的,块元素水平居中。让我们来看看代码实现:
CSS:
#demo{ width: 500px; margin: auto; /* 或者 margin: 0 auto; */}
HTML:
<div id="demo"> <p>恩,我就是那个需要水平居中的家伙。</p></div>
为了更明显点,我们来看个例子:margin实现块元素水平居中。Cool,这么简单就实现了水平居中。
不过你可能也发现了不论是 margin: auto;
还是 margin: 0 auto;
效果都是一样的,都是让 #demo 水平居中了,但纵向并没有任何变化。
大家都知道 margin
是复合属性,也就是说 margin: auto;
其实相当于 margin: auto auto auto auto;
,margin: 0 auto;
相当于margin: 0 auto 0 auto;
,四个值分别对应上右下左。至于CSS中的上、右、下、左顺序就不做赘述了。
根据规范,margin-top: auto;
和 margin-bottom: auto;
,其计算值为0。这也就解释了为什么margin: auto;
等同于margin: 0 auto;
。但仅此而已吗?让我们来看看规范描述:
原文:On the A edge and C edge, the used value of ‘auto’ is 0.
翻译:如果场景是A和C,那么其
auto
计算值为0
。更详细请参阅:margin properties
由此可见,它们还与书写模式 writing-mode
和 文档流方向 direction
有关。所以我们说margin: auto;
等同于margin: 0 auto;
是不太精准的,因为还有前置条件。
了解这些很重要,这有助于理解 margin
属性的设计意图。
OK,聊了这么多,我们回到默认的 writing-mode: horizontal-tb;
和 direction: ltr;
的情况继续往下,后面的话题都基于这个前提。
为什么auto能实现水平居中?
这是因为水平方向的 auto
,其计算值取决于可用空间(剩余空间)。
原文:On the B edge and D edge, the used value depends on the available space.
翻译:如果场景是B和D,那么其
auto
计算值取决于可用空间。
想象这样一个场景,一个宽100px的p被包含在一个宽500px的div内,此时设置 p 的 margin-left 值为 auto,大家觉得结果会怎样?
CSS:
#demo{ width: 500px;}#demo p{ width: 100px; margin-left: auto;}
HTML:
<div id="demo"> <p>恩,我就是那个p。</p></div>
结果你猜到了吗?没猜到也不怕,用事实说话:margin-left关键字auto结果猜想。
好了,结果得到了,p相对于包含块右对齐了,这与规范描述一致。margin-left:auto;
自动占据了包含块的可用空间,即 500 - 100px = 400px。也就是说auto最后的计算值为400px,即margin-left:400px;
。所以margin-right:auto;
的结果会相当于左对齐。
到这里,相信大家都知道为什么 margin: auto;
和 margin: 0 auto;
能实现水平居中了。因为左右方向的auto值均分了可用空间,使得块元素得以在包含块内居中显示。
至于垂直方向上为什么无法居中,还有更深层的原因吗?大家可以思考一下。
- margin:auto 与 margin:0 auto 区别
- margin:auto、margin:0 auto、margin:0
- TextAlign 与 margin:0 auto
- 浅谈margin:0 auto
- margin:0 auto;
- margin:0 auto 与 text-align:center 的区别
- margin:0 auto 与 text-align:center 的区别
- margin:0 auto 与 text-align:center 的区别
- 【转】margin:0 auto 与 text-align:center 的区别
- 居中 margin:0 auto与text-align:center的区别
- margin:0 auto 与 text-align:center 的区别 基
- 论text-align:center与margin:0 auto的区别。
- margin:0 auto;和margin:0px;区别在哪里?
- margin:0 auto;无法居中
- margin: 0 auto 请注意
- margin:0 auto; 居中问题
- 居中解析margin:0 auto;
- margin:0 auto; 居中问题
- 34.函数的本质及基本使用
- swift学习之路(十六)类的继承
- Python中的__name__和__main__含义详解
- iOS js oc相互调用(JavaScriptCore)
- 找零钱问题中动态优化的空间复杂度优化
- margin:auto 与 margin:0 auto 区别
- c++:指向学生类的指针:求最高成绩
- 转载PHP数组浅析
- iOS js oc相互调用(JavaScriptCore)(二)
- DP 0-1背包问题
- [LeetCode]problem 114. Flatten Binary Tree to Linked List
- WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping
- 多态概念
- MyBatis-环境配置以及查询