CSS3 Basic Tutorial: CSS3 Elastic Box model

Today to share an article about CSS3 Basic tutorial, mainly about CSS3 elastic box model. The main idea of resilient layout is to allow the container to have the ability to change the width and height of the project to fill the available space (primarily to accommodate all types of display devices and screen sizes).

Note : The Flexbox layout is the most suitable component for an application, as well as a small-scale layout, while a grid layout is used for larger layouts.

The box model is poorly compatible and needs to be prefixed with the browser's private prefix when used.

Parent element Display:box or Display:inline-box;

Display:-webkit-box;display:-moz-box;display:box;

Attributes of the parent element:

Box-orient determines the direction of the child elements, arranged horizontally or vertically.

Horizontal|vertical|inline-axis|block-axis|inherit

Inline-axis is the default value.

and horizontal and Inline-axis appear consistent, let the sub-elements horizontal;

and vertical and Block-axis's performance is also consistent, let the element column

Box-direction determines the order in which child elements are arranged.

Normal|reverse|inherit

Normal is the default value, which indicates the proper order, that is, from left to right, from top to bottom.

Reverse is reversed, which is the opposite of normal order.

The above code, add the following code to the parent element to reverse it

-moz-box-direction:reverse;-webkit-box-direction:reverse;box-direction:reverse;

Box-align: Determines the space utilization in the vertical direction.

Start|end|center|baseline|stretch

Stretch is the default value, which is stretched, how high the element of the parent tag is, and how high the height of its child elements is.

Start indicates top edge alignment

End indicates bottom alignment

Center indicates center alignment

Baseline indicates baseline alignment

In the vertical direction:

-moz-box-orient:inline-axis;-webkit-box-orient:inline-axis;box-orient:inline-axis;

Horizontal direction:

-moz-box-pack:justify;-webkit-box-pack:justify; box-pack:justify;

Box-pack: Determines the space utilization in the horizontal direction.

Start|end|center|justify

Start is the default value that is the same as the starting position of the parent element.

Start all child elements are displayed in the box starting position, the other side of the rich space

End all child elements shown in the box termination position, rich space start position

Center all child elements centered, rich space on both sides

The justify surplus space is evenly distributed between the sub-elements

Box-line: Determines whether child elements can be displayed in a newline. (Not supported)

Single|multiple

Single is the default value, which means no line break

Multiple allow multiple lines of display

Properties of child elements

Box-flex: The value is n

Dimension of child element = size of Box * Box-flex attribute value of child element/sum of all child elements Box-flex attribute values

Box-flex-group: The value is N. currently no browser support

Box-ordinal-group: The value is N. The display order of the child elements in the specification box.

The default value is 1. The smaller the value of the element is displayed before the higher-valued element.

Other:

Resize Free Scaling

Both|horizontal|vertial

Both horizontal vertical direction can be scaled

Horizontal can only be scaled in horizontal direction

Vertical can only be scaled vertically

Need to be used in conjunction with overflow

Similar to the TextArea multiline text box, pull the lower right corner to freely scale the size of the div.

Box model Shadows:

Box-shadow:inset x y blur spread color

Inset: Projection mode

Inset internal projection

Outset external projection, default is external projection

x Shadow horizontal offset, whose value can be a positive or negative value. If the value is positive, the shadow is on the right side of the object and its value is negative, and the shadow is on the left side of the object;

The Y-shadow is offset vertically, and its value can also be a positive or negative value. If positive, the shadow is at the bottom of the object and its value is negative, and the shadow is at the top of the object;

Blur: Fuzzy radius, this parameter is optional, but its value can only be positive, if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the greater the value of the shadow edge is more blurred;

Spread: Extends the shadow radius, this parameter is optional, its value can be positive negative value, if the values are positive, then the entire shadow is extended, the inverse value is negative, then zoom out;

Color: Shadow color, this parameter is optional, default is black

Box-shadow effect under IE8 (IE9 start to support Box-shadow)

Basic syntax: Filter:progid:DXImageTransform.Microsoft.Shadow (color= ' color value ', direction= shadow Angle (value), strength= shadow radius (value));

Note: The filter must be used with the background property, otherwise the filter will fail.

Box Model Reflection

Box-reflect:none |<direction> <offset>?<mask-box-image>

Direction:above | below | Left | Right

The reflection is above, below, to the left, to the right of the object

Offset:length|percentage

The interval between the image and the reflection can be negative

Mask-box-image (optional): none | URL | linear-gradient | radial-gradient | repeating-linear-gradient | Repeating-radial-gradient

URL image Matte

Linear-gradient creating a matte image using a linear gradient

Radial-gradient creating a matte image using a radial (radioactive) gradient

Repeating-linear-gradient creating a matte image with a repeating linear gradient

Repeating-radial-gradient creating a matte image with a repeating radial gradient

Liner-gradient ([| |,]?, [,]*)

The first parameter represents the direction of the linear gradient, top represents the top-to-bottom, left-to-right, and if left top, from the upper-right corner to the lower-bottom corner. The second parameter represents the start and end colors

Recommended Reading: Senior Engineer Hand in hand with you to do Enterprise Portal front-end

CSS3 Basic Tutorial: CSS3 Elastic Box model