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

HarmonyOS实战—组件的外边内边

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

1.4K20

【CSS】盒子模型内边 ④ ( 盒子模型内部尺寸计算 - 内容尺寸、内边、边框宽度 | 盒子模型尺寸 = 内容尺寸 + 内边 + 边框宽度 )

文章目录 一、盒子模型内部尺寸计算 1、设置内边和边框对盒子模型的影响 2、盒子模型尺寸计算 二、代码示例 1、盒子模型扩展尺寸示例 2、盒子模型固定尺寸示例 一、盒子模型内部尺寸计算 ----...1、设置内边和边框对盒子模型的影响 内容尺寸 大小是 固定的 , 设置的 width 和 height 是多少 , 内容尺寸就是多少 ; 如 : 下面的 CSS 样式 , 设置 div 尺寸为 200...; 二、代码示例 ---- 1、盒子模型扩展尺寸示例 分析下面的代码 , 盒子模型 的尺寸如下 : 内容尺寸 : 200 x 200 像素 ; 内边 : 上内边 20px , 右内边 10px...= 280px ; 盒子模型的高度 = 内容高度 200px + 上内边 20px + 下内边 30px + 边框宽度 10px * 2 = 270px ; 代码示例 : 盒子模型内部尺寸计算

1K30

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

三.注意点: 虽然有很多的选择,不过在小程序还是尽量用rpx吧,省的适配。...外边(margin)和内边(padding) 说到边,那这个基本上跟Android里的概念差不多,先来看一个图吧,(虽然标注的丑了点,不过那不是重点) ?...一.margin:外边;设置对象四边的外延边。 margin: 20rpx 10rpx 25rpx 10rpx :如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。...二.padding:内边:设置对象四边的内部边。...四.padding-top,padding-right,padding-bottom,padding-left对应的分别是上右下左内边的距离,可取值:auto/数值/百分比。

1.8K60

【CSS】盒子模型内边 ③ ( 盒子模型内边案例 | 使用 Fireworks 分析网页 | 缩放图片 | 切片工具测量图片 | 吸管工具获取图片颜色 | 代码示例 )

文章目录 一、盒子模型内边案例 二、使用 Fireworks 分析网页 1、导入图片 2、缩放图片 3、切片工具测量图片 4、吸管工具获取图片颜色 5、测量结果 三、代码示例 一、盒子模型内边案例..., 只有 2 个字 , 有的链接很长 , 如 " 关注/订阅/互动 " , 字数很多 , 这样就不适合为其设置一个固定宽度 ; 最佳方案 是 为 链接 选项 设置一个内边 , 让其宽度自适应 ; 二、...---- 代码示例 : <!...line-height: 48px; /* 文本大小 15px 灰色 */ font-size: 15px; color: #555666; /* 上下内边...0px 左右内边 20px */ padding: 0 20px; /* 取消链接下划线 */ text-decoration: none; } /* 鼠标经过样式

1.1K20

”盒模型“之如何防止边框和内边把元素撑开

当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边会撑开元素。看下面的例子,两个相同宽度的元素显示的实际宽度却不一样。...CSS开发者需要用比他们实际想要的宽度小一点的宽度,需要减去内边和边框的宽度。值得庆幸地是你不需要再这么做了......当你设置一个元素为 box-sizing: border-box; 时,此元素的内边和边框不再会增加它的宽度。...所以开发者们把以下CSS代码放在他们页面上: * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box;...既然 box-sizing 是个很新的属性,目前你还应该像我之前在例子那样使用 -webkit- 和-moz- 前缀。这可以启用特定浏览器实验的特性。同时记住它是支持IE8+。

1.3K60

【CSS】浮动 ⑥ ( 浮动元素与父容器盒子关系 | 代码示例 )

