首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

【CSS】盒子模型外边 ① ( 盒子模型外边设置 | 外边属性单独设置 | 外边属性复合写法 )

文章目录 一、盒子模型外边设置 1、外边属性单独设置 2、外边属性复合写法 一、盒子模型外边设置 ---- 盒子模型外边 Margin 用于控制 盒子 与 盒子 之间的距离 ; 1、外边属性单独设置...外边设置语法 : margin-left : 设置 左外边 ; margin-top : 设置 上外边 ; margin-right : 设置 右外边 ; margin-bottom : 设置...下外边 ; 代码示例 : 展示效果 : 2、外边属性复合写法 外边复合写法 : 设置 1 ~ 4 个 值 , 单位 像素 px ; 设置 1 个值 : 设置 上下左右 外边 ; 设置 2 个值...: 设置 上下、左右 外边 ; 设置 3 个值 : 设置 上、左右、下 外边 ; 设置 4 个值 : 设置 上、右、下、左 外边 ; 代码示例 : <!

83620

外边合并规则

相邻的垂直外边会合并,除了2种特殊情况: 根元素盒的外边不合并 如果一个带有间隙的元素的上外边与下外边相邻,它的外边会和紧挨着的兄弟(元素)的相邻外边合并,但合并后不会再和父级块的下外边合并...(in-flow)孩子的上外边 盒的下外边与其下一个流内紧挨着的兄弟的上外边 最后一个流内孩子的下外边与其height计算值为’auto’的父元素的下外边 盒的上外边和下外边,要求该盒没有建立新的块格式化上下文...父子:幺儿的下外边与父元素的下外边 自身:0高“真空”元素的上外边与下外边 P.S.这里的“真空”是指——把薯片抽成真空。...’为0的流内块级盒的下外边会与它的最后一个流内块级孩子的下外边合并,条件是该盒没有下内边和下边框,并且其孩子的下外边没有与具有间隙的上外边合并 盒自身的外边也会合并,条件是’min-height...、下外边,元素自身的上下外边会合并 前3点针对“相邻”的前提条件(流内,同BFC,块级盒),第4点是对4种“相邻”场景的转述,展开就是8条推论 四.合并行为 两个相邻外边发生合并后,形成的外边叫折叠外边

1.3K30

【CSS】盒子模型外边 ④ ( 元素默认的外边 | 清除元素默认的内外边 | 行内元素边设置 )

文章目录 一、元素默认的外边 1、body 标签的默认外边 2、p 标签的默认外边 二、清除元素默认的内外边 1、清除方式 2、代码示例 三、行内元素边设置 一、元素默认的外边 ---...: block; margin: 8px; } 2、p 标签的默认外边 在 body 中添加 p 标签 , 代码如下 : p 标签 默认外边 显示效果如下 : 按 F12 键 , 进入调试模式 , 发现 p 标签元素 上下 都有 橙色的 外边 , 右侧 红色矩形框 中 , 上边 和 下边 都是 1em...---- 1、清除方式 使用 通配符选择器 设置 清除内外边 样式 , 将所有的标签元素 的 默认的内外边 全部设置为 0 ; 清除标签默认的内外边 样式 : * { /* 清除标签默认的内边...style type="text/css"> * { /* 清除标签默认的内边 */ padding: 0; /* 清除标签默认的外边 */

2.3K10

【CSS】margin 外边负值使用案例 ( 正常外边 | 使用外边负值实现边框重叠 | 重叠边框突出显示 )

: 二、使用外边负值实现边框重叠 ---- 使用外边负值实现边框重叠 , 设置左侧 -1 像素外边 , 由于 浮动元素 都是紧贴在一起的 , 设置 -1 像素外边 就会在紧贴的基础上 向左...1 像素 ; 同理 , 设置上方 -1 像素外边也是这个原理 ; 代码示例 : <!...由于 浮动元素 都是紧贴在一起的 设置 -1 像素外边 就会在紧贴的基础上 向左 1 像素*/ margin-left: -1px; /* 设置上方 -1 像素外边...由于 浮动元素 都是紧贴在一起的 设置 -1 像素外边 就会在紧贴的基础上 向左 1 像素*/ margin-left: -1px; /* 设置上方 -1 像素外边...由于 浮动元素 都是紧贴在一起的 设置 -1 像素外边 就会在紧贴的基础上 向左 1 像素*/ margin-left: -1px; /* 设置上方 -1 像素外边

1.1K20

【CSS】盒子模型外边 ⑤ ( 模型盒子垂直外边的合并 - 塌陷 | 相邻模型盒子垂直外边合并 | 嵌套模型盒子垂直外边合并 )

文章目录 一、相邻模型盒子垂直外边合并 - 塌陷 1、外边塌陷现象说明 2、代码示例 - 塌陷效果 二、嵌套模型盒子垂直外边合并 - 塌陷 1、外边塌陷现象说明 2、代码示例 - 塌陷效果...、相邻模型盒子垂直外边合并 - 塌陷 ---- 注意 : 仅在 垂直方向 上会出现 外边合并 现象 , 水平方向 外边 不会合并 ; 1、外边塌陷现象说明 上下相邻 的 两个模型盒子 , 如果出现下面的情况...: 设置上下相邻的 模型盒子 时 , 只给一个设置 上下边 , 不要都设置 ; 2、代码示例 - 塌陷效果 下面的示例中 , div1 设置了 下外边 100 像素 , div2 设置了 上外边...- 塌陷 ---- 1、外边塌陷现象说明 嵌套 的 模型盒子 中 , 如果出现下面的情况 : 父元素 没有 内边 和 边框 父元素 和 子元素 都设置了 上外边 , 则会出现 父元素 上外边...与 子元素 上外边 合并的情况 , 合并后的 上外边为 二者之间 较大的值 ; 推荐解决方案 : 为 父元素 设置 边框 或 内边 , 不要让 两个外边 互相接触 ; 为 父元素 添加 overflow

1.1K30

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

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

1.3K20

CSS--外边合并的问题

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

1.3K20

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/数值/百分比。

1.7K60

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 结论:当元素在垂直方向,两个相邻的元素之间增加上下外边时,会出现外边的叠加

65820

【CSS】盒子模型外边 ③ ( 插入图片 | 插入图片位置移动 - 修改外边 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )

和 上边 而设置图片的位置 ; margin-left 设置图片的 左外边 ; margin-top 设置图片的 上外边 ; 代码示例 : img { /* 设置图片大小 *.../ width: 200px; height: 200px; /* 通过修改 盒子模型 外边 修改图片显示位置 */ margin-left: 50px; margin-top:...image.jpg"> 标签 , 插入图片 , 通过设置 标签的宽高 width: 200px; height: 200px; 来设置图片大小 , 通过设置 标签的 外边.../* 通过修改 盒子模型 外边 修改图片显示位置 */ margin-left: 50px; margin-top: 50px; 来设置图片的位置 ; 代码示例 : img { /* 设置图片大小 */ width: 200px; height: 200px; /* 通过修改 盒子模型 外边

1.5K10

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

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

61720
领券