box-sizing

Said the original box
margin
border
padding
Content
calculated new box of contrast

旧盒子：boxWidth = width + border2 + padding2; contentWidth = width;
新盒子：boxWidth = width; contentWidth = width - border2 - padding2;

ie6 promiscuous mode box model
box-sizing: border-box;

box-sizing

Sizing-Box: content-box| border-box;
Default: content-box;
Value:
content-box:
padding and border are not included in the definition of the width and height. Border width and the actual value is equal to the set width of the object, padding sum, i.e. (Element width = width + border + padding)
This property is expressed as 标准模式box model under.
border-box:
Padding and border are included within the definition of the width and height. Width value is equal to the actual width of the object is provided, even if the definition does not have a border and padding change the actual width of the object, i.e. (Element width = width)
This property is expressed as 怪异模式box model under.

border-sizing: border-box can meet the following requirements

The first: to achieve 50% of the width of each two div, and set the border, padding
It applies to宽度不固定，但内边距固定
Known display width and padding, border, the contents of the rear end region is passing.

For example input

input width set to 100%, but still exceeded, because the input comes 2pxborder, using box-sizing: border-box ;.

overflow

overflow: visible| hidden| scroll| auto| clip
values:

visible:
overflow content not treated, it may exceed the container contents.
hidden:
hide the contents of the container overflow scroll bars do not appear.
scroll:
to hide the contents of the container overflow, overflow content can be presented by scrolling.
auto:
When content does not overflow the container does not appear scroll bar, scroll bar appears when the contents overflow container, scroll bars appear on demand. overflow textarea elements default value is auto.
clip:
and hidden, like, clip also be used to hide the contents of the container overflow scroll bars do not appear. The difference is that, clip is a complete ban on the rolling container, while still hidden mechanism can be programmed so that the content can be scrolled.

overflow-* = overflow-x,overflow-y

When the overflow-x, provided the non-overflow-y one another visible property is automatically calculated as the default value of the visible auto

Examples

Slide presentation related characters, that is, overflow-x: auto;

resize

resize：none | both | horizontal | vertical

Default: none

This property is used to set a drag resizing.

Value:

none:
do not allow the user to adjust the element size.
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.

Note: Both must be used with the following

resize: vertical;
overflow: scroll;

CSS have to know, fans must know this cassette model concept, a set of CSS elements, you first need to know the element is block or inline type. BFC is used to format the block-level box, the same type of boxes also manage the IFC inline, and other FC. That first of all we look at the concept of the FC.

　 Formatting Context: refers to a rendering area of the page, and have a set of rendering rules, he decided how to locate its child elements, and the relationships and roles with other elements.

　 BFC: block-level formatting context, it refers to rendering a separate block-level region, Block-level BOX participate only in the region has a set of rendering rules to constrain the box layout block level, and independent of the outer region.

BFC generation

　　As mentioned above, BFC is a render region, and that this rendering area where exactly, how big it is, these elements determine generated by the BFC, CSS2.1 provisions to meet one of the following elements in CSS declarations will generate BFC.

The root element of
the value of float is not none
value overflow is not visible
is the inline-block display, the Cell-the Table, the Table-Caption
position value is absolute or fixed
　　to see the Friends of the article proper way to display: table can also be considered generates BFC, in fact, the main reason here is that the Table will default to generate an anonymous table-cell, it is this anonymous table-ccell generates BFC

See detailed my understanding of the BFC

display

box:
a display object as a resilient and elastic cartridge. (Telescopic box oldest version) (CSS3)
inline-box:
a display object as an inline elastically stretchable block-level box. (Telescopic box oldest version) (CSS3)
flex:
a display object as a resilient and elastic cartridge. (The latest version of telescopic box) (CSS3)
inline-flex:
a display object as an inline elastically stretchable block-level box. (The latest version of telescopic box) (CSS3)

display:flex;

At this time, a cartridge located immediately below;

display:box;和display: inline-box;

