First, what is called box model
Page elements are all frame (box), the frame element defines a processing element content, padding, calculated margins and borders.
Second, the margins
Around the outside of the element's border blank distance (the distance between the elements and elements)
Syntax: outside margin, defined from the four directions
1, unilateral definitions: margin-top / right / bottom / left
(1) Value: px in units of% duty parent element width ratio%
Positive: margin-left elements to the right, margin-top element is moved downward
Negative: that is, in the opposite direction
Value auto: automatically calculating margins of block elements, the upper and lower margins for the invalid block element is centered horizontally
2, shorthand
margin: value; value defines four directions
margin: v1 v2; v1 disposed vertically, v2 disposed about
margin: 0 auto: centered horizontally disposed block elements
margin: v1 v2 v3; v1 disposed on the left and right set v2, v3 settings
margin: v1 v2 v3 v4; on the right lower left
3, comes from the outside elements
h1~h6、p、body、ol、ul、dl、pre
Generally in the development of the need to reset the elements have margins
A program: * {margin: 0; padding : 0}
Option II: Reference Taobao
4, margins special effects
(1) Margin merger
When the two vertical margins meet, they will be merged into one, the final distance is dependent on the larger of the two margins
(2) line of foreign elements within the margin performance
Vertical line from the outer element is invalid (IMG), except
(3) Foreign margin line within a block of performance
In the same line, a vertical row within the block is set margins, will follow the changes in the other rows peer
(4) Margin overflow
Under special conditions, for the sub-element is provided on the margins, it will be applied to the parent element
Special conditions:
1. Parent frame element
2. For the first child element disposed on the outer border, the outer frame will result in any overflow
Solution:
Add borders to the parent element, disadvantages: affect the actual height of the parent element of
the parent element to add padding, the drawbacks of the actual height of the parent element
in the position of the first child element of the parent element, add an empty table
Third, the padding
It does not affect other elements, but will affect an area the size of their own, feeling the visual size changes
grammar:
padding: value; setting the four directions padding
padding: v1 v2; v1 disposed vertically, v2 disposed about
padding: v1 v2 v3; v1 disposed on the left and right set v2, v3 settings
padding: v1 v2 v3 v4; set on the right lower left
Single direction: padding-top / right / bottom / left
Box-sizing property calculation, settings box model
box-sizing: content-box; default box model calculation, div set width, height of the size content
<style>
#d1{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 10px solid black;
box-sizing: content-box;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）box-sizing: boder-box; div set width, height size of border margins
<style>
#d1{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 10px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>