margin:auto 与 margin:0 auto 区别
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 区别相关推荐
- CSS中:margin和padding的区别 margin:auto与margin: 0 auto区别
css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距.padding-right:10px; 右 ...
- text-align:center 和margin:0 auto的区别
基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式; 该属性通过指定行框与哪个点对齐,从而设置块级元素内文本水平对齐方式; 一般情况下设置文本对齐方式的时使用此属性.支持值 ...
- margin:auto 和margin:0 auto的区别
1.意思不同.margin:auto=margin:auto auto auto auto,表示上下左右都为auto:margin:0 auto=margin:0 auto 0 auto,表示上下为0 ...
- margin 0 auto 什么意思
今天在写h5的时候遇到了居中的问题(网页自适应),让后就上网上查了相关的资料,顺便整理一下margin中两个参数的意思: margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表 ...
- [css] 怎么IE6下在使用margin:0 auto;无法使其居中?
[css] 怎么IE6下在使用margin:0 auto;无法使其居中? 浏览器解析的问题,IE6下需要对居中的元素设置text-align:center属性使其margin:0 auto;生效. 个 ...
- 块状元素的居中,首先设置宽度,再设 margin: 0 auto
块状元素的居中,首先设置宽度 width="10px",再设 margin: 0 auto; . 转载于:https://www.cnblogs.com/npk19195globa ...
- css中margin:0 auto没作用
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...
- margin: 0 auto;的作用
在html中,为什么我们设置一个margin: 0 auto;就可以使得块元素居中? <!DOCTYPE html> <html lang="en"> &l ...
- 固定定位的盒子使用margin:0 auto;是无法水平居中的,此时该怎么操作呢?
固定定位的盒子使用margin:0 auto:是无法水平居中的,此时该怎么操作呢? 第一步 第二步 建议 完整小栗子 第一步 定位距离左侧(相对于浏览器)50%,此时盒子左侧是在浏览器中间的 posi ...
最新文章
- js 点击侧边栏展示内容_【DEMO】JS实现侧边栏信息展示效果
- 我艹,MySQL数据量大时,delete操作无法命中索引。
- python的合法名称_Python未定义名称:turn。!
- python 相对导入_python 相对导入与绝对导入
- 转:在csv中维护变量参数
- python随机数调用
- 经典卷积神经网络的学习(二)—— VGGNet
- opencv 仿射变换与透视变换详解
- 华三交换机如何进入配置_H3C交换机应该如何安装配置解析
- 手机测试的主要测试内容
- 【最新】解决Github网页上图片显示失败的问题
- Cesium3Dtilesets 使用customShader的解读以及泛光效果示例
- 【托业】【语法题】笔记
- PKI详解与openssl实现私有CA证书签发
- logback系列之四:输出日志到不同文件
- rk3568 LTE(EC20--GPS)
- bk=1160,求k值,bn是一个集合{2^t+2^s+2^r}且t>s>r>=0程序验证
- 将优狐智能插座接入 Domoticz
- excel两个表格按照某一数值匹配其他数据
- ffmpeg学习日记506-源码-av_image_copy()函数分析及功能
热门文章
- 电视广告时段的收视率评估工具(CPRP Table评估)
- Django初识(8.常用视图之DetailView,UpdateView,DeleteView)完结
- [系统安全] 四十九.恶意软件分析 (5)Cape沙箱分析结果Report报告的API序列批量提取详解
- 境外中国互联网上市公司达到39家
- c上传文件到linux服务器,上传文件到Linux服务器
- Qt编写的RTSP播放器+视频监控(ffmpeg版本)
- (CUDA 编程5).CUDA编程接口(一)------一十八般武器
- shiro+springboot自定义sessionId
- antd table表格选中每行设置背景色
- 电脑强制关机两次后报错自动修复你的电脑未正确启动