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

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

文章目录 一、内边 1、概念 2、内边设置语法 3、内边设置效果 二、内边代码示例 1、不设置边的示例 2、设置边的示例 一、内边 ---- 1、概念 内边 是 盒子 的 边框 与...: 设置 左内边 ; padding-top : 设置 上内边 ; padding-right : 设置 右内边 ; padding-bottom : 设置 下内边 ; 3、内边设置效果 设置内边效果...: 为 盒子模型 设置 内边 Padding 后 , 在 盒子内容 与 盒子边框 中间 , 会产生一个内边 , 与此同时 盒子模型 的 尺寸 会变大 ; 二、内边代码示例 ---- 1、不设置边的示例...为 盒子模型 设置 左边 和 上边 , 代码为 : <!...div { width: 200px; height: 200px; /* 设置边框 */ border: 1px solid blue; /* 设置左边

81730

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

前端面试宝典(一)

1) HTML5有哪些新特性? HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。...3) HTML5的离线储存有几种方式?请描述一下 cookies,sessionStorage 和 localStorage 的区别? sessionStorage和localStorage。...属于同一个BFC的两个相邻Box的margin会发生叠加 • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。...当两个或多个垂直边相遇的时候,形成一个外边。外边的高度等于两个发生叠加的外边高度中的较大者。只有普通文档流中块框的垂直外边才会发生外边叠加。...行内框、浮动框或绝对定位框之间的外边不会叠加。 在父类标签设置overflow:hidden ? 给父级标签设置border属性即可 ?

67630

【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
领券