[发明专利]容器布局方法、装置、电子设备及存储介质

说明书

本发明涉及一种容器布局方法、装置、电子设备及存储介质，方法包括：识别父容器中的内边距；将内边距替换掉父容器中的原始外边距，形成新的外边距；获取新的外边距对应的长度数据和宽度数据；以父容器的预设点为第一基准点，根据第一基准点、长度数据、宽度数据，以及预配置的外边距数据，确定新的外边距在父容器中的边界位置；基于边界位置，确定填充区域；将父容器中的承载对象充满至填充区域内。

技术领域

本发明涉及计算机技术领域，尤其涉及一种容器布局方法、装置、电子设备及存储介质。

背景技术

在计算机编程中，样式作为前端开发中不可少的一部分，它是实现设计的必须的技术。在前端开发过程中，通常采用超文本标记语言(hypertext markup language，简称html)、层叠样式表(cascading style sheets，简称css)或javascript(简称js)来实现系统前端功能。

例如，采用css实现系统前端开发。css样式设计一般分为两类，一类是容器，一类是控件。顾名思义容器主要负责页面布局，控件是具体的内容展示，类似输入框控件、按钮、下拉等控件。在已有的设计规则中，单个控件默认充满容器，具体参见图1所示，图1示出了控件或子容器20充满父容器10的整个空间的示意图。

在某些特殊情况下，需要为控件或子容器20设置外边距。但是，一旦设置外边距，就会破坏掉控件或子容器20充满父容器10空间的规则，具体参见图2所示，图2中示意出的是在图1单个控件或子容器20充满父容器10的基础上，一旦设置外边距，就会导致控件或子容器20超出其所在父容器10的范围，导致布局错乱。

那么，如何才能够即满足在父容器中设置外边距，又能保证控件或子容器不超出父容器所在的范围，成为本申请所要解决的技术问题。

发明内容

为了解决上述技术问题或者至少部分地解决上述技术问题，本发明提供了一种容器布局方法、装置、电子设备以及存储介质。

第一方面，本发明提供了一种容器布局方法，所述方法包括：

识别父容器中的内边距；

将内边距替换掉父容器中的原始外边距，形成新的外边距；

获取新的外边距对应的长度数据和宽度数据；

以父容器的预设点为第一基准点，根据第一基准点、长度数据、宽度数据，以及预配置的外边距数据，确定新的外边距在父容器中的边界位置；

基于边界位置，确定填充区域；

将父容器中的承载对象充满至填充区域内。

在本发明的可选实施方式中，以父容器的预设点为第一基准点，根据第一基准点、长度数据、宽度数据，以及预配置的外边距数据，确定新的外边距在父容器中的边界位置，具体包括：

根据第一基准点和外边距数据，确定新的外边距对应的第二基准点；

根据第二基准点、长度数据和宽度数据，确定新的外边距在父容器中的边界位置。

在本发明的可选实施方式中，边界位置包括第一边界位置、第二边界位置、第三边界位置，以及第四边界位置，根据第二基准点、长度数据和宽度数据，确定新的外边距在父容器中的边界位置，具体包括：

基于第二基准点和长度数据，确定第一边界位置和第二边界位置；

以及，基于第二基准点和宽度数据，确定第三边界位置和第四边界位置。

在本发明的可选实施方式中，将父容器中的承载对象充满至填充区域内之后，方法还包括：

配置与承载对象对应的伪元素；

并在伪元素中设置承载对象的背景色；