文章目录 一、浮动元素与父容器盒子关系 二、代码示例 1、有内边的情况 2、没有内边的情况 一、浮动元素与父容器盒子关系 ---- 在 父容器 盒子模型 , 将 子元素 设置为 浮动元素 ,...浮动元素 紧贴边框 内测 ; 浮动元素 与 父容器盒子模型 内边 : 浮动元素 紧贴 父容器内边 ; 二、代码示例 ---- 1、有内边的情况 在下面的代码 , 父容器 边框 20 像素 ,...内边 20 像素 , 浮动元素 会 紧贴 20 像素的内边 , 距离边框 20 像素 位置 的左上角 放置 ; 代码示例 : 浮动元素与父盒子 显示效果 : 2、没有内边的情况 如果不设置内边 和 外边 , 父容器样式如下设置 : /* 父容器盒子模型 */ .father { width: 400px; height

75730

【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边 | CSS 盒子模型外边 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★

一、CSS 盒子边框 1、盒子模型 HTML 的 一个布局 可以看做一个 矩形的 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 的容器 ; 盒子模型 组成 : 由内到外顺序如下 : 内容 Content...内边 + 边框宽度 最终得到的才是盒子模型的宽度 ; 分析下面的代码 , 盒子模型 的尺寸如下 : 内容尺寸 : 200 x 200 像素 ; 内边 : 上内边 20px , 右内边 10px...向 HTML 的 标签 , 添加元素 , 并 不是紧贴 左侧 和 顶部 , 而是有一个 默认的间距 ; 标签 默认设置了 8 像素的外边 , 对应的调试模式 橙色的 部分...两个边之和 = margin-bottom + margin-top , 而是 这两个边 的较大的值 , 即 max (margin-bottom , margin-top) , 该现象称为 外边...不会合并 ; 8、嵌套模型盒子 外边塌陷 嵌套 的 模型盒子 , 如果出现下面的情况 : 父元素 没有 内边 和 边框 父元素 和 子元素 都设置了 上外边 , 则会出现 父元素 上外边

21010

html超链接使用_HTML超链接代码

html超链接的写法是e69da5e6ba903231313335323631343130323136353331333431353431使用a标签,如:百度一下,你就知道。...在html,a标签的a(或者 A) 是 anchor 的缩写 。anchor的基本解释是锚,这些标签的作用是标明超连接的起始位置或目的位置。 标签可定义锚,通过使用 href 属性。...在所有浏览器,链接的默认外观是,未被访问的链接带有下划线而且是蓝色的,已被访问的链接带有下划线而且是紫色的,活动链接带有下划线而且是红色的。...扩展资料: Htmla标签伪类: 1、a:link {color: #FF0000} 未访问的链接样式。 2、a:visited {color: #00FF00} 已访问的链接样式。...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/158308.html原文链接:https://javaforall.cn

1.1K30

【CSS】使用绝对定位 浮动解决外边塌陷问题 ( 为父容器 子元素设置内边 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )

一、外边塌陷描述 ---- 在 标准流的父盒子 , 添加一个 标准流子盒子 ; 如果 子盒子设置 100 像素的外边 , 父盒子也会被带下来 , 这就是外边塌陷 ; 下面的示例 1 ,...父盒子 和 子盒子 没有添加任何外边 , 没有塌陷 ; 示例 2 , 为子盒子设置了 上外边 , 结果将 父盒子也带下来了 ; 1、没有塌陷的情况 代码示例 : 展示效果 : 2、外边塌陷情况 在子盒子设置了 100 像素的上外边 , 出现了外边塌陷的情况 ; /* 子盒子添加上外边 出现塌陷情况 */ margin-top: 100px;...代码示例 : 展示效果 : 二、传统方法解决外边塌陷 - 为父容器 / 子元素设置内边 / 边框 ---- 这里使用传统方法 : 为 父容器 / 子元素 设置 内边 / 边框 ; 下面是 为父容器设置 1

1.2K20

【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边设置 | 背景图片及位置设置 | 盒子嵌套设置 )

通配符选择器 * 设置所有标签的默认内外边为 0 ; /* 清除标签默认的内外边 */ * { padding: 0; margin: 0; } 代码示例...> 展示效果 : 三、设置最外层盒子样式 ( 盒子模型内外边设置 ) ---- 将 效果图片拖动 到 Adobe Fireworks , 使用 切片工具 分析盒子模型 : 整个盒子的尺寸为...339 x 238 像素 盒子顶部的内边为 16 像素 盒子左侧的内边为 16 像素 盒子尺寸为 339 x 238 像素 , 如果设置 16 像素内边 , 则 内容尺寸需要在盒子尺寸的基础上...: 顶部标题盒子高度是 50 像素 文字大小为 17 像素 文字顶部有 16 像素 内边 , 顶部使用外部模型盒子的内边 , 可以不设置 文字底部有 16 像素 内边 文字左侧有 16 像素...内边 , 左侧使用外部模型盒子的内边 , 可以不设置 标题盒子有一个 1 像素的下边框 代码示例 : <!

1.4K10
领券