padding是内边距还是外边距-padding内边距是什么意思 收藏 0

HarmonyOS NEXT 应用开发之 Text 组件内边距

Text 组件的内边距（padding）用于控制文本内容与组件边框之间的距离。合适的内边距可以提升文本的可读性，并增强视觉上的舒适感。常见应用场景包括：

• 在按钮或标签中调整文字位置。
• 增加文本块与边框之间的空白以提高可读性。
• 创建一致的布局风格，特别是在响应式设计中。

内边距是 CSS 布局模型中的一部分，用于在组件内容和边框之间添加空间。通过设置 padding 属性，可以改变组件内部的文本布局，而不影响组件的外部尺寸。

1. 初始化 Text 组件：创建文本实例并定义基本属性。
2. 设置文本内容与内边距：指定文本和其四周的内边距值。
3. 渲染 Text 到 UI 界面：将配置好的文本呈现在用户界面上，并检查文本的显示效果。

1. 测试代码：确保文本组件的内边距在不同背景下正确显示，并观察其对布局的影响。
2. 部署场景：在不同设备和屏幕尺寸上测试，以验证内边距在各种环境中的一致性效果。

• HarmonyOS 开发文档
• CSS Padding

内边距在 UI 设计中极大地影响了文本的排版和可读性。通过合理的内边距设置，可以有效改善用户体验，增加界面的美观度和功能性。在设计过程中，应结合整体布局考虑内边距的大小。

随着用户界面技术的发展，未来内边距的设置可能更加智能化。例如，结合用户偏好和屏幕尺寸的变化，系统可以自动调整内边距以优化显示效果。此外，在 AR 和 VR 环境中，内边距将更强调三维空间的层次感，为用户提供更直观和舒适的视觉体验。

CSS 速查手册：核心属性一网打尽

在前端开发中，CSS是必不可少的一环。但CSS的属性繁多，容易让人感到头疼。今天，我们就来整理一份CSS速查手册，帮你快速掌握核心属性，提升开发效率。

CSS 可以通过以下三种方式添加到HTML文档中：

1. 外部样式表: 通过 <link> 标签链接外部 CSS 文件。

1. 内部样式表: 在 <style> 标签中定义 CSS 规则。

1. 内联样式: 直接在 HTML 元素的 style 属性中定义 CSS 规则。

CSS 中可以使用以下方式定义颜色：

• rgb 值: 例如 rgb(255, 0, 0) (红色)
• hex 值: 例如 #FF0000 (红色)
• hsl 值: 例如 hsl(0, 100%, 50%) (红色)

• background-color: 设置背景颜色。
• background-image: 设置背景图片。
• background-repeat: 设置背景图片是否重复。
• background-attachment: 设置背景图片是否固定。
• background-position: 设置背景图片的位置。
• background (简写属性): 一次性设置所有背景相关属性。

Padding (内边距): 元素内容与边框之间的距离。

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding (简写属性): 例如：padding: 10px 20px 15px 5px;

Margin (外边距): 元素边框与其他元素之间的距离。

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin (简写属性): 例如：margin: 10px 20px 15px 5px;

盒子模型是理解 CSS 布局的基础，它包括：

• content: 元素的内容
• padding: 内边距
• border: 边框
• margin: 外边距

display 属性决定了元素的显示方式：

• inline: 内联元素，只占据必要宽度，不换行。
• block: 块级元素，占据整行宽度，会换行。
• none: 隐藏元素。

position 属性用于控制元素的定位方式：

• static: 默认值，不进行特殊定位。
• relative: 相对定位，相对于自身正常位置进行定位。
• fixed: 固定定位，相对于浏览器窗口进行定位，不随滚动条滚动。
• absolute: 绝对定位，相对于最近的已定位祖先元素进行定位。
• sticky: 粘性定位，基于用户的滚动位置来定位。

