CSS:不同元素margin的计算_html/css_WEB-ITnose
程序员文章站
2022-05-23 08:03:55
...
关于什么元素的分类可以看我这篇文章 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,使用的值相等,那么就相对于包含块水平居中。
推荐阅读
-
DIV+CSS在不同浏览器中的表现_html/css_WEB-ITnose
-
requireJS在同一个HTML/JSP页面,加载不同版本的jquery_html/css_WEB-ITnose
-
tips 前端 背景与元素的透明和模糊_html/css_WEB-ITnose
-
为什么连续2个div的margin 20 不会出现40?_html/css_WEB-ITnose
-
不同元素对齐的问题:需要底部,或者是中间对齐。_html/css_WEB-ITnose
-
一个已经完成的PC网站,如何快速改造,让它能适应平板、手机等不同分辨率?_html/css_WEB-ITnose
-
我的第一个html计算器_html/css_WEB-ITnose
-
如何让父元素自适应子元素的大小?_html/css_WEB-ITnose
-
我的第一个html计算器_html/css_WEB-ITnose
-
如何让父元素自适应子元素的大小?_html/css_WEB-ITnose