容器布局方法、装置、电子设备及存储介质与流程

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


背景技术：

2.在计算机编程中，样式作为前端开发中不可少的一部分，它是实现设计的必须的技术。在前端开发过程中，通常采用超文本标记语言(hypertext markup language，简称html)、层叠样式表(cascading style sheets，简称css)或javascript(简称js)来实现系统前端功能。
3.例如，采用css实现系统前端开发。css样式设计一般分为两类，一类是容器，一类是控件。顾名思义容器主要负责页面布局，控件是具体的内容展示，类似输入框控件、按钮、下拉等控件。在已有的设计规则中，单个控件默认充满容器，具体参见图1所示，图1示出了控件或子容器20充满父容器10的整个空间的示意图。
4.在某些特殊情况下，需要为控件或子容器20设置外边距。但是，一旦设置外边距，就会破坏掉控件或子容器20充满父容器10空间的规则，具体参见图2所示，图2中示意出的是在图1单个控件或子容器20充满父容器10的基础上，一旦设置外边距，就会导致控件或子容器20超出其所在父容器10的范围，导致布局错乱。
5.那么，如何才能够即满足在父容器中设置外边距，又能保证控件或子容器不超出父容器所在的范围，成为本技术所要解决的技术问题。


技术实现要素：

6.为了解决上述技术问题或者至少部分地解决上述技术问题，本发明提供了一种容器布局方法、装置、电子设备以及存储介质。
7.第一方面，本发明提供了一种容器布局方法，所述方法包括：
8.识别父容器中的内边距；
9.将内边距替换掉父容器中的原始外边距，形成新的外边距；
10.获取新的外边距对应的长度数据和宽度数据；
11.以父容器的预设点为第一基准点，根据第一基准点、长度数据、宽度数据，以及预配置的外边距数据，确定新的外边距在父容器中的边界位置；
12.基于边界位置，确定填充区域；
13.将父容器中的承载对象充满至填充区域内。
14.在本发明的可选实施方式中，以父容器的预设点为第一基准点，根据第一基准点、长度数据、宽度数据，以及预配置的外边距数据，确定新的外边距在父容器中的边界位置，具体包括：
15.根据第一基准点和外边距数据，确定新的外边距对应的第二基准点；
16.根据第二基准点、长度数据和宽度数据，确定新的外边距在父容器中的边界位置。
17.在本发明的可选实施方式中，边界位置包括第一边界位置、第二边界位置、第三边界位置，以及第四边界位置，根据第二基准点、长度数据和宽度数据，确定新的外边距在父容器中的边界位置，具体包括：
18.基于第二基准点和长度数据，确定第一边界位置和第二边界位置；
19.以及，基于第二基准点和宽度数据，确定第三边界位置和第四边界位置。
20.在本发明的可选实施方式中，将父容器中的承载对象充满至填充区域内之后，方法还包括：
21.配置与承载对象对应的伪元素；
22.并在伪元素中设置承载对象的背景色；
23.按照预设规则，将设置有背景色的伪元素层叠到承载对象的下面。
24.在本发明的可选实施方式中，伪元素包括after伪元素或before伪元素。
25.在本发明的可选实施方式中，承载对象包括子容器和/或控件。
26.第二方面，本发明提供了一种容器布局装置，装置包括：
27.识别模块，用于识别父容器中的内边距；
28.处理模块，用于将内边距替换掉父容器中的原始外边距，形成新的外边距；
29.获取模块，用于获取新的外边距对应的长度数据和宽度数据；
30.处理模块还用于，以父容器的预设点为第一基准点，根据第一基准点、长度数据、宽度数据，以及预配置的外边距数据，确定新的外边距在父容器中的边界位置；基于边界位置，确定填充区域；将父容器中的承载对象充满至填充区域内。
31.第三方面，本发明提供了一种电子设备，包括：至少一个处理器、以及与处理器连接的至少一个存储器、总线；其中，处理器、存储器通过总线完成相互间的通信；处理器用于调用存储器中的程序指令，以执行上述第一方面中任一项的容器布局方法。
32.第四方面，本发明实施例提供一种存储介质，存储介质存储有一个或者多个程序，一个或者多个程序可被一个或者多个处理器执行，以实现上述第一方面中任一项的容器布局方法。
33.本发明实施例提供的技术方案，将父容器中的内边距替换掉父容器中的原始外边距，将内边距作为新的外边距。然后，获取新的外边距对应的长度数据和宽度数据，并以父容器的预设点为第一基准点，根据长度数据、宽度数据以及预配置的外边距数据，来确定新的外边距在父容器中的边界位置，进而根据该边界位置，来确定填充区域，并将父容器中的承载对象充满至填充区域。通过该方式，可以在不破坏承载对象占满父容器整个空间的规则的前提下，还能够满足为父容器中的承载对象设置外边距的需求，避免了因为设置外边距而导致的布局错乱的情况发生。
附图说明
34.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。
35.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
36.图1为现有技术提供的控件或子容器充满父容器的整个空间的示意图；
37.图2为现有技术中，在图1单个控件或子容器充满父容器的基础上，设置外边距后控件或子容器超出其所在父容器的范围的示意图；
38.图3为本发明实施例提供的一种容器布局方法的实施流程示意图；
39.图4为本发明提供的一种css盒子模型结构框图；
40.图5为本发明提供的通过本发明实施例提供的容器布局方法设置外边距后，控件或子容器依然充满父容器的示意图；
41.图6为本发明提供的在图5的基础上，为控件或子容器配置响应的背景颜色的过程框图；
42.图7为本发明提供的基于图6所示的为控件或子容器配置响应的背景颜色的过程，最终形成的效果图；
43.图8为本发明实施例提供的一种容器布局装置的结构示意图；
44.图9为本发明实施例提供的一种电子设备的结构示意图。
具体实施方式
45.为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
46.如图3所示，为本发明实施例提供的一种容器布局方法的实施流程示意图，该方法具体可以包括以下步骤：
47.步骤310，识别父容器中的内边距。
48.具体的，当采用css完成页面开发工作时，参见图4所示的css盒子模型。其可以包括：外边距(margin)、边框(border)、内边距(padding)以及内容(content)等部分。子容器和/或控件位于内容部分中进行展示。
49.在本实施中，即需要为父容器中的承载对象，例如子容器和/或控件配置外边距，又要避免子容器和/或控件不超出容器范围。考虑到内边距和外边距比较相似，都是透明的。而不像边框那样存在实线。因此，在本实施中将采用内边距替代为外边界的方式，实现为父容器中的承载对象设置外边距。
50.因此，首要执行的就是识别父容器中的内边距，具体识别过程参见现有技术，这里不再过多赘述。
51.步骤320，将内边距替换掉父容器中的原始外边距，形成新的外边距。
52.具体的，将内边距替换掉父容器中的原始外边距，形成新的外边距，可以理解为将图4中的外边距和边框两部分删除掉，将内边距作为新的外边距。
53.步骤330，获取新的外边距对应的长度数据和宽度数据。
54.具体的，在识别到内边距，也即是新的外边距后，可以通过检测的方式识别新的外边距对应的长度数据和宽度数据。或者，通过外界输入的方式获取新的外边距对应的长度数据和宽度数据。
55.步骤340，以父容器的预设点为第一基准点，根据第一基准点、长度数据、宽度数
据，以及预配置的外边距数据，确定新的外边距在父容器中的边界位置。
56.步骤350，基于边界位置，确定填充区域。
57.可选的，在具体执行步骤340时，可以参见如下步骤实现：
58.根据第一基准点和外边距数据，确定新的外边距对应的第二基准点；
59.根据第二基准点、长度数据和宽度数据，确定新的外边距在父容器中的边界位置。
60.可选的，边界位置包括第一边界位置、第二边界位置、第三边界位置，以及第四边界位置，根据第二基准点、长度数据和宽度数据，确定新的外边距在父容器中的边界位置，具体包括：
61.基于第二基准点和长度数据，确定第一边界位置和第二边界位置；
62.以及，基于第二基准点和宽度数据，确定第三边界位置和第四边界位置。
63.在一个具体的例子中，以图1中的父容器为例进行说明。假设所要设定的外边距数据为20px。第一基准点为图1左上角的顶点，坐标数据为(0，0)，向左平移20px，向下平移20px后，所确定的顶点就是新的外边距的基准点，即第二基准点，其坐标数据为(20px，-20px)。
64.在获取到新的外边距的长度例如为50px，宽度为40px。那么，新的外边距在父容器中的边界位置为：由以下4个点中，每两个点连成的线段构成。其中，4个点的坐标分别为：(20px，-20px)、(70px，-20px)、(20px，-60px)，以及(70px，-60px)。
65.而由上述所说明的4个线段分别构成了新的外边界的第一边界位置(由点(20px，-20px)和点(70px，-20px)组成的线段)、第二边界位置(由点(20px，-60px)和点(70px，-60px)组成的线段)、第三边界位置(由点(20px，-20px)和点(20px，-60px)组成的线段)，以及第四边界位置(由点(70px，-20px)和点(70px，-60px)组成的线段)。且，基于第一边界位置至第四边界位置所形成的区域，可以理解为是填充区域。
66.即，基于第一边界位置至第四边界位置，确定填充区域。
67.步骤360，将父容器中的承载对象充满至填充区域内。
68.具体的，为了符合父容器中的承载对象能够充满整个父容器空间的规则，可以将承载对象充满填充区域内。具体参见图5所示。下文中出现的图5至图7中标号为10的均指代父容器。
69.可选的，在另一个具体的实施例中，当考虑到原始父容器中的控件和/或子容器可能配置有颜色时，具体参见图1所示。父容器中设置有背景颜色。那么，为了保证图5中的控件或子容器同样设置有背景颜色。该方法还可以包括：
70.配置与承载对象对应的伪元素；
71.并在伪元素中设置承载对象的背景色；
72.按照预设规则，将设置有背景色的伪元素层叠到承载对象的下面。
73.可选的，伪元素可以是after伪元素或before伪元素。
74.例如，配置的是after伪元素，并在伪元素中配置承载对象的背景色。即，将背景色的设置放到子容器或者控件的伪元素的样式里面，具体参见图6所示。
75.图6为本发明提供的在图5的基础上，为控件或子容器配置响应的背景颜色的过程框图。在图6中，伪元素为与子容器或控件同等大小的界面。在伪元素中设置有背景颜色。然后，按照预设规则，将设置有背景色的伪元素层叠到承载对象的下面。
76.例如，通过将伪元素的位置向上移动100％的高度，使其层叠到当前元素(控件或子容器)的下面，以达到背景色定位的效果，具体参见图7所示，图7为本发明提供的基于图6所示的为控件或子容器配置响应的背景颜色的过程，最终形成的效果图。如图7所示，背景颜色和承载对象之间，有一个很好的贴合。
77.本发明实施例提供的一种容器布局方法，将父容器中的内边距替换掉父容器中的原始外边距，将内边距作为新的外边距。然后，获取新的外边距对应的长度数据和宽度数据，并以父容器的预设点为第一基准点，根据长度数据、宽度数据以及预配置的外边距数据，来确定新的外边距在父容器中的边界位置，进而根据该边界位置，来确定填充区域，并将父容器中的承载对象充满至填充区域。通过该方式，可以在不破坏承载对象占满父容器整个空间的规则的前提下，还能够满足为父容器中的承载对象设置外边距的需求，避免了因为设置外边距而导致的布局错乱的情况发生。
78.此外，还可以通过配置伪元素的方式，将承载对象的背景色层叠至承载对象的下层，以使承载对象和背景色很好的贴合，由此实现对承载对象的背景色定位。
79.与上述方法实施例相对应，本发明实施例还提供了一种容器布局装置，如图8所示，该装置包括：识别模块801、处理模块802以及获取模块803。
80.识别模块801，用于识别父容器中的内边距；
81.处理模块802，用于将内边距替换掉父容器中的原始外边距，形成新的外边距；
82.获取模块803，用于获取新的外边距对应的长度数据和宽度数据；
83.处理模块802还用于，以父容器的预设点为第一基准点，根据第一基准点、长度数据、宽度数据，以及预配置的外边距数据，确定新的外边距在父容器中的边界位置；基于边界位置，确定填充区域；将父容器中的承载对象充满至填充区域内。
84.可选的，处理模块802具体用于，根据第一基准点和外边距数据，确定新的外边距对应的第二基准点；
85.根据第二基准点、长度数据和宽度数据，确定新的外边距在父容器中的边界位置。
86.可选的，边界位置包括第一边界位置、第二边界位置、第三边界位置，以及第四边界位置，处理模块802具体用于，基于第二基准点和长度数据，确定第一边界位置和第二边界位置；
87.以及，基于第二基准点和宽度数据，确定第三边界位置和第四边界位置。
88.可选的，处理模块802还用于，配置与承载对象对应的伪元素；
89.并在伪元素中设置承载对象的背景色；
90.按照预设规则，将设置有背景色的伪元素层叠到承载对象的下面。
91.可选的，伪元素包括after伪元素或before伪元素。
92.可选的，承载对象包括子容器和/或控件。
93.容器布局装置包括处理器和存储器，上述识别模块801、处理模块802，以及获取模块803等均作为程序模块存储在存储器中，由处理器执行存储在存储器中的上述程序模块来实现相应的功能。
94.本发明实施例提供的一种容器布局装置，将父容器中的内边距替换掉父容器中的原始外边距，将内边距作为新的外边距。然后，获取新的外边距对应的长度数据和宽度数据，并以父容器的预设点为第一基准点，根据长度数据、宽度数据以及预配置的外边距数
据，来确定新的外边距在父容器中的边界位置，进而根据该边界位置，来确定填充区域，并将父容器中的承载对象充满至填充区域。通过该方式，可以在不破坏承载对象占满父容器整个空间的规则的前提下，还能够满足为父容器中的承载对象设置外边距的需求，避免了因为设置外边距而导致的布局错乱的情况发生。
95.此外，还可以通过配置伪元素的方式，将承载对象的背景色层叠至承载对象的下层，以使承载对象和背景色很好的贴合，由此实现对承载对象的背景色定位。
96.本发明实施例还提供了一种存储介质(计算机可读存储介质)。这里的存储介质存储有一个或者多个程序。其中，存储介质可以包括易失性存储器，例如随机存取存储器；存储器也可以包括非易失性存储器，例如只读存储器、快闪存储器、硬盘或固态硬盘；存储器还可以包括上述种类的存储器的组合。
97.当存储介质中一个或者多个程序可被一个或者多个处理器执行，以实现上述在电子设备侧执行的容器布局方法。
98.处理器用于执行存储器中存储的容器布局程序，以实现以下在电子设备侧执行的容器布局方法的步骤：
99.识别父容器中的内边距；
100.将内边距替换掉父容器中的原始外边距，形成新的外边距；
101.获取新的外边距对应的长度数据和宽度数据；
102.以父容器的预设点为第一基准点，根据第一基准点、长度数据、宽度数据，以及预配置的外边距数据，确定新的外边距在父容器中的边界位置；
103.基于边界位置，确定填充区域；
104.将父容器中的承载对象充满至填充区域内。
105.在本发明的可选实施方式中，以父容器的预设点为第一基准点，根据第一基准点、长度数据、宽度数据，以及预配置的外边距数据，确定新的外边距在父容器中的边界位置，具体包括：
106.根据第一基准点和外边距数据，确定新的外边距对应的第二基准点；
107.根据第二基准点、长度数据和宽度数据，确定新的外边距在父容器中的边界位置。
108.在本发明的可选实施方式中，边界位置包括第一边界位置、第二边界位置、第三边界位置，以及第四边界位置，根据第二基准点、长度数据和宽度数据，确定新的外边距在父容器中的边界位置，具体包括：
109.基于第二基准点和长度数据，确定第一边界位置和第二边界位置；
110.以及，基于第二基准点和宽度数据，确定第三边界位置和第四边界位置。
111.在本发明的可选实施方式中，将父容器中的承载对象充满至填充区域内之后，方法还包括：
112.配置与承载对象对应的伪元素；
113.并在伪元素中设置承载对象的背景色；
114.按照预设规则，将设置有背景色的伪元素层叠到承载对象的下面。
115.在本发明的可选实施方式中，伪元素包括after伪元素或before伪元素。
116.在本发明的可选实施方式中，承载对象包括子容器和/或控件。
117.本发明实施例提供了一种处理器，处理器用于运行程序，其中，程序运行时执行：
识别父容器中的内边距；
118.将内边距替换掉父容器中的原始外边距，形成新的外边距；
119.获取新的外边距对应的长度数据和宽度数据；
120.以父容器的预设点为第一基准点，根据第一基准点、长度数据、宽度数据，以及预配置的外边距数据，确定新的外边距在父容器中的边界位置；
121.基于边界位置，确定填充区域；
122.将父容器中的承载对象充满至填充区域内。
123.图9为本发明实施例提供的一种电子设备的结构示意图，图9所示的电子设备90包括：至少一个处理器901、以及与处理器901连接的至少一个存储器902、总线903；其中，处理器901、存储器902通过总线903完成相互间的通信；处理器用于调用存储器中的程序指令，以执行上述的容器布局方法。本文中的电子设备可以是服务器、pc、pad、手机等。
124.本发明还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：
125.识别父容器中的内边距；
126.将内边距替换掉父容器中的原始外边距，形成新的外边距；
127.获取新的外边距对应的长度数据和宽度数据；
128.以父容器的预设点为第一基准点，根据第一基准点、长度数据、宽度数据，以及预配置的外边距数据，确定新的外边距在父容器中的边界位置；
129.基于边界位置，确定填充区域；
130.将父容器中的承载对象充满至填充区域内。
131.在本发明的可选实施方式中，以父容器的预设点为第一基准点，根据第一基准点、长度数据、宽度数据，以及预配置的外边距数据，确定新的外边距在父容器中的边界位置，具体包括：
132.根据第一基准点和外边距数据，确定新的外边距对应的第二基准点；
133.根据第二基准点、长度数据和宽度数据，确定新的外边距在父容器中的边界位置。
134.在本发明的可选实施方式中，边界位置包括第一边界位置、第二边界位置、第三边界位置，以及第四边界位置，根据第二基准点、长度数据和宽度数据，确定新的外边距在父容器中的边界位置，具体包括：
135.基于第二基准点和长度数据，确定第一边界位置和第二边界位置；
136.以及，基于第二基准点和宽度数据，确定第三边界位置和第四边界位置。
137.在本发明的可选实施方式中，将父容器中的承载对象充满至填充区域内之后，方法还包括：
138.配置与承载对象对应的伪元素；
139.并在伪元素中设置承载对象的背景色；
140.按照预设规则，将设置有背景色的伪元素层叠到承载对象的下面。
141.在本发明的可选实施方式中，伪元素包括after伪元素或before伪元素。
142.在本发明的可选实施方式中，承载对象包括子容器和/或控件。本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图
和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
143.在一个典型的配置中，设备包括一个或多个处理器(cpu)、存储器和总线。设备还可以包括输入/输出接口、网络接口等。
144.存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)，存储器包括至少一个存储芯片。存储器是计算机可读介质的示例。
145.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
146.还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
147.本领域技术人员应明白，本发明的实施例可提供为方法、系统或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
148.以上仅为本发明的实施例而已，并不用于限制本发明。对于本领域技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本发明的权利要求范围之内。