• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Layout Description<a name="EN-US_TOPIC_0000001063230905"></a>
2
3In the JS UI framework, the basic page width is 720 logical pixels. For example, if you set the element width to 100 pixels, the element is displayed on 200 physical pixels in width on a screen whose width is 1440 physical pixels.
4
5Basic page elements include title, text, and image areas. Each basic element may contain multiple sub-elements. You can add components such as buttons, switches, and progress bars as required. When setting the layout, you need to consider the following for each basic element:
6
7-   Size and arrangement
8-   Overlapped with another element
9-   Alignment, padding, and margin
10-   Sub-elements and their positions
11-   Container components and their types
12
13You can disassemble elements on the page first and then implement them in sequence. This reduces visual confusion and logical conflicts caused by element nesting and improves code readability for easier modification. The following figure is used as an example.
14
15**Figure  1**  Page layout<a name="fig11335192315417"></a>
16![](figures/page-layout.png "page-layout")
17
18**Figure  2**  Layout of the comment area<a name="fig186911810182717"></a>
19
20
21![](figures/图片3.png)
22
23