首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

【CSS】盒子模型内边 ① ( 内边概念 | 内边设置语法 | 内边设置效果 | 代码示例 )

文章目录 一、内边 1、概念 2、内边设置语法 3、内边设置效果 二、内边代码示例 1、不设置边的示例 2、设置边的示例 一、内边 ---- 1、概念 内边 是 盒子 的 边框 与...内容 之间的 间隔长度 ; 下图中 , 中心 100 x 100 像素 的 是内容 , 内容外侧 , 边框内侧 , 就是 内边 范围 ; 2、内边设置语法 内边设置语法 : padding-left...: 设置 左内边 ; padding-top : 设置 上内边 ; padding-right : 设置 右内边 ; padding-bottom : 设置 下内边 ; 3、内边设置效果 设置内边效果...: 为 盒子模型 设置 内边 Padding 后 , 在 盒子内容 与 盒子边框 中间 , 会产生一个内边 , 与此同时 盒子模型 的 尺寸 会变大 ; 二、内边代码示例 ---- 1、不设置边的示例...为 盒子模型 设置 左边 和 上边 , 代码为 : <!

81930

CSS——边

定义 边包括外边(Margin)属性和内边(Padding)属性,外边属性定义了元素间的间隔,内边属性定义了元素边框与内容区域之间的空白区域。...外边(margin)表示从一个元素的边到相邻元素(或者文档边界)之间的距离,而内边(padding)则定义了元素内部从边到内容的间隔。...列表 元素 描述 margin margin规定元素中四个方向的外边属性。 margin-bottom 设置元素的下外边。 margin-left 设置元素的左外边。...margin-right 设置元素的右外边。 margin-top 设置元素的上外边。 padding padding规定元素的内边,该属性不可为负值,其简写形式可一次性设置四个边的内边。...padding-bottom 设置元素的下内边。 padding-left 设置元素的左内边。 padding-right 设置元素的右内边。 padding-top 设置元素的上内边

1.2K30

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

文章目录 一、元素默认的外边 1、body 标签的默认外边 2、p 标签的默认外边 二、清除元素默认的内外边 1、清除方式 2、代码示例 三、行内元素边设置 一、元素默认的外边 ---...: block; margin: 8px; } 2、p 标签的默认外边 在 body 中添加 p 标签 , 代码如下 : p 标签 默认外边 显示效果如下 : 按 F12 键 , 进入调试模式 , 发现 p 标签元素 上下 都有 橙色的 外边 , 右侧 红色矩形框 中 , 上边 和 下边 都是 1em...---- 1、清除方式 使用 通配符选择器 设置 清除内外边 样式 , 将所有的标签元素 的 默认的内外边 全部设置为 0 ; 清除标签默认的内外边 样式 : * { /* 清除标签默认的内边...也消失了 ; 三、行内元素边设置 ---- 为 行内元素 设置 上下边 是无效的 , 建议只为 行内元素 设置 左右边 ; 如果为 行内元素 设置了上下边 , 可以在某些浏览器或者 web 应用场景出现适配问题

2.3K10

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

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

1.4K20

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

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

85920

外边合并规则

相邻的垂直外边会合并,除了2种特殊情况: 根元素盒的外边不合并 如果一个带有间隙的元素的上外边与下外边相邻,它的外边会和紧挨着的兄弟(元素)的相邻外边合并,但合并后不会再和父级块的下外边合并...(in-flow)孩子的上外边 盒的下外边与其下一个流内紧挨着的兄弟的上外边 最后一个流内孩子的下外边与其height计算值为’auto’的父元素的下外边 盒的上外边和下外边,要求该盒没有建立新的块格式化上下文...父子:幺儿的下外边与父元素的下外边 自身:0高“真空”元素的上外边与下外边 P.S.这里的“真空”是指——把薯片抽成真空。...,我们再反推外边合并的定义: 非根元素的相邻垂直外边会合并,带有间隙的话,合并受限 受限是指带有间隙元素自身上下边相邻的话,只能与兄弟元素的外边合并,无法和父元素的下外边合并 三.合并条件推论...’为0的流内块级盒的下外边会与它的最后一个流内块级孩子的下外边合并,条件是该盒没有下内边和下边框,并且其孩子的下外边没有与具有间隙的上外边合并 盒自身的外边也会合并,条件是’min-height

1.3K30

【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.2K20

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

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

1.1K30

margin-right右边失效

,具体可以看看这几篇:《外边合并》、《盒模型》、《CSS 外边(margin)重叠及防止方法》、《What You Should Know About Collapsing Margins》 但都没能解释这次的问题...,右边为何失效了。...试着移动下子元素: 可以看到子元素的外边位置是随着子元素移动的,所以才会出现了移到右边后右边的外边没有显示的结果。...找了下margin合并,或叫外边塌陷(margin collapsing)相关的内容,基本上都只是提到上下边的问题,于是试着给父元素也设置了margin,然后就看到,右边基本也是无效的,一个auto...如果非要子元素有右边,可以这样: 子元素设置右浮动,但会导致父元素的overflow失效,抱脸~~ 子元素的左边为auto,并且父元素的宽大于子元素的宽; 对于当前问题的解决方案也很简单,为子元素再加一个父级

1.1K30

css负边之详解

为其正名 我们都使用过CSS得外边,但是当谈到负边的时候,我们好像往差的方向发展啦。在网页设计中负边的使用出现了两种极端,一种特别喜欢它,也有一些人认为这完全就是魔鬼的作品。...下面是一些你应该知道的关于负边的事情: 他们是完全有效的CSS 这不是在跟你开玩笑。W3C甚至都说,在外边框中使用负边是允许的。要了解更多可以点击这篇文章 负边不是在hack 这是尤其正确的。...Dreamweaver不理解它 负边不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢? 与其共事 负边如果可以正确的使用的话它的功能是很强大的。有两种场景负边是很重要的。...如果负边和宽度一样大的话,它就会被完全覆盖掉。因为外边,内边,边框和内容加起来等于元素的宽度。如果负外边等于元素的宽度的话,那么该元素的宽度就会变成0px。...这里有一个文章讨论了负边在多列布局中的应用。 微调元素 这是负外边最常也是最简单的使用方式。

1.8K80

CSS盒模型及边问题

盒模型是CSS的基石之一,页面的每一个元素都被看作一个矩形框,分别由外边,边框,内边,内容组成, ?...在CSS中,width和height的值指的是内容的宽高,增加外边,边框,内边并不会对内容造成影响,但是会增加整体的元素框的尺寸,假设10元素的外边,5元素的内边,那么要使框达到100元素,就需要给定...当一个元素包含在另一个元素中,假设该元素没有内边或者边框将外边分开,那么他们的顶、底边框也会发生重合。 ? 解决这种的情况的方式为给里面的元素增加内边或者边框。...当元素为空时,他本身的上下边也会发生重合。 ?...诸如,以一个典型的几个段落组成的文章为例,如果没有叠加,那么段落之间的边就会是段落的顶外边的两倍,但叠加之后,就会有着一样的高度,如图: ?

91620
领券