Home > Developer > Web Develop
1.css margin can change the size of the container
Element size
Viewable dimensions-the width of the box in the standard box model does not include the margin value, clientwidth
Occupy size-including margin width outwidth is not in the standard, there is a corresponding method in jquery
Margin and visual dimensions
1.1 Using the normal block horizontal element with no Width/height set
2.2 Only available in horizontal direction dimensions
<body style= "Background-color: #1a2b3c" >
<div style= "border:4px 6px; Background-color:blue ">
Text <br/>
Text <br/>
</div>
</body>
The width of the box changes when the margin value is changed.
Application: Self-adapting layout for one-side fixed width
<p style= "margin-left:170px" > Picture left floating </p>
Margin and occupy size
1.block/inline-block horizontal elements are applicable
2. Independent of no set width/height value
3. Suitable for horizontal and vertical directions
Cases
<body style= "Background-color: #1a2b3c" >
</body>
You can see that the container occupies a smaller size.
Take advantage of this feature
White up and down in the rolling container
<div style= "height:100px; padding:50px 0; " >
</div>
The inside box is open outside the box to show the scroll bar, of course this is not in the non-Chrome browser white effect (there is no below).
The right approach is
<div style= "height:100px; ">
</div>
Second: CSS margin and percent units-understanding margin percent units
Horizontal direction percent/vertical direction percent
Average element percent/absolute element percentage
Calculation rules for percent margin
img{margin:10%;with:600px;heigth:200px;}
The percent margin of a normal element is calculated relative to the width of the container! So here's the margin:10%;---->top:60px,left:60px; is calculated relative to the width of the container.
Percent margin of an absolutely positioned element
img{margin:10%; position:absolute;}
The percent margin of an absolute element is calculated relative to the width of the first anchor element's ancestor element (relative/absolute/fixed). The normal element is calculated relative to the parent element.
<div style= "width:1024px;height:200px; position:relative; " >
<div style= "width:600px; height:200px ">
</div>
</div>
Utilization characteristics
Wide Height 2:1 Adaptive Rectangle
. box{background-color:olive; Overflow:hidden;}
. Box > div{margin:50%}
Here also involves a just point is the margin overlap. Overflow is also set here because it prevents margin overlap
Third, margin overlap common characteristics
1.block horizontal elements (excluding float and absolute elements)
2. Do not consider Writing-mode (writing direction is from top to bottom), only occurs in the vertical direction (Margin-top/margin-bottom)
Margin overlaps 3 scenarios
1. Adjacent sibling elements
P{line-height:2em;margin:1em 0;background: #f0f3f9;}
<p> First line </p>
<p> Second Line </p>
There's going to be a margin overlap here.
2. Parent and first/last child elements
. Father{background: #f0f3f9}
<div class= "Father" >
<div class= "Son" style= "margin-top:80px;" >son</div>
</div>
Setting margin for the first or last child element of the child is equivalent to setting the same margin value for the parent element, the same margin value as the child element, and the same margin as the child element and the parent element
3. Empty block Element
. Father{background: #f0f3f9}
<div class= "Father" >
<div class= "Son" ></div>
</div>
Son's height here is only 1em, not 2em.
Empty block element margin overlaps other conditions
1. Element does not have border settings
2. Element has no padding value
3. There is no inline element inside
4. No height, or min-height
Margin-top overlap
1.1 Parent element Non-blocky formatting context element
1.2 parent element does not have border-top settings
1.3 Parent element has no padding-top value
1.4 There is no inline element separation between the parent element and the first child element
Margin-bottom overlap
1.1 Parent Element Non-blocky formatting context element
1.2 parent element does not have Border-bottom settings
1.3 parent element has no Padding-bottom The value
1.4 does not have an inline element delimited between the parent element and the last child element
1.5 The parent element has no height,min-height,max-height limit
Kill margin-top overlap
. Father{background: #f0f3f9}
<div class= "father";
<div class= "son" style= "margin-to p:80px; " >son</div>
</div>
1. The parent element is a non-blocky formatting context element. Father:overflow:hidden;
2. The parent element has no Border-top setting
. father:border:4px solid #ccc;
3. The parent element has no padding-top value
4. There is no inline element separation between the parent element and the first child element
<div class= "father" >&NBSP;
<div class= "Son" style= "margin-top:80px;" >son</div>
</div>
Kill Margin-bottom overlap
Front four and margin-top,
<d IV class= "Father" style= "height:100px" >
<div class= "son" style= "margin-top:80px;" >son</div>
</div>
Calculation rules for margin overlap
1. Positive fetching of large values
. a{margin-bottom:50px;}
. b{margin-top:20px;}
<div class= "a" ></div>
<div class= "B" ></div>
. father{margin-top:20px;}
. son{margin-top:50px;}
<div class= "Father" >
<div class= "Son" ></div>
</div>
. a{margin-top:20px;margin-bottom:50px}
<div class= "a" ></div>
The above results are all margin:50px;
2. Addition of positive and negative values
. a{margin-bottom:50px;}
. b{margin-top:-20px;}
<div class= "a" ></div>
<div class= "B" ></div>
. father{margin-top:-20px;}
. son{margin-top:50px;}
<div class= "Father" >
<div class= "Son" ></div>
</div>
. a{margin-top:-20px;margin-bottom:50px}
<div class= "a" ></div>
The above results are all 30px.
3. Negative negative value
. a{margin-bottom:-50px;}
. b{margin-top:-20px;}
<div class= "a" ></div>
<div class= "B" ></div>
. father{margin-top:-20px;}
. son{margin-top:-50px;}
<div class= "Father" >
<div class= "Son" ></div>
</div>
. a{margin-top:-20px;margin-bottom:-50px}
<div class= "a" ></div>
The results above are -50px.
What is the meaning of margin overlap?
The beginning of the birth of the Web page ... Just typesetting text layout, not so complicated now.
1. Continuous paragraphs or lists, such as, if there is no margin overlap between the end and the other sibling label 1:2 relationship, typesetting is not natural;
Nesting or placing directly into any bare div anywhere in 2.web will not affect the original layout
3. Left empty person A P element, do not affect the original reading typesetting
Practice:
Leveraging margin overlap
. list{margin-top:15px;}
Better implementation
. list{
margin-top:15px;
margin-bottom:15px;
}
More robust, with the last element removed or position swapped, without breaking the original layout.
4th session: Understanding the Margin:auto in CSS
The mechanism of Margin:auto
Element sometimes, even if no width or height is set, it is automatically populated
Div{background: #f0f3f9}
If width or height is set, the auto-fill feature is overwritten
Div{width:500px;background: #f0f3f9;}
The margin value at this time is 0px
If you set the value width or height, the AutoFill feature is overwritten.
The size of the original should be filled by width/height forced changes, and Margin:auto is to fill the size of the change set;
Div{width:500px;marign-right:100px;margin-left:auto;}
If one side is fixed, the side Auto,auto is the remaining space size, and if both sides are auto, the remaining space is divided evenly
Why the picture img{width:200px;marign:0 Auto} is not centered
Because the picture is inline, it does not occupy the entire container, even if it has no width.
Set img{display:block;width:200px;marign:0 Auto;}
Because at this time the picture is block level, even if there is no width, it will occupy the entire container can not be displayed on one line.
Why clearly the container height, the element height Margin:auto 0 cannot be vertically centered
. Father{height:200px;background: #f0f3f9;}
. son{height:100px; Width:500px;margin:auto;}
Horizontally centered, not vertically centered.
Explanation: If. Son does not have height:100px set, height will automatically 200px high? --no so margin is not auto-populated, forcing the width height to be set, so it is not automatically populated.
Note: If the child is greater than the parent in the horizontal direction, it is not centered when the result evaluates to a negative value.
Achieve Vertical margin Center
Change the vertical direction of the flow to achieve vertical Margin:auto
Writing-mode and vertical centering (CSS3)
. father{height:200px; width:100%; wiriting-mode:vertical-lr;}
. Son{height:100px;width:500px;margin:auto;}
Absolute and Margin Center
. father{height:200px;position:relative;}
. son{position:absolute; top:0px right:0px bottom:0px;left:0px}
. Son no Width/height,absolute element automatically fills the container.
When width and height are set
. father{height:200px;position:relative;}
. son{position:absolute; top:0px right:0px bottom:0px;left:0px;width:500px;height:100px;}
The original stretch spread is now retracted back.
The stretched space is set margin:auto; the average distribution will be horizontally vertically centered.
. father{height:200px;position:relative;}
. son{position:absolute; top:0px right:0px Bottom:0px;left:0px;width:500px;height:100px;margin:auto;}
ie8+ above support!
Session five: CSS margin negative position
Justify (margin changes element size) under 1.margin negative values
Example
. box{
width:1200px; Margin:auto;background:orange;
. Ul{overflow:hidden;}
. li{
width:380px;height:300px;
margin-right:20px;
Background:green;
Float:left;
}
}
The list of implementations leaves a gap in the last one.
The size of the container is changed by the negative value of margin, so that the container becomes wider. Can solve this problem perfectly.
. box{
width:1200px; Margin:auto;background:orange;
. ul{overflow:hidden;margin-right:-20px;}
. li{
width:386.66px;height:300px;
margin-right:20px;
Background:green;
Float:left;
}
}
Equal-height layout margin change element occupy space under 2.margin negative value
Margin and the upper and lower left white
<div style= "height:200px;" >
</div>
. box{overflow:hidden;resize:vertical;}
. Child-orange,
. child-green{margin-bottom:-600px;padding-bottom:600px;}
. Child-orange{float:left;background:orange;}
. Child-green{float:left;background:green;}
By setting a large margin-bottom negative value, and a large padding-bottom fill the missing space, the implementation of the high-level layout. Principle: Content block elements can be displayed in padding. As long as there is no setting
Background:clip,box-sizing:content
Two-column adaptive layout under 3.margin negative, elements occupy space follow margin move
<div style= "float:left;width:100%" >
<p style= "margin-right:170px;" > Picture Right Floating </p>
</div>
Parsing the invalid case of CSS Marign
1.inline horizontal element's vertical margin is invalid
2 Prerequisites 1. Non-replacement elements, such as not IMG elements; 2. Normal writing mode
Cases
<span style= "margin:0px" >marign:0px</span>
Set margin233px for span;
The horizontal is valid and the vertical direction is not valid.
2.margin overlap
3.display:table-cell
Display:table-cell/display:tab-row and other declaration margin invalid!
Replacement element for exception Img,button
4.position and margin
The margin value of an absolutely positioned element's non-locating direction is "invalid"
The margin value of absolute positioning is always valid, not just like ordinary elements.
5. Beyond's margin failure
If there are floating elements in the BFC content block, the margin of the next element is calculated relative to the outer div.
6. Margin failure due to inline
Div[style= "Height:200px;background-color: #f0f3f9;"] >img[style= "MARIGN-TOP:30;"]
When Margin-top is big enough, it fails.
Explanation: Inline elements to achieve and baseline alignment, after the picture plus X can be seen, no matter how far margin-top, he will not leave the outside of the container.
Seventh words margin-start and margin-end
Margin-start
img{
margin-left:100px;
-webkit-margin-start:100px;
-moz-margin-start:100px;
margin-sart:100px;
}
1. Normal flow, margin-sart equivalent to Margin-left, the two overlap does not accumulate;
2. If the horizontal drain is from right to left, Margin-start equals to Margin-right;direction:ltr (RTL)
3. In vertical flow (WRITRING-MODE:VERTICAL-LR), Margin-sart is equivalent to Margin-top
Other margin-related properties under WebKit
Margin-before
img{-webkit-margin-before:100px; The default flow direction is equivalent to Marign-top
Margin-after
img{-webkit-marign-after:100px;} The default flow direction is equivalent to Margin-bottom;
margin-collapse outer box overlap
-webkit-margin-collapse:collapse|discard|separate
Control margin overlap
Collapse Default-overlap
Discard Cancel
Separate delimited no overlap
Deep understanding of margin in CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