At this time a cassette is located rightward;

display: flex; and inline-flex;
can scale to a row of a plurality of contents;

Telescopic box

flex composite properties. How to set or retrieve the object sub-element telescopic cartridge allocated space.
flex-grow set or retrieve the expansion ratio of the elastic box.
flex-shrink contraction ratio set or retrieve the flexible pouch
flex-basis set or retrieve the flexible pouch telescoping reference value.
flex-flow properties of the composite. Set or retrieve the object sub-element cassette telescopic arrangement.
Flex-direction position of telescoping box set or retrieve objects in the child element of the parent container.
flex-wrap box, or whether the retrieved object sub-element telescopic wrap beyond parent container.
align-content set or retrieve the stacked box elastically retractable alignment line.
align-items set or retrieve an elastic element is aligned on the cartridge side shaft (longitudinal) direction.
align-self set or retrieve an elastic element itself cartridge is aligned on the shaft side (longitudinal) direction.
justify-content box set or retrieve an elastic element is aligned on the main axis (horizontal axis) direction.
Sets or sequential retrieval order object sub-element telescopic box appears.

flex-direction

direction-Flex: row| row-reverse| column| column-reverse
default is: row
divided spindle axis and intersecting
values:

row:
spindle and the axial direction of the row as the default writing mode. I.e. laterally from left to right (left).
row-reverse:
aligns the opposite row.
column:
main axis of the block as the default writing mode. I.e., longitudinally aligned downward from the upper (top alignment).
column-reverse:
alignment with the opposite column.

Here the two properties are typically written in pairs

display: flex;
flex-direction: row;//默认值

This box has none elastic wrap, but can be a telescopic function, the function may be provided wrap

flex-wrap disposed wrap

flex-wrap：nowrap | wrap | wrap-reverse

nowrap:
Flex container is a single line. Flex children may overflow container in this case
wrap:
Flex container into multiple lines. Overflow portions flex child is placed into a new line In this case, the internal line break occurs subkey
wrap-reverse:
Reverse wrap arrangement.

Multi-line flex-wrap: wrap

.wrapper {
    width : 300px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
}

.content {
    width : 100px;
    height: 100px;
    border: 1px solid green;
    box-sizing: border-box;
}

<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
        <div class="content">6</div>
    </div>
</body>

Code above without flex-wrap: wrap; six telescopic content will appear the same row
plus flex-wrap: wrap; they wrap into two rows, one row three content

Into a flex-wrap: wrap-reverse; will show two lines, namely 456123! !

Differences justify-content align-content align-items of

justify-content based on the spindle, controlled the entire contents of the spindle is on the left border, or right border, or center, or evenly distributed.

align-content based on the cross shaft, the control of content distribution in the vertical direction, with attention to the need to flex-wrap: wrap used together, regardless of the value set or have no effect. Is content are up against, or are down by, or center, or evenly distributed.

align-items based on the cross shaft, the control cross shaft, the entire contents against the upper boundary are distributed, or distributed on the lower boundary, or uniform distribution, or center, e.g., if the align-items provided as flex-end; flex-direction default the upper row, in the vertical direction, will finally close as the parent base, i.e. a base to 123,3 arranged in the second line, close to the bottom 3 of the parent container.

align-items for setting the position of the content distribution in the vertical direction, a single line;

Content provided on the distribution position in the vertical direction;: align-content for a plurality of rows (wrap must be provided flex-wrap)

justify-content

justify-content：flex-start | flex-end | center | space-between | space-around

Spindle arrangement is provided, i.e., the arrangement of the horizontal axis.

Default value: flex-start

