• 技术文章 >web前端 >css教程

    css margin外边距属性与用法总结

    伊谢尔伦伊谢尔伦2017-06-01 11:33:58原创2005
    围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em、百分数值甚至负值。下面本文就来具体的谈谈外边距 margin 属性和使用,外边距的重叠和叠加,以及 margin 为负值的作用等内容。

    一、CSS的margin属性介绍

    1.详解CSS的margin属性使用

    1.png

    margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。

    2. 详解css的外边距margin的使用

    2.png

    检索或设置对象四边的外延边距。如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。如果只提供一个,将用于全部的四边。如果提供两个,第一个用于上、下,第二个用于左、右。如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。外延边距始终透明。

    3. CSS重要属性之 margin 属性知识大合集介绍

    1)margin 属性的简单介绍

    2)margin 无法适用的元素

    3)外边距折叠 (Collapsing margins)

    4)Collapsing margins 解决方法


    二、margin 外边距重叠或者叠加问题

    1. CSS中margin边界叠加问题的解决方法介绍(图文)

    1.jpg

    边界叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,当两个垂直边界相遇时,它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

    2. CSS外边距(margin)重叠及防止方法

     边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

     两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成。


    三、margin 为负值的作用

    1. 简单谈谈margin负值的作用

    我们在CSS中都会使用margin,但将margin设置成负数,那可能就不大好处理了,margin负值并非hack,margin负值遵循文档流;假如使用margin负值促使一个元素向上位移,那么相关元素也会随之发生位移;margin负值能良好兼容各浏览器。

    2. CSS中使用负margin值来调整居中位置

    2.jpg

    这或许是最常用的居中方法。如果知道了各个元素的大小,设置等于宽高一半大小的负margin值(如果没有使用box-sizing: border-box样式,还需要加上padding值),再配合top: 50%; left: 50%;样式就会使块元素居中。


    有关CSSmargin的相关问答

    1. 前端 - margin的问题,那个老哥帮我解释下

    2. 前端 - CSS 三列等高布局的疑问 margin负补偿

    3. css - margin 负值为什么要这样设计?


    【相关推荐】

    1. CSS居中:最全面的CSS居中方法大全

    2. DIV居中:最全的p居中方法总结

    3. css图片居中:css图片上下左右居中(水平和垂直居中)

    以上就是css margin外边距属性与用法总结的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:CSS如何实现画爱心的示例代码分享 下一篇:7种div垂直居中的方法总结
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 原来利用纯CSS也能实现文字轮播与图片轮播!• css3怎样实现不是直角的菱形效果• css样式中有文字描边吗• 12个值得收藏的 CSS 技巧!!• css中圆角属性值能用百分比吗
    1/1

    PHP中文网