CSS3 box model, css3 box

CSS3 box model, css3 box

Display: box

Arrange sub-elements in rows
If the parent-Level Width is smaller than the child-level box, the excess part will not be squeezed out but directly exceeded.

-Box-orient: verticalMake the box vertical display default horizontal display

-Box-direction: ReverseReverse the order of box arrangement;

-Box-ordinal-group :;Set the specific location of the element Arrangement

-Box-flex :;
Child element size = box Size * box-flex attribute values of child elements/sum of box-flex attribute values of all child elements

Processing of rich spaces in the horizontal direction
Box-pack: Justify;Rich spaces evenly distribute sub-elements (similar to margin between boxes)
Start: all child elements are displayed on the left.
All the child elements of end show the rich space on the right side of the box on the left side (= right floating)
Center: center all child elements

Vertical rich space management
-Box-align: start;Show on top
Center is displayed in the middle
End: display at the bottom

-Box-reflect: abve 10px-webkit-linear-gradient (right, rgba (50%,) 0, rgba ); 

The second parameter is the distance between two elements. The third parameter is the gradient of the reflection.

Below reflection to the bottom

Right reflection to the right

Left to left reflection

Resize should be used with overflow: auto;
Resize: both; drag horizontally and vertically
Horizontal direction
Vertical direction
None cannot be dragged.

Box-sizing box Model parsing mode
Standard content-box ModelWidth/height = border + padding + content
Border-box weird box modelWidth/height = content: border padding content is included in its width or height.

Partition Layout
Column-width:; column width
Column-count:; column Columns
Column-gap:; column distance
Column-rule:; column Interval
When the number of columns is written, the width is automatically calculated.
If the width is written, the number of columns is automatically calculated.