flex-start: , 主轴头对齐I.e., the contents of scratch tile;
elastic box element will start position aligned rows. Starting position of the boundary of the main element of the first child row is aligned with the start position of the boundary of the main line, and all subsequent items telescopic cartridge alignment of its immediately preceding item.
flex-end: , 主轴尾对齐I.e. aligned to the end of the content;
an elastic element will be aligned with the box end row position. Main boundary line of the first child element of the end position of the boundary line of the main aligned end position, and all subsequent items telescopic cartridge alignment of its immediately preceding item.
center: The content next to the intermediate alignment;
the elastic element cassette will line the intermediate position alignment. Child elements of that row is aligned with one another and centered row, while the main starting position margins equivalents main elements of a first row and the last row of elements and a position of the end margin (if the remaining space is negative it is maintained equal to the length of the overflow both ends).
space-between: I.e. Content dispersion head alignment, also the end of alignment, uniform content, filled with the void;
elastic box elements evenly distributed in the row. If the leftmost remaining space is negative, or the line has only one child element is equivalent to the value of 'flex-start'. In other cases, the boundary of the main starting position of a border line of the first element is aligned, while the last main element of the boundary line end position alignment margin, and the remaining items are evenly distributed telescopic cartridge, and ensure equal blank space between each two.
space-around: I.e. Content uniform distribution, one-half of the head and tail points of each gap;
elastic box elements evenly distributed in the row, to retain both ends of a half pitch size between the sub-elements and sub-elements. If the leftmost remaining space is negative, only the line or a telescopic box item, the value is equivalent to 'center'. In other cases, projects are evenly distributed telescopic box, and ensure equal blank space between the two at the same time space in front of the first element and the last element of the space behind the other half blank space.

Note: center and space-between the most commonly used

align-items based on the cross shaft

align-items：flex-start | flex-end | center | baseline | stretch

Defaults:stretch

align-items: center;

SUMMARY centered on the elastic box height;

align-items: flex-start/flex-end;

Respectively aligned with the beginning of the vertical axis to align the ends;

align-items: baseline;

When the elastic piece of content in a cassette provided with a margin when it is not aligned with other content, but the use of this property, it allows other content aligned. Align the upper boundary for the first content area.

align-items: stretch;

Normally Normally the elastic region without the contents of the box height content area is stretched content
plus align-items: stretch; distraction content area, aligned with the lower boundary of the parent;
however, once the contents of the content region is provided height, streach will not work, because the priority is not high.

align-items: center;

    flex-wrap: wrap;
    align-items: center;

A plurality of lines in the vertical direction do centered with the above statement, the effect is achieved, evenly distributed multiple lines in the vertical direction, the upper and lower void content is between one half region of the recess.

align-content: center;

It used to make the center in the vertical direction, centered on the compact multiple lines in the vertical direction

Only act on multiple lines, the effect can be revealed

    flex-wrap: wrap;
    align-content: center;

Summary: align-items: center; for centering a single line;
align- Content: Center; for centering a plurality of lines ;

align-content: flex-end;
multi-line aligned in an elastic cassette lower base;

align-content: space-around;

Multiple lines uniformly distributed in the vertical direction, the upper and lower gap is one-half the gap between content.
Effect and align-items: center; consistent.

align-content: flex-start;
before without this, a number of lines between the regions is voided, then add this property, there is no gap between the multiple lines, the above boundary.

align-content: flex-end;
Similarly, the cassette is aligned with the boundary elastic flex-start.

align-content: stretch;
when the width is not set high, the contents of this attribute is automatically set to the respective width and height, so that it takes the parent vertical direction.
Effect and align-items: stretch; consistent.

With a single row vertical center align-items: center;
multi-line vertically centered with align- Content: Center ;
the middle level with justify- Content: Center ;

It is used for sorting order, who top surface teenager who
default value is 0;

Content area who value small, who standing in the front, the default value is 0.

<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
        <div class="content">6</div>
    </div>
</body>

.content:first-of-type{
    order: 1;
}

.content:nth-of-type(2){
   order: -1;
}

The above code shows the order of 234,561;

align-self:flex-end/flex-start;

