基础必备之margin

(1)关于margin重叠,只发生在块元素上
  • 发生折叠需要是相邻的非浮动元素;
  • 折叠发生在垂直外边距上,即margin-top/margin-bottom;
  • 折叠后取其中最大的那个margin值作为最终值;
  • 在水平书写模式下,发生 margin 折叠的是垂直方向,即 margin-top/margin-bottom,在垂直书写模式下,margin 折叠发生在水平方向上,即 margin-right/margin-left

(2)margin的百分比数值都是相对于父容器的宽度来计算的

绝对定位元素的margin百分比数值是相对于第一个定位祖先元素(relative,absolute,fixed)的宽度来计算的

经典应用,圣杯布局

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 作者:[zhengkonghong](https://coding.net/u/zhengkenghong) 本文...
    CODING_博客阅读 4,270评论 1 6
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,736评论 0 1
  • inf和nan含义如下:INF表示“无穷大”,是infinite的缩写。NAN表示“无效数字”,是Not a nu...
    杨大虾阅读 8,911评论 0 0
  • 出处 阻塞 IO, 非阻塞 IO, 同步 IO, 异步 IO 这些术语相信有不少朋友都也不同程度的困惑吧? 我原来...
    永顺阅读 4,132评论 0 10

友情链接更多精彩内容