Conversion of document stream

Time:2021-3-9

A case study of Jiugongge layout

Conversion of document flow: relative positioning = > absolute positioning

1. Under normal circumstances, when the mouse moves to a certain block, a certain block becomes larger. So the layout is relative positioning, and the actual amplification is absolute positioning

Conversion of document stream

There is a problem when setting the magnifying style for a certain block. The magnifying block squeezes the next block.

So we need to transform the document stream, relative positioning = > absolute positioning

 #ul1 li
 {
     list-style: none;width: 100px;height: 100px;border: 1px solid black;
     margin: 10px;float: left;background-color: gray;
 }
 #ul1
 {
     width: 366px; height: 366px; border: 1px solid black;margin: 100px auto;
     position: relative;
 }

 <ul id="ul1">
     <li></li>
     <li style="width: 200px;height: 200px;"></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
 </ul>

Conversion of document stream

2. For document stream conversion, remember that a traversal cannot set coordinates and absolute at the same time,

Error demonstration: the same traversal setting coordinates and absolute

 for(var i=0; i<aLis.length; i++)
 {
     aLis[i].style.left=aLis[i].offsetLeft + "px";
     aLis[i].style.top=aLis[i].offsetTop + "px";
     aLis[i].style.position="absolute";
 }

Conversion of document stream

The reason is that when the first block is set to absolute, it will be out of the hierarchy, and the next block will catch up with the front block, and finally coincide,

So write two traversals separately, setting coordinates and absolute respectively.

 var oUl1=document.getElementById("ul1");
 var aLis=oUl1.getElementsByClassName("li");
 for(var i=0; i<aLis.length; i++)
 {
     aLis[i].style.left=aLis[i].offsetLeft + "px";
     aLis[i].style.top=aLis[i].offsetTop + "px";
 }
 for(var i=0; i<aLis.length; i++)
 {
    aLis[i].style.position="absolute";
 }

There is also a small problem. In the previous relative positioning box model, we set the margin:10px ; all blocks keep the spacing offset to the lower right corner. After we set the absolute positioning, there is no need to maintain the real-time interval.

 #ul1 li
 {
     list-style: none;width: 100px;height: 100px;border: 1px solid black;
     margin: 10px;float: left;background-color: gray;
 }

Conversion of document stream

Therefore, while setting the absolute positioning, set the margin to 0. Finally, the document flow conversion: relative positioning = > absolute positioning is completed

 var oUl1=document.getElementById("ul1");
 var aLis  =oUl1.getElementsByTagName("li");
 for(var i=0; i<aLis.length; i++)
 {
     aLis[i].style.left=aLis[i].offsetLeft + "px";
     aLis[i].style.top=aLis[i].offsetTop + "px";

 }
 for(var i=0; i<aLis.length; i++)
 {
     aLis[i].style.position="absolute";
     aLis[i].style.margin="0px";
 }

Conversion of document stream