学习
实践
活动
专区
工具
TVP
写文章
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    外边合并规则

    相邻的垂直外边会合并,除了2种特殊情况: 根元素盒的外边不合并 如果一个带有间隙的元素的上外边与下外边相邻,它的外边会和紧挨着的兄弟(元素)的相邻外边合并,但合并后不会再和父级块的下外边合并 (in-flow)孩子的上外边 盒的下外边与其下一个流内紧挨着的兄弟的上外边 最后一个流内孩子的下外边与其height计算值为’auto’的父元素的下外边 盒的上外边和下外边,要求该盒没有建立新的块格式化上下文 父子:幺儿的下外边与父元素的下外边 自身:0高“真空”元素的上外边与下外边 P.S.这里的“真空”是指——把薯片抽成真空。 ’为0的流内块级盒的下外边会与它的最后一个流内块级孩子的下外边合并,条件是该盒没有下内边和下边框,并且其孩子的下外边没有与具有间隙的上外边合并 盒自身的外边也会合并,条件是’min-height ,因为margin允许负值,情况稍微复杂一点: 都是正值,直接求二者最大值 一正一,相加求和 都是负值,求二者绝对值的最大值 例如: ul {margin-bottom: -15px;} /* 缩进表示对应文档结的构嵌套关系

    52130

    HarmonyOS实战—组件的外边和内边

    组件的位置属性,分为:内边外边 [在这里插入图片描述] 1. 外边 表示组件跟外部其他组件的边 [在这里插入图片描述] [在这里插入图片描述] [在这里插入图片描述] 案例: 如果只设置 margin ,就会把上下左右都给设置了,这是一个整体的设置。 margin="10vp" 设置第一个文本组件 ohos:top_margin="10vp" [在这里插入图片描述] 给下面的文本框设置:ohos:top_margin="20vp" [在这里插入图片描述] 外边小节 内边 组件边框内侧跟文本之间的间距 [在这里插入图片描述] [在这里插入图片描述] 一般设置上内边和左内边就行了,因为设置了这两个,就可以确定文本的位置了 [在这里插入图片描述] 利用内边就可以调整组件内部文本的位置 把第二个文本的内边设置为:ohos:top_padding="20vp" [在这里插入图片描述] 内边小节: 组件边框内侧距离内部文字的距离。

    28320

    CSS--外边合并的问题

    外边合并指的是,当两个垂直外边相遇时,它们将形成一个外边。 合并后的外边的高度等于两个发生合并的外边的高度中的较大者。 首先看下W3C对于外边合并的介绍: 外边合并 简单地说,外边合并指的是,当两个垂直外边相遇时,它们将形成一个外边。合并后的外边的高度等于两个发生合并的外边的高度中的较大者。 ,因为它们的所有外边都合并到一起,形成了一个小的外边。 如果没有外边合并,后续所有段落之间的外边都将是相邻上外边和下外边的和。这意味着段落之间的空间是页面顶部的两倍。 如果发生外边合并,段落之间的上外边和下外边就合并在一起,这样各处的距离就一致了。 image.png 注释: 只有普通文档流中块框的垂直外边才会发生外边合并。

    35620

    css之详解

    为其正名 我们都使用过CSS得外边,但是当谈到的时候,我们好像往差的方向发展啦。在网页设计中的使用出现了两种极端,一种特别喜欢它,也有一些人认为这完全就是魔鬼的作品。 下面是一些你应该知道的关于的事情: 他们是完全有效的CSS 这不是在跟你开玩笑。W3C甚至都说,在外边框中使用是允许的。要了解更多可以点击这篇文章 不是在hack 这是尤其正确的。 如果和宽度一样大的话,它就会被完全覆盖掉。因为外边,内边,边框和内容加起来等于元素的宽度。如果外边等于元素的宽度的话,那么该元素的宽度就会变成0px。 这里有一个文章讨论了在多列布局中的应用。 微调元素 这是外边最常也是最简单的使用方式。 结论 外边能够在不使用任何额外标签的情况下定位元素让它在现在网页设计中占有一席之地。随着更多的用户使用更新的浏览器(包括IE8),未来使用这些技巧的网站会变得更加有前景。

    52780

    css之详解

    为其正名 我们都使用过CSS得外边,但是当谈到的时候,我们好像往差的方向发展啦。在网页设计中的使用出现了两种极端,一种特别喜欢它,也有一些人认为这完全就是魔鬼的作品。 下面是一些你应该知道的关于的事情: 他们是完全有效的CSS 这不是在跟你开玩笑。W3C甚至都说,在外边框中使用是允许的。要了解更多可以点击这篇文章 不是在hack 这是尤其正确的。 如果和宽度一样大的话,它就会被完全覆盖掉。因为外边,内边,边框和内容加起来等于元素的宽度。如果外边等于元素的宽度的话,那么该元素的宽度就会变成0px。 这里有一个文章讨论了在多列布局中的应用。 微调元素 这是外边最常也是最简单的使用方式。 结论 外边能够在不使用任何额外标签的情况下定位元素让它在现在网页设计中占有一席之地。随着更多的用户使用更新的浏览器(包括IE8),未来使用这些技巧的网站会变得更加有前景。

    83940

    wxss学习系列《二》尺寸(Dimension),外边(margin)和内边(padding)

    外边(margin)和内边(padding) 说到边,那这个基本上跟Android里的概念差不多,先来看一个图吧,(虽然标注的丑了点,不过那不是重点) ? 一.margin:外边;设置对象四边的外延边。 margin: 20rpx 10rpx 25rpx 10rpx :如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。 某些相邻的margin会发生合并,称之为margin折叠,具体的现象就如果两个块级元素都设置了margin,那取两者之间的最大值做为两个元素的外边。 二.padding:内边:设置对象四边的内部边。 三.margin-top,margin-right,margin-bottom,margin-left对应的分别是上右下左外边的距离,可取值:auto/数值/百分比。

    64560

    CSS篇-面试题4-外边问题

    两个 float 的盒子,都是左浮动,外边问题 两个float的盒子,都是左浮动,盒子 A 的margin-right为 100px,盒子 B 的margin-left为 200px,问盒子 A 与盒子 height: 100px; float: left; // 两个盒子都浮动 } .box-a { background: pink; margin-right: 100px; // 盒子A右外边 100px } .box-b { background: #abcdef; margin-left: 200px; // 盒子B左外边 } 具体测试结果 ? 答案:A-B 之间的间距是 300px 结论:当元素横向方向外边时,不会出现外边迭代的问题 外边叠加的问题 两个普通的盒子,盒子 A 的margin-bottom为100px,盒子 B 的margin-top 答案: A-B 之间的间距是200px 结论:当元素在垂直方向,两个相邻的元素之间增加上下外边时,会出现外边的叠加

    24820

    【面试题解】什么是外边重叠?如何解决?什么是BFC?

    ---- 本系列面试题旨在学会相关知识点,从而轻松应对面试题的各种形式,本文讲解了 BFC 以及 利用 BFC 解决外边重叠问题。 现象: 发生了边重叠,一个盒子和其子孙的边重叠。 规则:正正取最大,负负取最,正负就相加。 兄弟元素边合并 场景三:再来看这段代码,两个兄弟元素,一个下边是 100px ,另一个上边 100px ,预计的结果是两个兄弟元素之间的距离是 200px 。 现象:发生了边重叠,两个兄弟元素的上边和下边发生了重叠。 规则:正正取最大,负负取最,正负就相加。 原因:块级元素的上外边或下外边有时(直接接触/相邻时)会合并为一个外边。 现象:发生了边重叠,所有的空元素的边重叠成一个空元素的边。 原因:如果一个块级元素没有任何内容并且设置了 margin-top 和 margin-bottom 时会发生 margin 合并。

    6320

    扫码关注腾讯云开发者

    领取腾讯云代金券