• color: 设置文本颜色。
• text-align: 设置文本对齐方式 (left, right, center)
• text-decoration: 设置文本装饰线 (line, color, style, thick)

• font-family: 设置字体族。
• font-style: 设置字体样式 (normal, italic, oblique)
• font-size: 设置字体大小 (px, em, %, cm等单位)

z-index 属性用于控制元素的堆叠顺序，值越大，元素越靠上。

overflow 属性用于控制元素内容溢出时的显示方式：

• visible: 默认值，溢出内容可见。
• hidden: 隐藏溢出内容。
• scroll: 显示滚动条。

opacity 属性设置元素的透明度，取值范围 0 到 1。

• p 选择所有 <p> 标签
• #id 选择特定 id 的元素
• .class 选择特定 class 的元素
• * 选择所有元素

• Border: 用于设置元素的边框样式。提供了多种边框样式选择例如：dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden 等。
• Height & Width: 用于设置元素的高度和宽度。可以使用固定值例如px,cm, pt或者相对单位 %, vw,vh。
• Outline: 用于设置元素的外轮廓。提供了 dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden 等样式。同时可以设置轮廓颜色 outline-color, 轮廓宽度 outline-width，轮廓偏移outline-offset。
• !important 关键字用于增加样式的优先级。
• object-fit: 用于控制替换元素（例如图片或视频）在容器中的显示方式。

总结

以上是 CSS 中一些常用的核心属性的总结。掌握这些属性，可以让你更高效地进行网页布局和样式设计。这份速查手册可以作为你在日常开发中的参考，帮助你快速查找和使用所需的 CSS 属性。

思考题:

在实际项目中，你最常用的 CSS 属性有哪些？你通常如何组织和管理你的 CSS 代码？

希望这份 CSS 速查手册对你有帮助！欢迎在评论区分享你的经验。

第9天 | 鸿蒙App开发实战，XML创建布局，共性很重要

XML声明布局的方式更加简便直观，是开发App的核心内容之一，咱们完全有必要搞清楚。每一个Component和ComponentContainer对象大部分属性都支持在XML中进行设置，它们有各自的XML属性，也有共同的属性。

这一节说一下组件共同的属性，至于有\”个性\”的内容，在介绍具体组件时，再详细讲解。所有组件都有的属性，如下：

1. ID

组件唯一编号，可用于区分不同的组件。尤其在DependentLayout布局中，组件之间需要描述相对位置关系，描述时要通过ID来指定对应组件。

在Java类中，是通过组件ID，查找组件的，如果ID名相同，会返回第一个组件，因此你要保证ID的唯一性，避免出现与预期不符合的问题。

2. 布局参数

为必选属性，值可为数字，也可为match_parent等。

具体的数值：10（以像素为单位）、10vp（以屏幕相对像素为单位）。

match_parent：表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小；

match_content：表示组件大小与它的内容占据的大小范围相适应。

min_width用于调整组件的最小宽度，min_height用于调整组件的最高度。

3. 前景背景

值可为图片，也可以为颜色值。

找一张背景图，放到media目录下，并在ability_main.xml文件中进行引用，运行虚拟机之后，效果如下：

4. 边距

外边距：清除周围的（外边框）元素区域，没有背景颜色，是完全透明的。

margin 可以一次性改变所有上下左右的外边距。如果要单独设置某个外边距，可用如下中的一个或多个。

内边距：用于在任何定义的边界内的元素内容周围生成空间。

padding可以一次性改变所有上下左右的内边距。如果要单独设置某个内边距，可用如下中的一个或多个。

外边距和内边距的示意图如下所示：

好了，组件共性说完了，关注我，下一节更精彩。学开发鸿蒙App，不是每个人都能找到这里的，恭喜你找到了老陈。一个当了10多年技术总监的老家伙，总爱在今日头条@老陈说编程上，分享Python、Java和App(Android、iOS和鸿蒙)方面的干货。关注我，你就赚翻了

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com