Margin I rarely use, generally used to also only relative to adjust the position of a layer to achieve a certain effect. Because you've been working on a topic that you've been using recently, you've researched how to implement various layouts. It is found that the layout structure using margin negative values is much more flexible than the way we normally use layer nesting layers to float around.
The effect of margin negative value on document flow
Rather, it should be the effect of margin negative values on layer positioning,
When there is no float
If there is no float, the negative outer margin affects the height and width of each layer,
Of course it depends on whether you set a horizontal or vertical negative margin. Interested can go to build a demo experiment.
When there is a float
There is certainly a lot more complexity in floating, this example is to float to the left (float:left;) For example.
Demo Address: Margin Negative layout demo
Margin-demo
Briefly summarize this example:
The entire demo consists of three layers from left to right #gird-left, #main, #siderbar
The sequence of documents flows is #main, #gird-left, #siderbar
The three-layer float is left (float:left;), and the three layers are in one horizontal position.
The more popular way to do this is if you want to achieve the above layout, the negative value of the outer margin is greater than the current level of all widths.
The CSS layout is defined as follows:
#main {
margin:0 315px 0 160px;
}
Set aside 160 pixels and 315 pixels for the #main as the main document flow display, leaving a position for the remaining two layers.
#gird-left{
Margin-left:-100%;
}
Left outer margin-100%, you can directly extract this layer directly from the document stream to the left of the parent level.
#siderbar {
Margin-left: -300px;
}
Set the #siderbar to 300 pixels because the layer is 300 pixels wide and the previous layer is 100%;
This example involves a number of comprehensive applications of negative margin, which I hope you can understand.
Floating margin negative layout, the same horizontal position will cascade,
The back of the document stream will be on the top,
If you can't read an example of an enhanced understanding:
margin--
Benefits of margin Negative layout
From the order of the documents, we do not need to arrange the order of the document flow code from top to bottom, as in traditional layouts, from left to right.
Clearly, the important sequence of content as a Web page is #main, #gird-left, #siderbar,
And our habit of reading Web pages is to put the main things in the middle, followed by the left, the last right,
Use negative outside distance we did it perfectly,
It not only optimizes search engines but also improves the reading experience.
"Case Resolution"
One or three column display (without floating and additional labels);
When the list is too long, we generally consider floating to make it appear as multiple columns, in fact, another way of thinking can be achieved.
<!doctype html>
<meta charset= "UTF-8" >
<title>negative Margin list three columns show </title>
<style>
*{margin:0;padding:0;font-size:14px;}
. Goback{clear:both;height:30px;line-height:30px;text-align:center;}
UL {List-style:none;}
Li {width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.3em;}
. col2 {margin-left:120px}
. col3 {margin-left:240px}
. top {Margin-top:-2.6em;}
</style>
<body>
<ul>
<li class= "col1" >10 home state-owned enterprises annual hospitality fee of 2.9 billion is only used to eat </li>
<li class= "col1" > Media said China's luxury car market because the government tightly controls the rapid shrinking of the bus </li>
<li class= "col2 Top" > Philippine spokesperson smiles to kill Taiwan fishermen event </li>
<li class= "col2" > Mistress calls for Evidence </li>
<li class= "col3 top" > Lei alleged bribery was prosecuted by procuratorial organs </li>
<li class= "col3" > Day said that suspected Chinese navy submarines were found in the waters near Okinawa Kyumi </li>
</ul>
</body>
The most common tab, the current item selected state;
<!doctype html>
<meta charset= "UTF-8" >
The superposition of <title>negative margin </title>
<style>
*{list-style:none;margin:0;padding:0;font-size:12px;}
. clearfix:after {
Clear:both;
Display:block;
height:0;
line-height:0;
Visibility:hidden;
Content: "";
}
. clearfix {*zoom:1}
. Goback{clear:both;height:30px;line-height:30px;text-align:center;}
. demo{width:400px;}
. tab{
border-bottom:1px solid #66CC66;
}
. tab li{
Float:left;
Display:inline;
margin-left:8px;
}
. tab Li a{
Background-color: #CCFFCC;
border:1px solid #66CC66;
Color: #666;
Display:block;
margin-bottom:-1px;
padding:0 5px;
line-height:20px;
Float:left;
Font-weight:bold;
Text-decoration:none;
}
. tab LI. Current,
. tab Li a:hover{
Background-color: #fff;
border-bottom:1px solid #fff;
_position:relative;
}
. cont{padding:10px;border:1px solid #6c6; border-top:0;}
</style>
<body>
<div class= "Demo" >
<div id= "Demo2" >
<ul class= "tab Clearfix" >
<li><a href= "#" class= "current" >tab one</a></li>
<li><a href= "#" >tab two</a></li>
<li><a href= "#" >tab three</a></li>
<li><a href= "#" >tab four</a></li>
</ul>
</div>
<div class= "cont" > Desolate Wilderness, a group of tyrannical robbers are lashing a beautiful girl Maria (Laura Danna Capolete Loredana Cappelletti). Kidnap Diago (Franco Niro Franco nero adorn) rescue. He was mysterious and cold, dragging a coffin in a muddy wilderness. Diego took Maria to the desolate town, and people were curious about his arrival, and were even more uneasy about the hidden secrets of the coffin. </div>
</div>
</body>
Fixed-width layout so easy, with floating easily handle two columns of adaptive layout, three columns the same.
<!doctype html>
<meta charset= "UTF-8" >
<title>negative margin Two-column adaptive layout </title>
<style>
*{list-style:none;margin:0;padding:0;font-size:12px;}
. Goback{clear:both;height:30px;line-height:30px;text-align:center;}
. layout{width:960px;margin:0 auto;background: #f5f5f5;}
. main{float:left;width:100%;height:300px;margin:0 -200px 0 0;background: #ccc;}
. main-wrap{margin:0 210px 0 0;}
. Aside{float:left;width:200px;height:300px;background: #f5f5f5;}
</style>
<body>
<div class= "Layout" >
<div class= "Main" >
<div class= "Main-wrap" >main</div>
</div>
<div class= "aside" >aside</div>
</div>
</body>
How do you handle the margin value of the last element of each line? Set the class name separately 0? Trim through the parent layer? Use margin negative value bar!
<!doctype html>
<meta charset= "UTF-8" >
Removal of <title>negative margin extra outer margin </title>
<style>
*{list-style:none;margin:0;padding:0;font-size:12px;}
. clearfix:after {
Clear:both;
Display:block;
height:0;
line-height:0;
Visibility:hidden;
Content: "";
}
. clearfix {*zoom:1}
. Goback{clear:both;height:30px;line-height:30px;text-align:center;}
. demo{width:320px;margin:0 auto;padding:10px 0;*overflow:hidden;background:green;
. figure-list{margin:0 -10px 0 0;}
. figure-list li{float:left;width:100px;height:100px;margin:0 10px 10px 0;background: #f5f5f5;}
</style>
<body>
<div class= "Demo" >
<ul class= "Figure-list clearfix" >
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
<li>item-4</li>
<li>item-5</li>
<li>item-6</li>
</ul>
</div>
</body>
Disadvantages of margin Negative layout
As a cascade of document streams, we need to do more testing to avoid the difficulty of reading with overlapping text content
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
