精华内容
下载资源
问答
  • CSS外边距合并代码

    2021-01-19 21:07:13
    我习惯把 图中所示的margin边界称为外边距,padding填充部分称之为内边距。设置外边距最好的一个方法就是设置margin值,同理,设置内边距的最好 办法就是设置padding了。设置内边距没什么好说的,设置的值是多少就是...
  • 1,父子盒子外边距塌陷 父子关系外边距塌陷的表现是:父盒子和子盒子粘在一起了,当给父盒子设置margin-top时,子盒子跟着父盒子一块下移了。 给子盒子设置margin-top时,父盒子也跟着走。当子盒子和父盒子都设置...

    1,父子盒子外边距塌陷
    父子关系外边距塌陷的表现是:父盒子和子盒子粘在一起了,当给父盒子设置margin-top时,子盒子跟着父盒子一块下移了。 给子盒子设置margin-top时,父盒子也跟着走。当子盒子和父盒子都设置margin-top时,哪个值大,就按照哪个值。
    塌陷原因:父子盒子公用一个外边距区域。
    解决办法:
    1,给父盒子设置边框或内边距
    2,给父标签添加overflow:hidden属性,触发BFC规则(块级格式上下文,把父级渲染成一个独立区域。)
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .wrap {
                width: 500px;
                height: 500px;
                background-color: yellowgreen;
                /* margin-top: 30px; */
                /* border: 1px solid transparent; */
                /* 给父盒子设置1像素的透明边框 ,能解决外边距塌陷问题*/
                /* padding: 1px; */
                /* 给父盒子设置内边距,掘金外边距塌陷问题 */
                overflow: hidden;
                /* 给父盒子设置 overflow: hidden;,掘金外边距塌陷问题 */
            }
            
            .box1 {
                width: 200px;
                height: 200px;
                background-color: blue;
                margin: auto;
                margin-top: 20px;
            }
        </style>
    </head>
    
    <body>
        <!-- 父子关系外边距塌陷的表现是:父盒子和子盒子粘在一起了,当给父盒子设置margin-top时,子盒子跟着父盒子一块下移了。 给子盒子设置margin-top时,父盒子也跟着走。当子盒子和父盒子都设置margin-top时,哪个值大,就按照哪个值。 -->
    
        <div class="wrap">
            <div class="box1">
    
            </div>
        </div>
    </body>
    
    </html>
    

    2,兄弟关系的外边距塌陷
    现象:上一个盒子设置下外边距,下一个盒子设置上外边距,都只会显示其中的最大边距值。
    也就是说如果其中有一个盒子的边距设置的小于另一个盒子,就会被覆盖了。
    兄弟关系外边距塌陷的原因:上下两个兄弟关系的盒子公用一个外边距区域。
    解决方法:给这两个盒子都套一个父盒子,父盒子添加overflow:hidden属性。
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                width: 200px;
                height: 200px;
            }
            
            .box1 {
                background-color: yellow;
                margin-bottom: 20px;
            }
            
            .box2 {
                background-color: red;
                margin-top: 20px;
            }
            
            .wrap {
                overflow: hidden;
            }
        </style>
    </head>
    
    <body>
        <div class="wrap">
            <div class="box box1"></div>
        </div>
        <div class="wrap">
            <div class="box box2"></div>
        </div>
    
    </body>
    
    </html>
    
    展开全文
  • 外边距叠加和外边距为负值

    千次阅读 2016-06-23 10:22:57
    但是写起代码来你会发现并不简单,很多地方都很模糊,特别是外边距为负值的时候。 这篇文档主要说明两个问题: 1.外边距叠加 2.外边距为负值   首先说明两个基本的要点: 1.如果给元素添加背景,...

    盒模型乍一看很简单,无非就是内容、内边距、边框和外边距。但是写起代码来你会发现并不简单,很多地方都很模糊,特别是外边距为负值的时候。

    这篇文档主要说明两个问题:

    1.外边距叠加

    2.外边距为负值

     

    首先说明两个基本的要点:

    1.如果给元素添加背景,背景会应用于内容和内边距组成的区域。

    2.width和height是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,只会增加元素框的总尺寸。

    特别说明,如果将元素的box-sizing属性设置为"border-box",则width和height表示的是内容、内边距和边框组成区域的高度和宽度。所以增加外边距对内容区域的尺寸没有影响,而增加内边距和边框会导致内容区域的尺寸减小。

     

    现在开始讨论第一个问题:外边距叠加

    外边距叠加是指当两个或更多垂直外边距相遇时,外边距的高度等于这几个外边距的高度中的较大者。这就是外边距叠加的情况,并且外边距叠加只发生在垂直外边距上。

    外间距叠加有三种情况:

    l 元素自身叠加

    l 相邻元素叠加

    l 包含元素叠加

    元素自身叠加

    如果有一个空元素,只有外边距而没有边框或内边距,顶外边距和底外边距就碰到一起发生叠加。

    相邻元素叠加

    当一个元素出现在另一个元素上面是,上面那个元素的底外边距与下面那个元素的顶外边距就会发生叠加。

    包含元素叠加

    当一个元素包含在另一个元素中时,如果没有内边距或边框将外边距隔开,它们的顶/底外边距也会发生叠加。

    外边距叠加有什么用呢?一个最简单的例子就是段落。如果没有外边距叠加,那么从第二个段落开始,段落间距就会是第一个段落上面的空间的两倍。

    最后的说明:只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外间距不会叠加。

     

    接下来讨论外边距为负值的情况:

    举个具体的例子说明,假如margin-right: -150px;

    分两步理解:

    1.假设margin-right: 0;,内容区域不变

     

    2.此时加上margin-right: -150px;布局变成

     

    所以margin-right取负值就是右边的区域变成外边距,以容纳其他元素(假设是元素B)。需要注意的是如果不正确设置该元素中的子元素的外间距,就会与B元素发生重叠。

    外间距设置为负值主要是可以用于生成边栏。

     

    额外说明:只有外边距才可以是负值,内边距不允许为负值。

    展开全文
  • 外边距合并

    2018-11-01 15:56:00
    这两个效果,是有关于外边距合并: 外边距合并指的是:当两个垂直外边距相遇时,他们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距高度中的较大者。 即设置的margin:12px失效了。 下面是...

     

    这两个效果,是有关于外边距合并:

     

     外边距合并指的是:当两个垂直外边距相遇时,他们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距高度中的较大者。

    即设置的margin:12px失效了。

    下面是这两个效果的代码:

     

     当只是设置margin值时,会出现外边距合并现象。

    使用display:inline-block或者overflow:hidden都可以。

     

    转载于:https://www.cnblogs.com/5201314m/p/9889740.html

    展开全文
  • CSS外边距叠加

    2019-11-11 22:56:44
    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 接下来举几个简单例子: Html代码 收藏代码 垂直外边距叠加 ...

    【外边距合并】

    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距

    合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

    接下来举几个简单例子:

    Html代码 收藏代码

    垂直外边距叠加
    上下垂直外边距叠加为较大的那个 就是20
    里外垂直外边距叠加为较大的那个 也是20
    没有内容,没有边框,没有内边距,自身的上下外边距一样可以叠加

    【注意:】只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。实际操作发现,相对定位垂直外边距会叠加,但是任何情况下,水平外边距是不会叠加的。

    【官方解释】

     块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距,这种行为称为外边距塌陷(也叫外边距合并)。
    

    发生外边距塌陷的三种情况:

    (1)相邻的兄弟姐妹元素(除非后者兄弟姐妹需要清除过去的浮动)

    (2)块级父元素与其第一个/最后一个子元素

    (3)空块元素

    下面,我们通过几个实例对这三种情况进行解释

    一、相邻的兄弟姐妹元素

    毗邻的两个兄弟元素之间的外边距会塌陷(除非后者兄弟姐妹需要清除过去的浮动)

    这句话有两个要点:

    1、一般情况:毗邻的两个兄弟元素之间的外边距会塌陷;

    2、特殊情况:当后面div需要清除过去的浮动时,毗邻的两个兄弟元素之间的外边距不会塌陷

    二、块级父元素与其第一个/最后一个子元素

    (1)上边距合并:

    如果块级父元素与第一个子元素之间不存在上边框、上内补、inline content、清除浮动这四条属性之一(对于上边框和上内补,也可以说,当上边距及上内补宽度为0时),那么这个块级元素和其第一个子元素的上边距就可以说“挨到了一起”。此时这个块级父元素和其第一个子元素就会发生上外边距合并的现象,换句话说,此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者,而父元素与该子元素之间边距消失
    

    (2)下边距合并:

    类似的,若块级元素的margin-bottom与它的最后一个子元素的margin-bottom之间没有border、padding、inline content、height、min-height、max-height分隔时,就会发生下边距合并的现象
    

    我们先看一个例子:

    Html代码 收藏代码
    // css
    .parent{
    width:400px;
    height:300px;
    background:#ddd;
    }
    .child1{
    width:300px;
    height:100px;
    background:pink;
    }
    .child2{
    width:200px;
    height:100px;
    background:gray;
    }
    // html

    结果:

    现在我们想让粉色div和父div之前有40px的空隙,所以给粉色div设置"margin-top:40px":

    预期结果:

    实际结果:

      这就是父子元素之间的margin合并。由于粉色div与父div之间没有上边框、上内补、inline content、清除浮动这四条属性之一,使得两个div之间产生了margin合并的现象。
    
      同样地,父元素与最后一个子元素之间也可能发生margin合并的情况,情况大致相同,不再举例说明
    

    三、空块元素

    如果存在一个空的块级元素,其border、padding、inline content、height、min-height都不存在,那么此时它的上下边距中间将没有任何阻隔,此时它的上下外边距将会合并

    【总结】

    ①为什么会发生margin合并?

    这些元素(包括兄弟、父子元素等)之间之所以会发生margin合并,是因为它们属于同一个BFC。关于BFC (Block Formatting Context块级格式化上下文

    展开全文
  • 但是写起代码来你会发现并不简单,很多地方都很模糊,特别是外边距为负值的时候。 这篇文档主要说明两个问题: 1.外边距叠加 2.外边距为负值   首先说明两个基本的要点: 1.如果给元素添加背景,背景会应用于内容和...
  • CSS外边距重叠

    2020-06-19 12:34:38
    1、什么是外边距重叠 margin-college称作外边距重叠。在CSS中,相邻的两个盒子(可能是兄弟关系或者祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,因而所结成的外边距称为折叠...
  • 如上图所示,原本有问题的代码是这样的,大家可以发现两个div都有各自的外边距,一个15px,一个30px,按理说内部的这个text名的div外边距应该是15+30,45px才对,但是结果与预想值有偏差,两个div的上外边距重叠在一起...
  • css样式中的margin也就是css中外边距外间距属性,顾名思义,就是控制div块...下面我们通过具体的代码示例详细解说css中margin属性即css外边距属性的具体用法代码示例:css中的margin属性使用示例.demo{width:300p...
  • 今天在写网页时无意中发现两个div嵌套时父标签没有写垂直外边距而子标签写了垂直外边距会发生问题,上网查了很多博客都没有详细的解答,只能自己研究了,最终得出结果,先上代码. 上效果 父标签如果没有垂直外边距...
  • 外边距合并知识

    2018-03-02 13:53:00
    一、什么是外边距合并 外边距合并是指垂直相邻的块级元素在边距相遇时会形成一个外边距,最终的外边距以两者中较大的为准。 二.外边距合并的直观例子 1.父子之间 1.1 父元素没有margin-top,子元素有margin-top,...
  • 外边距叠加问题

    2017-03-27 22:01:00
    今天在阅读精通CSS的过程中,对外边距的叠加问题产生了好奇,所以这里分享下。 来看一段代码: div的外边距是10px,里面段落...1.段落的20px顶外边距和底外边距和div的10px外边距叠加,形成一个20px的垂直外边距...
  • 外边距塌陷

    2017-12-13 15:07:15
    嵌套的盒子,直接给子盒子设置垂直方向外边距的时候,会发生外边距塌陷。 解决方法:①给父盒子设置边框; ②给父盒子设置overflow:hidden。推荐使用!塌陷效果代码:<!DOCTYPE html> <title></title> ...
  • java代码怎么设置控件的外边距

    千次阅读 2016-08-11 19:26:17
    刚查到的,纪录一下 在activity中,可以这样 LinearLayout.LayoutParams lp= (LinearLayout.LayoutParams) imageview.getLayoutParams(); lp.leftMargin = 50; lp.rightMargin = 50; imageview.setLayoutPa
  • 外边距叠加问题小结

    2019-09-26 17:16:22
    当两个或更多外边距相遇时,他们将形成一个外边距。这个外边距高度等于两个发生层叠的外边距的高度中的较大者。 1.当一个元素出现在另一个元素上面时,第一个元素的底外边距和第二个元素的定外边距发生叠加。 效果...
  • 外边距合并问题

    2020-08-05 18:59:09
    外边距合并问题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...
  • 清除元素的默认内外边距... /* 清除外边距 */ } 注意: * 行内元素为了照顾兼容性, 尽量只设置左右内外边距, 不要设置上下内外边距。 <!DOCTYPE html> <html lang="en"> <head> <meta...
  • 外边距产生的原因: 为了编写代码美观 每个标签独占一行 换行和空格符号解析成一个空格 解决的办法 1: 让其他标签紧跟着上一个标签 2: 通过外边距设置左右外边距为负数 3: 在父元素设置字体大小为0 ...
  • 在讨论外边距的叠加之前需要先声明:只有普通文档流中块元素的垂直外边距才会发生外边距叠加,涉及行内框,浮动框,绝对定位框的情况下外边距不会叠加。 1.当两个以及两个以上元素处于相对上下位置(且)时,上面...
  • 展开全部1、padding-top 属性:设置 p 元素的上内边32313133353236313431303231363533e58685e5aeb931333431373332,该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一...
  • 一,效果图。...二,代码。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Margin</title> <style> p{ backgr...
  • 目标效果分析图 图例分上下两个盒子 下面的盒子里又放三个图文容器 容器间有间距 盒子模型 边距的效果 没有边距的情况 要让图片分开,给加上边距就可 加上以后的效果 ...开始代码 ...margin外边距的使用 ...
  • 刚开始用chrome看很奇怪,明明没有设置外边距但是却显示空白,后来用firefox查看发现这个地方有空白节点 代码原本是 {dede:channel type='son'} &lt;li id="spe"&gt;&lt;a href="&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 810
精华内容 324
关键字:

外边距代码