精华内容
下载资源
问答
  • 浮动或定位 4.overflow:hidden css-嵌套盒子垂直外边距合并方案 计算盒子尺寸 width、height设置为content盒子的宽高 肉眼可见的盒子宽度 = 2*border-wdith + padding-left+padding-right + width; 外盒子宽度 = 内...

    盒子模型

    在这里插入图片描述

    content

    padding

    连写: padding: 上下 左右; padding; 上 右 下 左

    border

    使用border做图形

    1.圆形 border-radius:50%

    2.柠檬形 border-top:50%; border-bottom:50%;

    margin

    margin; 上 右 下 左
    给左右margin设置auto 可以实现有宽度的块级元素居中对齐 margin: 0 auto;
    盒子内文字水平居中:盒子设置text-align:center;

    清除内外边距保证兼容性

    body,div,ul,ol,dl,li,dt,dd,td,pre,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,textarea,blockquote{
    	margin:0;
    	padding:0;
    }
    

    内联元素只有左右内/外边距无上下

    设置margin-top padding-top无效
    IE6没有padding

    外边距合并解决

    在这里插入图片描述

    只会出现垂直方向

    问题情况: 上下相邻元素间的外边距会以两者外边距最大者为准

    相邻解决: 不要上下各给20px,直接上或下一个40px,一个0px;或者 对一个盒子创建BFC区域即设置overflow:hidden;
    在这里插入图片描述

    嵌套解决:父亲设置1. 边框 2.padding 3.浮动或定位 4.overflow:hidden

    css-嵌套盒子垂直外边距合并方案

    计算盒子尺寸

    1. width、height设置为content盒子的宽高
    2. 肉眼可见的盒子宽度 = 2*border-wdith + padding-left+padding-right + width;
    3. 外盒子宽度 = 内盒子+2*margin
    4. 宽高只能使用在块级 或者 行内块 元素
    5. 计算外盒子是,要考虑上下盒子外边距合并问题

    如果未指定盒子宽高padding不会影响大小即自适应宽高

    布局稳定性

    width>padding>margin
    1.margin在IE6会有加倍bug
    2. padding会影响盒子大小,需要从小计算宽高

    CSS3盒模型

    box-sizing:
    1. content-box 传统盒子 width = content-width
    2. border-box 怪异盒子 width = content+padding+border
    
    展开全文
  • 合并的情况有两种:一种是相邻块元素垂直外边距合并,另一种是嵌套块元素垂直外边距合并 相邻块元素的垂直外边距合并现象 当上下相邻的两个块元素都设置外边距(margin),如果上面的元素有下外边距 margin-...

    在“标准文档流中” 通过 margin 定义块元素的垂直外边距时,可能会出现外边距的合并现象;合并的情况有两种:一种是相邻块元素垂直外边距的合并,另一种是嵌套块元素垂直外边距的合并

    相邻块元素的垂直外边距的合并现象

    当上下相邻的两个块元素都设置外边距(margin),如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top,则他们之间的垂直间距不是 margin-bottom + margin-top

    实际会取两个值中的较大者作为外边距,这种现象被称为相邻块元素垂直外边距的合并(margin 塌陷现象)

    解决办法:可以给其中的一个元素设置垂直方向上的 marign 值来解决这种问题

    嵌套块元素垂直外边距的合并现象

    对于两个嵌套关系的块元素,如果父元素没有上内边距(padding)或边框(border),父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者

    需要注意的是如果只给子元素在垂直方向上设置外边距,子级元素和父级元素在垂直方向上都会移动

    解决办法:为父元素设置上边框;为父元素设置上内边距;为父元素设置 overflow:hidden 样式属性

    也可让元素脱离标准文档流,例如:浮动、固定、绝对定位等

    展开全文
  • css-嵌套盒子垂直外边距合并方案

    千次阅读 2020-10-10 20:12:08
    嵌套盒子垂直外边距合并方案: 给父亲上边框 border: 1px solid transparent 给父亲内边距 padding-top: 1px; 给父元素 添加 overflow: hidden 子元素 添加 position:absolute/relative 或 float <!DOCTYPE ...

    嵌套盒子垂直外边距合并方案:

    1. 给父亲上边框
      border: 1px solid transparent
    2. 给父亲内边距
      padding-top: 1px;
    3. 给父元素 添加 overflow: hidden
    4. 子元素 添加 position:absolute/relative 或 float
    <!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>
            #outer{
                width: 500px;
                height: 500px;
                background-color: pink;
                border: 0.000000001px solid transparent;
                /* overflow: hidden; */
                /* position: relative; */
                /* padding-top: 1px; */
            }
            #inner{
                width: 200px;
                height: 200px;
                background-color: yellow;
                margin-top: 100px;
                
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
    
            </div>
        </div>
    </body>
    </html>
    
    展开全文
  • 嵌套块元素垂直外边距合并造成的塌陷 我们先看例图 由于父元素没有设置上边框或者上内边距,导致父子的top外边距合并; 解决办法 父元素设置上边框 父元素设置内边距 父元素设置overflow: hidden; 设置为浮动或者...

    嵌套块元素垂直外边距合并造成的塌陷

    我们先看例图

    在这里插入图片描述
    由于父元素没有设置上边框或者上内边距,导致父子的top外边距合并;

    解决办法

    1. 父元素设置上边框
    2. 父元素设置内边距
    3. 父元素设置overflow: hidden;
    4. 设置为浮动或者定位元素
    展开全文
  • 什么时候会出现外边距合并的现象呢? 两个嵌套关系的块元素,如果父元素和子元素都有垂直外边距,那么父元素会塌陷外边距较大的值,这种现象也就是嵌套块元素塌陷。 演示一下,我们定义两个嵌套关系的块元素,父...
  • 问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” 。header2 设定background=“blue” ,同时给heder1 设定margin-top:10px; 预想的是内层 heder1div 的...
  • 外边距合并

    2021-02-24 22:31:39
    外边距合并 以下两种情况会出现外边距合并: 1.垂直相邻的两个盒子,当他们的垂直外边距相遇时,会合并为一个外边距。也叫外边距重叠。 1.1当外边距的数值都为正数时,取数值较大的。 1.2当外边距的数值都是负数时,取...
  • 外边距合并 使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。 (1). 相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom 下面的元素有上外边距...
  • 外边距合并 使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。 相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时如下图,如果上面的元素设置了下外边距margin-bottom,下面的元素设置上...
  • Margin合并,相邻元素会合并 没有padding,border,则相邻 margin上下会合并,左右不会 父元素与子元素都设置margin-top时取最大值 兄弟元素margin-top与margin-bottom合并 解决方法 父元素添加padding-top,border取消...
  • (1),设置border-top:1px solid transparent; (2),可以给父级指定一个上padding值 (3),给父级设置overflow:hidden;
  • 相邻块元素垂直外边距合并 * { padding: 0; margin: 0; } .father { width: 300px; height: 300px; background-color: chartreuse; margin-bottom: 100px; ...
  • !margin-嵌套块:margin垂直合并,取大值! 解决方案-1.父盒子加【上】边框, 2.父盒子加【上】padding 3.父盒子加overflow:hidden 4.others:浮动,固定,绝对定位 Document 我是孩子
  • 二、嵌套元素的外边距合并 对于两个嵌套关系的元素,如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框,则父元素的上边距会与子元素的上外边距发生合并,且值为最大的那个上外边距,同时该值作为...
  • 使用margin定义块元素的垂直外边距时,可能会出现外边距合并。 相邻块元素垂直外边距合并 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间...
  • 外边距合并及解决方法

    千次阅读 2019-03-26 15:47:40
    外边距合并 使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。 相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,...
  • margin指外边距,是盒子模型的组成之一(盒子=内容+边框+外边距+内边距),类似于表格中的cellspacing,具体用法如下: 一个值时,指定上右下左的外边距 两个值时,第一个值为上下外边距,第二个值为左右外边距 三...
  • 外边距合并问题

    2020-07-12 11:27:15
    使用margin定义块元素的垂直外边距时,可能会出现外边距合并。 (1)相邻块元素垂直外边距合并 当上下相邻的两个块元素相遇时...(2)嵌套块元素垂直外边距合并(塌陷) 对于两个嵌套关系的块元素,如果父元素
  • CSS外边距合并

    2020-06-24 11:07:02
    外边距合并 使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。 (1). 相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom 下面的元素有上外边距margin-...
  • 方法: 1.给父元素加边框 2.给父元素加内边距 3.给父元素加overflow:hidden 外边距合并-嵌套块级元素垂直外边距塌陷
  • margin 外边距合并问题

    2019-07-02 16:08:00
    二、嵌套元素的外边距合并 对于两个嵌套关系的元素,如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框,则父元素的上边距会与子元素的上外边距发生合并,且值为最大的那个上外边距,同时该值作为...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,381
精华内容 2,152
关键字:

嵌套外边距合并