CSS3 box learning and css3box Learning

CSS3 box learning and css3box Learning

The box style provided by CSS3 enables the flexible layout of elements inside the box. We don't need to use float or display: inline to arrange block elements horizontally (box-orient can do this ), you can also calculate the width or percentage of each block to achieve the same balance (box-flex can do it ). So, use sister paper boldly. Set the display: box for the parent element to layout the internal block-level child elements. In this case, the internal elements are arranged in the inline element arrangement mode, but the width and height can be set. Use the following style for the parent box:

1. box-orient

Specifies the arrangement of internal sub-elements, including

• Vertical
• Horizontal
• Inline-axis
• Block-axis

2. box-align

Specifies the vertical arrangement of internal child elements:

• Center: center vertically in the parent box
• Start: arranged from the top of the parent Element
• End: Align the bottom of the parent Element
• Stretch: vertically stretched to fill the entire parent Element
• Baseline

3. box-pack

Horizontal Alignment
Start: left aligned
Center: Align child elements horizontally
Justify: aligned at both ends
End: right alignment

Note: box-align and box-pack Alignment Methods are related to box-orient settings.

4. box-direction

The sequence of sub-boxes.

5. box-sizing

Set which parts of the box are included in width:

• Content-box: width = content area
• Border-box: width = content area + padding + border

6. box-flex

This attribute must be set in the child element to allocate the remaining width and height of the parent element (when it is set to vertical layout). To set this attribute, display must be set by the parent element: box is useful.
Understanding of remaining width:

Parent container width-Sub-container fixed width (priority)/sub-container content width-Sub-container margin & border & padding

Box-align and box-pack also apply to inline elements, while box-flex does not apply to inline elements.

A strange phenomenon is found. When the img and input labels are put together, the box-align: center cannot be used to vertically center the input, while the vertical-align: after the middle. Emma should be related to vertical-align, rather than controlled by box-align.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.