2017-1-11 CSS3 Layout

2017-1-11 CSS3 Layout CSS Layout

multi-column layouts
columns:column-width| | Coumn-count;
Column-width define the width of each column
Coumn-count defines the number of columns
The initial value of the Columns property depends on the individual attributes of the element, and applies to non-replaceable block elements, inline block elements, and cells, except for table elements.
The Column-width property can define the width of a single column display, which can be used in conjunction with other multi-column layout properties or can be used alone.
Column-gap defines the spacing between two columns
Column-gap:normal |<length>;
Normal: According to the browser default settings for parsing, generally 1em.
<length>: A length value consisting of floating-point numbers and unit identifiers. Non-negative
Define column Border styles
Column-rule:<length>|<style>|<color>|<transparent>;
<length>: A length value consisting of floating-point numbers and unit identifiers, which cannot be negative. The function is the same as the Column-rule-width property.
<style>: Defines the column border style. The function is the same as the Column-rule-style property. Includes none, hidden, dotted, dashed, solid, double, groove, Ridge, inset, and outset
<color>: Defines the color of the column border. The function is the same as the Column-rule-color property.
<transparent>: Sets the transparent display of the border.
define a cross-column display
Column-span:1 | All
1: Shown in this column only.
All: It spans all columns and is positioned above the Z axis of the column.
Defining Column Heights
Column-fill:auto | Balance
Auto: The height of each column changes automatically as its contents change.
Balance: The height of each column will be unified according to the height of the column with the most content.
Design Box Layout
The traditional box model arranges the boxes vertically, based on the HTML stream. You can use the elastic box model to specify a specific order or to invert it. To open the elastic box model, simply set the display property value of the box with the Sub-box to box (or Inline-box)
Display:box;
Id1,id2,id3{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} Binding 3 column columns for a box overall layout effect (equal height)
define an adaptive width
Box-flex:1;
Define column display order
Box-ordinal-group:number;
Define column arrangement direction
box-orient:vertical;
Define Alignment
Property values contained by the Box-pack and Box-align properties
Start
Center
Detailed
[1]: http://www.css88.com/book/css/properties/flexible-box/box-align.htm
Box Model Composition method
Box-sizing:content-box | Border-box
Content-box:padding and border are not included within the defined width and height. The actual width of the object is equal to the width value of the setting and the sum of border, padding, i.e. (Element width = width + border + padding)

.test1{box-sizing : content    -box;    width : 200px ;    padding : 10px ; border : 15px  Solid  #eee ;}  

adjust element size
Resize:none | both | horizontal | vertical
Default: None
applies To: All < ' overflow '; set to non-visible element
Inheritance: No
Animated: No
Computed value: Specified value
None:
does not allow the user to resize the element.
Both:
The user can adjust the width and height of the element.
Horizontal:
The user can adjust the width of the element
Vertical:
The user can adjust the height of the element.
design outline
define contour lines

outline：<‘ outline-width ‘> || <‘ outline-style ‘> || <‘ outline-color ‘>

Default value: See each individual property
Applies to: all elements
Inheritance: None
Animation: See each independent property
Calculated values: See each Independent property
Related properties: < ' Outline-offset ' >
Value:
<‘ outline-width ‘>：
Specifies the width of the outline border.
<‘ outline-style ‘>：
Specifies the style of the outline border.
<‘ outline-color ‘>：
Specifies the color of the outline border.
defining contour Line widths
Outline-width:<length>| Thin | Medium | Thick
Default value: Medium
Applies to: all elements
Inheritance: None
Animation: When the value is<length>When
Calculated value: absolute length;<‘ outline-style ‘>When the value is None, the value is calculated as 0
Value:
<length>: Defines the thickness of the contour with a length value. Negative values are not allowed
Medium: Defines the outline of the default width.
Thin: Defines an outline that is thinner than the default width.
Thick: Defines a contour that is thicker than the default width.
define Contour Line Styles
Outline-style:none | Dotted | Dashed | Solid | Double | Groove | Ridge | Inset | Outset
Default value: None
Applies to: all elements
Inheritance: None
Animation: No
Calculated value: Specify a value
Value:
None: No contour. Independent of any specified < ' outline-width ' > values
Dotted: dot-shaped outline.
Dashed: Dashed outline.
Solid: Solid Line profile
Double: two-line outline. Two single line with its interval and equal to the specified < ' outline-width ' > value
Groove:3d Groove profile.
Ridge:3d Convex groove profile.
Inset:3d Concave Edge profile.
Outset:3d Convex edge profile.
defines the distance from the bounding rectangle of the contour line
Outline-offset:<length>
Default value: 0
Applies to: all elements
Inheritance: None
Animation: When the value is<length>When
Calculated value: Absolute length
Value:
<length>: Defines the contour offset with a length value. Negative values are allowed.
Design Navigation
Nav-index:auto |<number>
Default value: Auto
Applies To: all enabled elements
Inheritance: None
Animation: No
Calculated value: Specify a value
Related properties:<‘ nav-up ‘>||<‘ nav-right ‘>||<‘ nav-down ‘>||<‘ nav-left ‘>
Value:
Auto: The navigation focus order of the element is automatically assigned by the client.
<number>: Use floating-point numbers to define the navigation focus order of the elements. If the value of an element equals 1, it means that the element is first navigated. When several elements have the same nav-index value, they are navigated in the order of the document.
defining the Direction key control order
Nav-up:auto |<id>[Current | root |<target-name>]
Default value: Auto
Applies To: all enabled elements
Inheritance: None
Animation: No
Calculated value: Specify a value
Related properties:<‘ nav-index ‘>||<‘ nav-right ‘>||<‘ nav-down ‘>||<‘ nav-left ‘>
Value:
Auto
The default order.
<id>: The ID of the element being navigated to. #id
<target-name>: The element focus navigation between the frame target pages.
Cancel Style
Initial
e.g. color:initial;

2017-1-11 CSS3 Layout