Flying wing box model & implemented
Is a box package surrounding HTML elements on the nature of the CSS box model, comprising: margins (margin), the border (border), the padding (padding), the actual content (content) four attributes.
Cartridge model allows us the space between the other elements and the elements are placed around the element border.
Box model there are two cases: W3C box model and IE box model
Standard box model: css properties in the specified width and height is the width and height of the content
Weird box model: css properties in the width and height specified width and height are included inside and outside margins and borders
Both models can be specified with a box-sizing property
That box-sizing property specifies the type of the box model, content-box designated as the W3C box model (standard box model), border-box box model for IE (weird box model).
Solve the compatibility issues with the style of the two modes
It recommended not to add padding to the elements specified width, but try to add padding or margins to an element of parent and child elements
css in width: 100% and widhth: the difference between the auto
Simple conclusion: auto performance of content + padding + border + margin value is equal to the width of the parent, the father does not overflow, if the width is set to 100% when the inner padding and margins, the father of the child element will spill
Child element width to auto, and the inside and outside margins:
sub-element width is 100%, and inside and outside margins:
Flying wing understanding
(Reference Bowen: https://www.jianshu.com/p/549aaa5fabaa )
Flying wing: a fixed width on both sides, the width of the middle three-column layout adaptation.
advantage:
A fixed width on both sides, an intermediate width adaptive
An intermediate portion in the DOM structure of priority, first to render
It allows any three in a row to become the highest
Only you need to use an extra div tags
Principle: The main advantage of some of the negative effect of margin
Realization of ideas: the use of a three div package contents, so that the content of three float (Cause: Div in the same row of the three in the flow of the document), the block use about Center padding properties to the discharge space left, right. left, right and block elements are positioned relative to magin negative impact moved to a position in reserve.
margin for the negative impact generated:
1. The impact on their own:
margin-top height is negative does not increase, it will only generate upward displacement
margin-bottom is not negative displacement, reduce its height for css read.
2. Impact on the document flow
If the element with the margin-left: -20px; itself will no doubt 20px shifted to the left and positioning (position: relative) is somewhat different, in its position behind the element will fill, i.e. the element will be behind the line after close to this element. .