This article is reproduced ( https://www.jianshu.com/p/3046eb050664 )
Six kinds of layout: the Holy Grail layout, Flying wing, Flex layout, absolutely positioned layout, table layout, grid layout
A. The Holy Grail layout
The Holy Grail layout refers to the layout from top to bottom is divided into header, container, footer, and container as part of a three-column layout.
Basic HTML:
1 <body> 2 <div class="container"> 3 <!-- 优先渲染 --> 4 <div class="center"> 5 center 6 </div> 7 <div class="left"> 8 left 9 </div> 10 <div class="right"> 11 right 12 </div> 13 </div> 14 </body>
Basic CSS:
1 .container { 2 overflow: hidden; 3 } 4 .container > div { 5 position: relative; 6 float: left; 7 height: 100px; 8 } 9 .center { 10 width: 100%; 11 background-color: red; 12 } 13 .left { 14 width: 200px; 15 background-color: green; 16 } 17 .right { 18 width: 200px; 19 background-color: blue; 20 }
For the container, to give him a set overflow: hidden makes the BFC a (block-level formatting context). BFC's role:
1. Eliminate Margin Collapse
2. Floating receiving element
3. To prevent text wrapping
Floating so that the three columns, and relative positioning, to the right and left set width 200px container, intermediate container disposed width of 100%. At this time, the left and right center with respect to 100% of the parent element pushed below the container width.
step:
1. hair left on the top of center: floating reasons, left to set the margin-left: 100% of the left column to float above the Center, located on the left and center.
2. Also provided right margin-left: -200px, where a length equal to the length of the right.
3. In this case both sides of left and right center is covered, and therefore to the container is provided padding: 0 200px
4. Since the left and right to the middle also reduced, since the left and right to the left are provided: -200px; right: -200px, respectively, to both sides of its width to the offset overwriting blank space after use padding contaniner.
At this time, the Holy Grail layout is complete, but at a very young age drag layout will be chaos, what is the ultimate style:
.container { overflow: hidden; padding: 0 200px; } .container > div { position: relative; float: left; height: 100px; } .center { width: 100%; background-color: red; } .left { width: 200px; background-color: green; margin-left: -100%; left: -200px; } .right { width: 200px; background-color: blue; margin-left: -200px; right: -200px; }
II. Flying wing
This layout is divided into the same header, container, footer. Layout flaw is that the Holy Grail is in the center of the padding container, the width little time there will be chaos.
Flying wing center section had reported to a main, take the initiative by setting margin of the page distraction.
Basic HTML:
1 <div class="container"> 2 <!-- 优先渲染 --> 3 <div class="center"> 4 <div class="main"> 5 center 6 </div> 7 </div> 8 <div class="left"> 9 left 10 </div> 11 <div class="right"> 12 right 13 </div> 14 </div>
Steps 1 and 2 with the layout Grail
the difference:
The third step: a main setting margin: 0 200px, and set overflow: hidden, making it a BFC.
A window width is too small chaotic situation would not arise, the key point is that the content is wrapped in the main part of.
The final style as follows:
1 .container { 2 overflow: hidden; 3 } 4 .container > div { 5 position: relative; 6 float: left; 7 height: 100px; 8 } 9 .center { 10 width: 100%; 11 background-color: red; 12 } 13 .left { 14 width: 200px; 15 background-color: green; 16 margin-left: -100%; 17 } 18 .right { 19 width: 200px; 20 background-color: blue; 21 margin-left: -200px; 22 } 23 .main { 24 height: 100%; 25 margin: 0 200px; 26 background-color: rosybrown; 27 overflow: hidden; 28 }
3.Flex layout
Layout provided by Flex CSS3 a convenient layout.
Basic HTML: layout with the Holy Grail
step:
1. container to flex to a container: display: flex
2.center width is set to width: 100%, left and right to 200px
3. In order to prevent 100% left and right of the center compression set, provided to the left and right flex-shrink: 0 reduction ratio (defined project, the default is 1, then the project is insufficient space narrowing, if there is a 0, the other is 1, when the lack of space, the former does not shrink).
4. order attribute structure to the three parts of the DOM sort: left: order: 1, center: order: 2, right: order: 3
flex layout is an extremely flexible layout, the ultimate style as follows: (flex exist browser compatibility)
1 .container { 2 display: flex; 3 } 4 .center { 5 background-color: red; 6 width: 100%; 7 order: 2; 8 } 9 .left { 10 background-color: green; 11 width: 200px; 12 flex-shrink: 0; 13 order: 1; 14 } 15 .right { 16 background-color: blue; 17 width: 200px; 18 flex-shrink: 0; 19 order: 3; 20 }
4. absolutely positioned layout
Basic HTML layout and as the Holy Grail.
step:
1. Set container to position: relative and overflow: hidden, because the reference absolute positioning of elements for the first position is not static ancestor element.
2.left left floating, right float to the right.
3.center using absolute positioning, by setting the left and right sides of the distraction.
4.center set top: 0, bottom: 0 softened its height.
.center { position: absolute; left: 200px; right: 200px; top: 0; bottom: 0; }
The disadvantage of this approach is dependent on the left and right height, if the height of both sides of the field is not enough, height of the intermediate region of the content will be compressed.
5.table-cell layout
Benefits table layout that enables highly uniform three columns.
Basic HTML:
1 <body> 2 <div class="container"> 3 <div class="left"> 4 left 5 </div> 6 <!-- 这时的center要放在中间 --> 7 <div class="center"> 8 center 9 </div> 10 <div class="right"> 11 right 12 </div> 13 </div> 14 </body>
step:
1. The three columns are provided to form unit: display: table-cell
2.left和right width:200px , center width:100%
3. At this time to the left and right sides are gone, to set the respective min-widht: 200px ensure not pressed.
The final style:
1 .container { 2 overflow: hidden; 3 position: relative; 4 } 5 .container > div { 6 display: table-cell; 7 height: 100%; 8 } 9 .center { 10 margin: 0 200px; 11 width: 100%; 12 background: red; 13 } 14 .left { 15 width: 200px; 16 min-width: 200px; 17 background-color: green; 18 } 19 .right { 20 width: 200px; 21 min-width: 200px; 22 background-color: blue; 23 }
This layout enables highly three columns are uniform, but not the first to get the center up front rendered.
6. grid layout
The grid layout is probably the most powerful layout, and extremely easy to use, but for now, compatibility is not good. Grid layout, the page may be divided into regions over, or to define the size of the internal elements, position, relationship layer.
Basic HTML:
1 <body> 2 <div class="container"> 3 <div class="left"> 4 left 5 </div> 6 <!-- 这时的center要放在中间 --> 7 <div class="center"> 8 center 9 </div> 10 <div class="right"> 11 right 12 </div> 13 </div> 14 </body>
step:
1. To the container is set to display: grid
2. Set the height of three columns: grid-template-rows: 100px
3. Set the width of three columns, the intermediate adaptive, fixed on both sides: grid-template-columns: 200px auto 200px;
.container { display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 200px auto 200px; }
Only these four styles order to complete the three-column layout, visible grid layout of the powerful.
to sum up:
1. Grail layout, Flying wing, center flex layout height is not affected either side, depending on the height occupied by the content itself.
2. absolute layout center height depends on the height of the sides (as by setting top: 0, bottom: 0 Handle Length distraction)
3.table-cell three-column layout allows high degree of unity, but can not override rendering center
4. The grid layout can not be rendered Center priority, but the layout is simple, compatibility problems.
5.flex layout compatibility issues.
6. Holy Grail layout disorder problem occurs when the page is reduced.