CSS：不同元素margin:auto的计算

Michael_Ding 发布于2019-08-30 12:55 / 1281人阅读

摘要：块级置换元素，在文档流中同块级非置换元素一样。块级非置换元素，不在文档流中当这个值不是，而，则包含块的高度定位元素高度块级置换元素，不在文档流中同上总结行内级元素行内级置换元素和非置换元素，在值为时，和的计算值都为。

关于什么元素的分类可以看我这篇文章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，width的值不为auto，那么就相对于包含块水平居中。

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

同块级非置换元素一样。

块级非置换元素，不在文档流中(Absolutely positioned, non-replaced elements)

// 当top/height/bottom 这3个值不是auto，而 margin:auto ，则：
margin-top=margin-bottom=（包含块的高度 – 定位元素高度）/2
"top" + "margin-top" + "border-top-width" + "padding-top" + "height" + "padding-bottom" + "border-bottom-width" + "margin-bottom" + "bottom" = height of containing block

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

同上

总结 行内级元素

行内级置换元素和非置换元素，在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，width的值不为auto，那么就相对于包含块水平居中。

2.块级置换元素和非置换元素不在文档流中。
见上文。

The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for margin-top and margin-bottom as well.

abs-non-replaced-height
Why does “position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto” actually center?

云服务器 GPU云服务器不同元素 css元素云计算不同 php计算数组元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115166.html

CSS那些事

摘要：今天跟大家分享一下中一些比较重要和比较容易被忽略的东西，开始吧。当为时，块级元素的宽度会填满整个包含块。也就是说上下外边距的值也是以父元素的宽度为标准的。今天跟大家分享一下CSS中一些比较重要和比较容易被忽略的东西，开始吧。样式优先级当你在不同地方不同的选择器中对同一个元素属性添加了不同的样式的时候，该如何判断最后哪个样式会作用到元素上呢？判断的依据就是样式的优先级。样式优先...

LinkedME2016 2019-08-28 17:56 评论0 收藏0
CSS魔法堂：Absolute Positioning就这个样

摘要：更多关于的信息可参考魔法堂不得不说的因此的实际值则是相对于而言，我们可以通过来获取和的实际值。对于由于自身有固有的，因此当设置时，其实际值就是元素固有的。结果就是除均不为，而为时，会自动计算以满足等式。两条不满足外，其他情况均一致。前言当我们以position:absolute之名让元素脱离Normal flow的控制后，以为通过left和top属性值即可让元素得以无限的自由时，却...

Yangyang 2019-08-30 12:54 评论0 收藏0
《CSS世界》笔记二：盒模型四大家族

摘要：基本上，等高布局只能满足栏的情况，除非正好是等比例的，那还可以使用实现最多栏布局上一篇世界笔记一流元素尺寸下一篇世界笔记三内联元素与对齐上一篇：《CSS世界》笔记一：流/元素/尺寸下一篇：《CSS世界》笔记三：内联元素与对齐写在前面在读《CSS世界》第四章之前，粗浅的认为盒模型无非是margin/border/padding/content而已，再多无非在不同box-sizing...

icyfire 2019-08-29 16:09 评论0 收藏0
深入理解css盒子模型

摘要：下面我们就一步一步揭开的神秘面纱，深入理解盒模型，这对我们在布局上会有一个质的提升。与内联元素的百分比值与内联元素。 css是一门具象语言，并不像js那样具有逻辑性，因此，就算入行了前端很久的工程师，也觉得css难以掌握。下面我们就一步一步揭开css的神秘面纱，深入理解css盒模型，这对我们在布局上会有一个质的提升。盒子模型 showImg(https://segmentfault....

gplane 2019-08-29 15:14 评论0 收藏0
FE.CSS-快速梳理

摘要：元素根据外在盒子是内联还是块级，分成块级元素和内联元素。值为常见的内联元素有。注数值需向上舍入是相对于计算的只能应用于内联元素以及的元素。的显示内联元素元素的垂直中心点和行框盒子基线往上处对齐。前言本文是对《CSS世界》阅读中所做笔记和感悟，若有错误请指正。概述 CSS设计初衷是为了更好地展示图文。HTML元素根据外在盒子是内联还是块级，分成块级元素和内联元素。HTML元素也可根...

XUI 2019-08-23 15:40 评论0 收藏0