Home > Developer > JavaScript
Layout: display and displayflex
What is layout: the browser places elements in the correct position with the correct size.
Layout: Element placement mode.
Css attributes that affect the element size and position: display position float flex
Display
Set the display mode of the element, including the size and position. The display values include:
Block
Inline
Inline-block
None
Display: block
Block elements are also called block-level elements 』
Features:
1. The default width isParent element width
2. You can set the width and height.
3. line feed display (the elements in the forward direction display the line feed with respect to the display: block, and the subsequent elements display the line feed with respect to the display: block .)
In the default html element, div, p, h1-h6, ul, form ,... The default display is block.
Display: inline
The red border is the parent element.
Display: line features:
1. The default width is the content width.
2. width and height cannot be set, because row-level elements cannot be set width and height.
3. Peer display. If both the forward and subsequent elements are display: inline (Row-level elements), they are displayed in the same row. You can wrap a line inside the element.
Default display: inline element span, a, label, cite, em ,...
Example:
<! DOCTYPE html>
Block vs inline comparison
| Display | Default width | Configurable height | Start position |
Block |
Parent element width |
Yes |
Line feed |
Inline |
Content width |
No |
Peers |
Display: inline-block
Figure 1
Figure 2
Figure 3
Display: inline-blockFeatures
1. The default width is the content width (as shown in Figure 1)
2. configurable width and height
3. Peer display (figure 3)
4. line feed ifExceedsThe inline-block width will be "line feed 』. "Inline" can be wrapped in "element.
Default display: inline-block element input, textarea, select, button...
For example:
<! DOCTYPE html>
Display: none
Set element not to display
Dislplay: none vs visibility: hidden
Visibility: hidden continues to occupy the position.
Example:
<!DOCTYPE html>
Please refer to the following link for more information: please refer to the following link for more information: please refer to the following link for more information: please refer to the following link for more information: when there are too many threads, there are too many threads, too many threads.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