.wrapper {
    width : 300px;
    height: 600px;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.content {
    width : 100px;
    height: 100px;
    border: 1px solid green;
    box-sizing: border-box;
}
.content:first-of-type{
    align-self: flex-end
}

.content:nth-of-type(2){
   align-self: flex-start;
}

<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
        <div class="content">6</div>
    </div>
</body>

Banner message, the parent set align-items: center;
the first content region to align-self: flex-end; the second content region disposed align-self: flex-start;
the first content on the boundary of the aligned region , aligned to the second content region above the border, other content aligned in a vertical intermediate.

If set align- Content: Center; the same is set to the first content region align-self: flex-end; the second content region disposed align-self: flex-start; align-self so disposed behind the invalid .align- some content higher priority .

注意：flex: flex-grow flex-shrink flex-basis;

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

flex-grow

Syntax:
Flex-Grow: <number>
Value:

<number>:
Numerically to define the spread rate. Do not allow negative

* {
    padding: 0;
    margin : 0;
}

.wrapper {
    width : 600px;
    height: 600px;
    border: 1px solid black;
    display: flex;
    flex-wrap: nowrap;
}

.content {
    width : 100px;
    height: 100px;
    border: 1px solid green;
    box-sizing: border-box;
    flex-grow: 3;
}
.content:first-of-type{
    flex-grow: 1;
}

.content:nth-of-type(2){
   flex-grow: 2;
}

/* 1:2:3将对于的空间以这个比例扩充给这三个内容区 
    剩余300
    第一块宽度：100+ 1/6*300
    第二块宽度：2/6*300
    第三块宽度：3/6*300
*/


<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</body>

flex-grow on the content area is arranged to be set to 0, but can not be a negative value.

flex-grow extending
flex-shrink contraction
flex-basis basis

flex-basis

flex-basis overwrites the value of width,

    flex-basis: auto;
    width: 100px;

At this time, flex-basis and width aligned.
flex-grow: 1; when to flex-basis-based value.

flex-shrink
contraction, transmission type number value, can not be negative, and may be 0, 0, does not shrink;

* {
    padding: 0;
    margin : 0;
}

.wrapper {
    width : 600px;
    height: 600px;
    border: 1px solid black;
    display: flex;
    flex-wrap: nowrap;
}

.content {
    width : 200px;
    height: 100px;
    flex-shrink: 1;
}
.content:nth-of-type(3){
   width: 400px;
   flex-shrink: 3;
}

/* 1:1:3将对于的空间以这个比例收缩这三个内容区 
    超过200
    200*1 + 200*1 + 400*3 = 1600px

    第一块宽度：200 - 200*1 / 1600 * 200(超出的部分)=175px;
    第二块宽度：200 - 200*1 / 1600 * 200=175px;
    第三块宽度：400 - 400*3 / 1600 * 200=250px;
*/

<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</body>

When the elastic region is provided with a box border content and padding, according to formula shrink, shrink ratio value is calculated in accordance with the content area.

* {
    padding: 0;
    margin : 0;
}

.wrapper {
    width : 600px;
    height: 600px;
    border: 1px solid black;
    display: flex;
    flex-wrap: nowrap;
}

.content {
    width : 200px;
    height: 200px;
    flex-shrink: 1;
    padding: 0 100px;
    box-sizing: border-box;
}
.content:nth-of-type(3){
   width: 400px;
   flex-shrink: 3;
}

/* 
   也就是1和2没有内容区域了，3的内容区域为200px
   按照比例：1:1:3收缩
   超出200px
    0px*1 + 0px*1 + 200px*3=600px;
    0px*1/600px * 200px = 0px;
    0px*1/600px * 200px = 0px;
    200px*3/600px * 200px = 200px;
    
    收缩后，内容区域刚好都减为0；
*/


<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</body>

(Real size of the content area) Shrink + ... == weighting value

Contact between the width and flex-basis

width: 180px;
content exceeds 180px, will go to the bottom of the next pattern, pattern not expand nor wrap;
i.e., when the width is greater than the size of the content area, content area would exceed the width, adjacent to the bottom of div;

When the content is larger than flex-basis, will stretch width;
Flex-Basis:

When you set the width, if provided with a value basis, and less than the width, then the width of the true scope basis <realWidth <Width
Not set width, or basis write only basis> width, the minimum width of the representative element, element true wide min-width = basis;

Write-only basis, representative of the minimum width of the element;
when provided together with the width and basis, basis -> min-width ; width ---> max-width;

When the content does not wrap stretched over the content area, it will distraction container;
container whenever, was not wrap content distraction, not compressed calculations.
The distraction of the content of the container does not participate in the calculation of the compression values
if the content areas of English can not wrap the container does not participate in compression;
if it involved need to compress or content only Chinese or English can wrap;

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

Value:

none:
calculating none keyword is: 0 0 auto
< 'Flex-grow'>:
used to specify the ratio of expansion, i.e., the remaining space is positive this "flex child" with respect to "flex container" in other "flex children" can be allocated to the spatial scale.
In the "flex" attribute if the value is omitted, the default is "1"
< 'Flex-shrink'>:
specifies shrinkage ratio, i.e., the remaining space is a negative value when this "flex child" with respect to "flex container" space ratio in the other "children flex" shrinkable.
When the contraction rate will be weighted telescopic contraction of the reference value
in the "flex" attribute is omitted, the default value, if "1"
< 'Flex-basis'>:
specifies telescopic reference value, i.e. before the calculation of the distribution of residual space according to the zooming ratio, the initial value "flex child" length.
In the "flex" attribute if the value is omitted, the default is "0%,"
the value in the "flex" attribute if specified as "auto", the telescopic calculating the reference value is itself < 'width'> Settings If their width is not defined, the length depending on the content.

Description:
Composite property. How to set or retrieve the flexible pouch model object sub-element allocated space.

If the abbreviation "flex: 1," then the calculation is "110%. '
If the abbreviation "flex: auto ', its calculated value" 1 1 auto "
If the "flex: none", then the calculated value "0 0 auto"
If the "flex: 0 auto" or "flex: initial", its calculated value "0 1 auto," that "flex" initial value

flex-grow to 1, the excess portion is 1: 1 to allocate;
if flex-wrap to wrap, flex-shrink to much no change,
Flex-Basis set to 0%, it is equivalent to setting, Flex -basis value of zero, such as when there is a set 250px width, and a flex-basis set to 0%, equivalent to min-width is set to 0, when no content, the width of the display is 0, the content, shows a width of the width of the actual content, when the content width is greater than the value of width and may not wrap, width of the display part is arranged in a fixed 250px, content exceeded, go to the bottom wall of the container.
review:

没有Set width, set flex-basis, the minimum width of the display is Basis, as the width 不能换行of the width of the content increases.
没有Setting width, not set up flex-basis, the actual width of the display is the width of the content;
Set width, set flex-basis, flex-basis< width, min-width corresponding to the set of flex-basis, max-width is the width;
Set width, set flex-basis, > flex-basis= width, provided corresponding to the min-width of flex-basis, wherein when the content of the English line break, the content is still flex-basis region width value, when the need to compress, flex-basis involved in the normal value of compression value, the width of the container is compressed to the maximum value of width; this is error-prone points! ! ! !

If the content needs to wrap arrangement, the parent set flex-wrap: wrap, min-height parented wrap height / 3, max-height is the height content;

flex role

Dynamic center problem

.wrapper {
    resize: both;
    overflow: hidden;
    width : 300px;
    height: 300px;
    border: 1px solid black;
    display: flex;<!-- 这三句连用实现居中 -->
    justify-content: center;<!-- 这三句连用实现居中 -->
    align-items: center;<!-- 这三句连用实现居中 -->
}

Review Default:
Flex-Grow: 0;
Flex-Shrink:. 1;
Flex-Basis: Auto;
Flex-direction: Row;
Flex-wrap: nowrap;
align = left-Content: Stretch;
align = left-items: Stretch;
The justify-Content: Start-Flex;
align = left Self-: Auto; parent level value of the align-items.
order: 0;

You can dynamically increase the navigation
aliquot layout (4 aliquots, 2 aliquots, middle can be added margin)

<body>
    <div class="wrapper">
        <div class="item">天猫</div>
        <div class="item">淘宝</div>
        <div class="item">聚划算</div>        
    </div>
</body>

* {
    padding: 0;
    margin : 0;
}

.wrapper {
    resize: both;
    overflow: hidden;
    width : 300px;
    height: 300px;
    border: 1px solid black;
    display: flex;/* 实现其中div水平方向浮动 */
    align-items: center;/* 让导航栏居中显示 */
}

.item{
    flex: 1 1 auto;/* 实现内容等分，以width为基准，grow或shrink */
    text-align: center;/* 实现文字在容器内居中 */
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    color: #f20;
    border-radius: 5px;
}

.item:hover{
    background-color: #f20;
    color: #fff;
}

Demand can be achieved: I hope to pass over the navigation bar regardless of how many can equally.

Wherein the layout (a fixed, stationary two ......) of a fixed width
would like to achieve intermediate fixed centrally, on both sides of adaptation.

<body>
    <div class="wrapper">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>
</body>

* {
    padding: 0;
    margin : 0;
}

.wrapper {
    width : 400px;
    height: 200px;
    border: 1px solid black;
    display: flex;
}

.content{
    flex: 1 1 auto;/* 将flex: 0 1 auto;改为flex: 1 1 auto;实现平分 */
    /* margin: 10px;加上margin也能实现等分 */
    height: 100px;
    border:1px solid black;
    box-sizing: border-box;
}

.content:nth-of-type(2){
    flex: 0 0 200px;
}

.content:nth-of-type(3){
    flex: 2 2 auto;
}

The above also achieved contraction unequal proportions.

Holy Grail mode

<body>
    <div class="wrapper">
        <div class="header"></div>
        <div class="contain">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>
</body>

* {
    padding: 0;
    margin : 0;
}

.wrapper {
    resize: both;
    overflow: hidden;
    width : 300px;
    height: 300px;
    border: 1px solid black;
    display:flex;
    flex-direction: column;/* 垂直方向上布局 */
}

.header, .footer, .right, .left {
    flex: 0 0 20%;
    border: 1px solid black;
    box-sizing: border-box;
}

.contain {
    flex: 1 1 auto;/* 宽度等于设置的宽度或者实际内容的宽度 */
    display: flex;
    border: 1px solid black;
    box-sizing: border-box;
}

.center {
    flex: 1 1 auto;
}

Note: the premise flex have the role that the parent must display: flex;

Fluid layout

display: inline-block; / multi row, the space between every point div, each row will be empty below, because div intermediate spaces and transport, trigger property bfc /
float
Realization float function with flex

    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;

Review flex

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
flex-grow: 0;flex-grow：<number>
flex-shrink: 1;flex-shrink：<number>
flex-basis: auto;flex-basis：<length> | <percentage> | auto | content
flex-flow：<' flex-direction '> || <' flex-wrap '>; flex-flow:row nowrap;
flex-direction: row; flex-direction：row | row-reverse| column | column-reverse
flex-wrap: nowrap; flex-wrap：nowrap | wrap | wrap-reverse
align-content: stretch; align-content：flex-start | flex-end | center | space-between | space-around | stretch
align-items: stretch; align-items：flex-start | flex-end | center | baseline | stretch
align-self: auto; parent level value of the align-items. Self-align = left: auto| flex-start| flex-end| center| baseline|stretch
justify-content: flex-start; justify-content：flex-start | flex-end | center | space-between | space-around
order:0; order：<integer>

box-sizing、overflow、resize、display、flex

box-sizing

overflow

resize

display

Guess you like