CSS3 Elastic box model and layout

First, elastic box model

1, note: When using the elastic box model, the parent element must be added Display:box or Display:inline-box, plus the browser kernel prefix

• Box-orient defining the layout direction of the box model

Horizontal level Display

Vertical vertical Direction

• Box-direction element Permutation order

Normal sequence

Reverse reverse Order

• Box-ordinal-group setting the exact location of an element

• Box-flex defines the elastic space of a box

Dimension of child element = size of Box * child element's Box-flex attribute value/Box-flex property value of all child elements and

• Box-pack Management of the box's rich space

Start all child elements shown on the left side of the box, rich space on the right

End all child elements shown on the right side of the box, rich space on the left

Center all child elements centered

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

• Box-align managing the position of elements in a vertical direction

Star all child elements at the top of the data

End all child elements at the end of the data

Center all child elements centered

2, Box Model shadow

• Box-shadow:[inset] x y blur [spread] color

• Parameters

Inset: Projection mode--inset: internal projection; not given: external projection

X, Y: Shadow offset

Blur: Blur Radius

Spread: Extend shadow radius-extend the original shape before you begin to draw shadows

Color: Colors

3, other box model new properties

• Box-reflect Reflection ( only WebKit kernel supported ): Right 10px linear-gradient (Rgba (0,0,0,1) 0,rgba (0,0,0,0) 100%)

Direction direction: Above|below|left|right;

Distance (optional)

Gradient (optional)

• Resize Free Scaling: Note: Be sure to use a overflow:auto piece with only the horizontal direction can be scaled

Both horizontal vertical can be scaled

Horizontal can only be scaled in horizontal direction

Vertical can only be scaled vertically

• Box-sizing Box Model parsing mode

Content-box Standard Box Model Width/height=border+padding+content

Border-box Weird Box Model Width/height=content

Second, column layout (only WebKit browser kernel support)

• Column-width Column Width
• Number of Column-count columns
• Column-gap column Distance
• Column-rule Column Spacer Line

Three, responsive layout

• Media Type:

All media

Braille Braille Tactile Devices

Embossed Braille Printer

Print handheld device

Projection Print Preview

Screen Color Equipment

Speech ' auditory ' similar media types

TTY non-pixel-compatible devices

Tv

• Key words

and

Not used to exclude certain types of media

Only used to set a specific type of media

• Media features

(max-width:600px)

(max-device-width:480px) Device output width

(orientation:portrait) Vertical screen

(orientation:landscape) Horizontal screen

(-webkit-min-device-pixel-ratio:2) pixel ratio

1. Introducing style sheets for different devices

• <link rel= "stylesheet" type= "Text/css" href= ". /css/print.css "Media=" All and (orientation:portrait) "/>
• @import url ("css/reset.css") screen;

2. Set different device styles in CSS file

• @media screen{Selector {property: property value;}}

• @media screen and (min-width:400px) and (max-width:500px) {. box {margin:0 Auto;}}

3. Mobile Media

• <meta name= "viewport" content= ""/>
• width [pixel_value | device-height]
• Height [pixel_value | device-height]
• User-scalable whether to allow scaling (no| | Yes
• Initial-scale Initial Scale
• Minimum-scale minimum scale allowed for scaling
• Maximum-scale maximum scale allowed for scaling
• target-densitydpi [Dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

CSS3 Elastic box model and layout