CSS3 box model and related properties of elastic layouts

The Box-sizing property allows you to define specific elements that match a region in a specific way. If you need to place two boxes with borders side-by, set the box-sizing to "Border-box". This allows the browser to render a box with the specified width and height, and place the border and padding into the box. Look at some dizzy ah, look at the following several properties should be understood: 1.content-box: Width and height are applied to the content box of the element, the inner margin and border of the element are drawn outside the width and height. For example:

div{Box-sizing:border-box;

/ * Safari */width:50%;float:left; }
In the case of a fixed width, if the element is given a border width, he will apply the element outside, that is, or squeeze other elements;
2, Border-box

any padding and borders specified for the element in fixed widths will be adjusted within the set width and height . the width and height of the content can be obtained by subtracting the border and padding from the set width and height.

ps:https://www.zhihu.com/question/20691294   answers to the relevant questions

Face Ali when referred to the concept of the elastic box, because before and not very clear here to continue to tidy up, elastic box layout 1th: 1, the first thing to consider is compatibility, this layout way compatibility is poor, so you need to consider different browser, here is the version of Compatibility:/HTTP Www.tuicool.com/articles/Afq6Bzq
2. Adaptive, here the adaptive situation is so, shown for example below;

#d1 {
Display:-webkit-box;
Display:-moz-box;
Display:-ms-box;
-webkit-flex-wrap:nowrap;
width:500px;
border:1px solid red;
}
#i1, #i2, #i3 {
width:200px;
height:200px;
BORDER:1PX solid black;
}

This time the sub-div beyond the parent Div, until the parent div width of more than 600, will continue to follow normal thinking, but in Firefox, the situation is not the same, the parent element will be forced to the width of the 600+.

3, Display:box and Inline-box difference, in my opinion, box is still block, but Inline-box is a block-level flow in the line.

4, Display:box/inline-box associated attribute Box-flex is used on the container sub-label, because it represents the proportion of the container child tag in the parent element, so this time can not set the width of the child label.

5, Box-align, is the position of the elastic box in the parent element. (Above is a few of the commonly used properties)

ps:https://www.zhihu.com/question/22991944

Flex, and box is different, when the width of the child element is more than the width of the parent element when the flex standard than box to a new point, and Flexbox seems to be the latest, there is a section of the lesson on the online video you can look over.

CSS3 box model and related properties of elastic layouts