转载

发表于 2016年04月03日
浏览 (591)
评论 (0)

CSS：不同元素margin的计算

关于什么元素的分类可以看我这篇文章 CSS:关于元素高度与宽度的讨论系列文章（二）

行内级元素

Inline，非置换元素:如果margin值为auto，则 margin-left 和 margin-right 的计算值也就为0
Inline,置换元素:同上
Inline-block,置换元素在文档流中:同上
Inline-block,非置换元素在文档流中:同上

块级元素

块级非置换元素，在文档流中

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

下面的情况下，如果margin值为auto

如果width是auto值，那么其他值是auto的值就为0
如果 margin-left 和 margin-right 的值为auto，使用的值相等，那么就相对于包含块水平居中。

块级置换元素，在文档流中

同块级非置换元素一样。

总结

行内级置换元素和非置换元素，在margin值为 auto 时， margin-left 和 margin-auto 的计算值都为0。

块级置换元素和非置换元素:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

如果width是auto值，那么其他值是auto的值就为0
如果 margin-left 和 margin-right 的值为auto，使用的值相等，那么就相对于包含块水平居中。

原文 https://segmentfault.com/a/1190000004850217

正文到此结束

所属分类：编程技术

本文标签： 文章 http 总结 CSS https
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

热门推荐

openfire数据库安装指南

浏览(13,742) 评论(0)
Caffe 深度学习框架上手教程

浏览(10,456) 评论(0)
ReactiveCocoa入门教程：第一部分

浏览(11,287) 评论(0)
开源HIDS-OSSEC使用实例:监测CC攻击

浏览(11,195) 评论(0)
Decorators in ES7

浏览(15,738) 评论(4)
用Electron（Atom编辑器的兄弟项目）开发桌面应用

浏览(28,762) 评论(0)
Windows下JetBrains CLion中文输出乱码的解决方法

浏览(12,215) 评论(1)
同步-@synchronized, NSLock, pthread, OSSpinLock性能比较

浏览(11,177) 评论(0)
Seaweedfs之Volume读请求重定向

浏览(25,455) 评论(3)
HTML、CSS及JavaScript ：有Promise，不会搞大肚子

浏览(13,315) 评论(0)

相关文章

阿里云首购8折

Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号

HBLOG

HBLOG