请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

[HTML5] 好程序员web前端培训分享CSS不同元素margin的计算

[复制链接]
叶子老师 发表于 2019-4-15 16:32:57 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
好程序员web前端培训分享CSS不同元素margin的计算行内级元素
  Inline,非置换元素:如果margin值为auto,则margin-leftmargin-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
  如果widthauto值,那么其他值是auto的值就为0
  如果margin-leftmargin-right的值为auto,使用的值相等,那么就相对于包含块水平居中。
  块级置换元素,在文档流中
  同块级非置换元素一样。
  总结
  行内级置换元素和非置换元素,在margin值为auto时,margin-leftmargin-auto的计算值都为0
  块级置换元素和非置换元素:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
  如果widthauto值,那么其他值是auto的值就为0
  如果margin-leftmargin-right的值为auto,使用的值相等,那么就相对于包含块水平居中。
The percentage is calculated with respect to the width of the generated boxs containing block. Note that this is true for margin-top and margin-bottom as well.
好程序员web前端培训分享:http://www.goodprogrammer.org/html5_class.shtml

精彩内容,一键分享给更多人!
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启