Preface
PS: These are just personal learning, only for the reference of ideas, may be defective, and are tested in chrome, not necessarily applicable to other browsers, and do not consider IE, remember!!
PS: 2008/03/23 was revised, the style was reformed, and some new methods and principles were introduced.
It is suggested to know the basic knowledge first. In fact, it is in-depth basic knowledge.
Want to be clear (1): CSS Visual Formatting Model | Box Model | Location Scheme | BFC
Want to be clear (2) CSS box model Block box and Linebox
The basic configuration is as follows, just a basic parent-child nested element
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #parentA, #parentB { width: 200px; height: 200px; background-color: red; } #childA { width: 100px; height: 100px; } #childB { width: 50px; height: 50px; } #childA, #childB { background-color: green; } </style> </head> <body> <p>Fixed height and width of child elements A</p> <div id="parentA"> <div id="childA">A</div> </div> <p>Indefinite height and width of sub-elements B</p> <div id="parentB"> <div id="childB">B</div> </div> </body> </html>
The advantages and disadvantages of the middle-level methods.
margin
Because B is block, it doesn't work, but if you don't set the width, it will fill the screen by default.
This is the most basic and simplest way of writing.
#child {margin: 0 auto;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #parentA, #parentB { width: 200px; height: 200px; background-color: red; } #childA { width: 100px; height: 100px; } #childA, #childB { margin: 0 auto; background-color: green; } </style> </head> <body> <p>Fixed height and width of child elements A</p> <div id="parentA"> <div id="childA">A</div> </div> <p>Indefinite height and width of sub-elements B</p> <div id="parentB"> <div id="childB">B</div> </div> </body> </html>
Disadvantages:
1) Width needs to be set (including non-fixed widths such as percentages can also be set)
Absolute positioning
Principle: relative positioning of parent element, absolute positioning of child element, 50% of the width of parent element on one side of offset, 50% of the width of child element on the other side of offset. The key point is that we can see that we need to know the width of the child elements.
#parent{position: relative;} #child {position: absolute; left: 50%; margin-left: -50px;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #parentA, #parentB { position: relative; width: 200px; height: 200px; background-color: red; } #childA { width: 100px; height: 100px; } #childA, #childB { position: absolute; left: 50%; margin-left: -50px; background-color: green; } </style> </head> <body> <p>Fixed height and width of child elements A</p> <div id="parentA"> <div id="childA">A</div> </div> <p>Indefinite height and width of sub-elements B</p> <div id="parentB"> <div id="childB">B</div> </div> </body> </html>
Disadvantages:
1) Subelement widths need to be set (including non-fixed widths such as percentages can also be set)
Principle: Same as above, but using the transform ation attribute of css3 can automatically calculate the width adjustment of sub-elements.
#parent{position: relative;} #child {position: absolute; left: 50%; transform: translate(-50%);}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #parentA, #parentB { position: relative; width: 200px; height: 200px; background-color: red; } #childA { width: 100px; height: 100px; } #childA, #childB { position: absolute; left: 50%; transform: translate(-50%); background-color: green; } </style> </head> <body> <p>Fixed height and width of child elements A</p> <div id="parentA"> <div id="childA">A</div> </div> <p>Indefinite height and width of sub-elements B</p> <div id="parentB"> <div id="childB">B</div> </div> </body> </html>
Advantage:
1) It is not necessary to know the specific width of the sub-elements.
Disadvantages:
1) transform, general compatibility, IE9+;
Principle: Set the orientation value, and give the element a corresponding width and height, it will automatically complete the margin, you can keep in the middle. See the above article for specific principles.
#parent{position: relative;} #child {position: absolute; right: 0; left:0; margin: auto;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #parentA, #parentB { position: relative; width: 200px; height: 200px; background-color: red; } #childA { width: 100px; height: 100px; } #childA, #childB { position: absolute; right: 0; left: 0; margin: auto; background-color: green; } </style> </head> <body> <p>Fixed height and width of child elements A</p> <div id="parentA"> <div id="childA">A</div> </div> <p>Indefinite height and width of sub-elements B</p> <div id="parentB"> <div id="childB">B</div> </div> </body> </html>
Disadvantages:
1) Subelement widths need to be set (including non-fixed widths such as percentages can also be set)
flex
Principle: Flex is the abbreviation of Flexible Box, meaning "flexible layout" to provide maximum flexibility for box models.
Random Gate:
Flex Layout Tutorial: Grammar Paper
Flex Layout Tutorial: Example Paper
#parent { display: flex;//Fls layout justify-content: center;//Alignment of spindle (i.e. horizontal positioning) align-items: flex-start;//Start alignment of cross axes (i.e. vertical positioning), default stretch, if the item is not set height or set to auto, will cause the child element height to occupy the parent element. }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #parentA, #parentB { width: 200px; height: 200px; background-color: red; } #childA { width: 100px; height: 100px; } #childA, #childB { background-color: green; } #parentA, #parentB { display: flex; justify-content: center; align-items: flex-start; } </style> </head> <body> <p>Fixed height and width of child elements A</p> <div id="parentA"> <div id="childA">A</div> </div> <p>Indefinite height and width of sub-elements B</p> <div id="parentB"> <div id="childB">B</div> </div> </body> </html>
It's a front-end savior, with this center that can ignore all the weird attributes of the past.
Advantage:
1) Flexible and comprehensive layout
Disadvantages:
1) align-items default stretch, if the project is not set height or set to auto, it will cause the child element height to occupy the parent element.
2) General compatibility
inline-block+text-align
Principle: The child elements are set to block elements in the line, and the parent elements are aligned in the middle of the text to make it work.
#parent{text-align: center;} #child {display: inline-block;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #parentA, #parentB { width: 200px; height: 200px; text-align: center; background-color: red; } #childA { width: 100px; height: 100px; } #childA, #childB { display: inline-block; background-color: green; } </style> </head> <body> <p>Fixed height and width of child elements A</p> <div id="parentA"> <div id="childA">A</div> </div> <p>Indefinite height and width of sub-elements B</p> <div id="parentB"> <div id="childB">B</div> </div> </body> </html>
Advantage:
1) It is not necessary to set the specific width of sub-elements.
2) good compatibility, even compatible with ie6 and ie7;
Disadvantages:
1) Because text-align is an inheritance style, it will cause all elements of subordinate text to take effect.
The merits and demerits of the method of vertical residence.
table-cell+vertical-align
Principle: table-cell attributes refer to the presentation of label elements in the form of table cells, similar to td tags. Then center the child elements.
Elements in the CSS2.1 table model may not be all contained in document languages other than HTML. At this time, those "missing" elements will be simulated, so that the table model can work properly. All table elements will automatically generate anonymous table objects around themselves, making them conform to the three-level nesting relationships of table/inline-table, table-row and table-cell.
Features:
1) Peer level;
2) Width automatic adjustment;
#parent{display:table-cell;vertical-align:middle;}
Disadvantages:
1) The display type is limited, only one element belongs to inline or inline-block level, and its vertical-align attribute will work. ;
2) The parent element cannot use floating attributes;
3) Special treatment is needed under IE8.
4) This is a very complex combination of attributes. As you can see in the following article, you doubt life.
Random Gate:
CSS in-depth study: display ing horror story decryption (1) - inline-block
CSS in-depth study: display ing horror story decryption (2) - table-cell
Pictures of varying sizes and lines of text are centered horizontally and vertically.
Several Displays I Know: Application of Table-Cell
Some Understanding and Understanding of CSS vertical-align (I)
An in-depth understanding of CSS vertical-align (2) text-top
CSS Deeply Understanding vertical-align and line-height Friendship
Absolute positioning
The original advantages and disadvantages are the same, and will not repeat:
#parent{position: relative;} #child {position: absolute; top: 50%; margin-top: -100px;}
#parent{position: relative;} #child {position: absolute; top: 50%; transform: translate(0,-50%);}
#parent{position: relative;} #child {position: absolute; top: 0; bottom: 0; margin: auto;}
flex
Principle: Flex is the abbreviation of Flexible Box, meaning "flexible layout" to provide maximum flexibility for box models. As mentioned above, align-items are aligned at the beginning of its intersection axis.
#parent{display: flex; align-items: center;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #parentA, #parentB { display: flex; align-items: center; width: 200px; height: 200px; background-color: red; } #childA { width: 100px; height: 100px; } #childA, #childB { background-color: green; } </style> </head> <body> <p>Fixed height and width of child elements A</p> <div id="parentA"> <div id="childA">A</div> </div> <p>Indefinite height and width of sub-elements B</p> <div id="parentB"> <div id="childB">B</div> </div> </body> </html>
Advantage:
1) Flexible and comprehensive layout
2) Even if the width is not set, the full line will not be filled by default.
Disadvantages:
1) General compatibility
Horizontal and Vertical Intermediate Method.
table-cell+inline-block+vertical-align+text-align
#parent { display: table-cell; vertical-align: middle; text-align: center; } #child { display: inline-block; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #parentA, #parentB { display: table-cell; width: 200px; height: 200px; vertical-align: middle; text-align: center; background-color: red; } #childA { display: inline-block; width: 100px; height: 100px; } #childA, #childB { background-color: green; } </style> </head> <body> <p>Fixed height and width of child elements A</p> <div id="parentA"> <div id="childA">A</div> </div> <p>Indefinite height and width of sub-elements B</p> <div id="parentB"> <div id="childB">B</div> </div> </body> </html>
Advantages and disadvantages have been summarized, and basically subverted the expression of father and son elements, but also affect the style of future generations of elements, the only advantage is good compatibility.
absolute+transform
#parent { position: relative; } #child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #parentA, #parentB { position: relative; width: 200px; height: 200px; background-color: red; } #childA { width: 100px; height: 100px; } #childA, #childB { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: green; } </style> </head> <body> <p>Fixed height and width of child elements A</p> <div id="parentA"> <div id="childA">A</div> </div> <p>Indefinite height and width of sub-elements B</p> <div id="parentB"> <div id="childB">B</div> </div> </body> </html>
Although the amount of code is a little too large and the compatibility is a little flawed, it's still quite good.
flex
#parent { display: flex; justify-content: center; align-items: center; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #parentA, #parentB { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; background-color: red; } #childA { width: 100px; height: 100px; } #childA, #childB { background-color: green; } </style> </head> <body> <p>Fixed height and width of child elements A</p> <div id="parentA"> <div id="childA">A</div> </div> <p>Indefinite height and width of sub-elements B</p> <div id="parentB"> <div id="childB">B</div> </div> </body> </html>
Perfect layout, the only thing that can limit it is the browser
Actual combat:
Fixed Width+Adaptive
1) Floating property of float
Principle: By floating floating attribute, elements can be separated from document flow, and subsequent elements can not be fixed width, and floating attribute can not be used differently, but it can be decided whether to use overflow or not to prevent content overflow according to requirements.
.left { float: left; } .right { overflow: hidden; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * {margin: 0;padding: 0;} .header, .footer {height: 60px;} .header{background-color: red;} .footer {background-color: yellow;} .content {height: 500px; color: #fff; } .left, .right{height: 100%;} .left{width: 100px; float: left; background-color: pink;} .right{overflow:hidden; background-color: black;} </style> </head> <body> <div class="contanier"> <header class="header"></header> <div class="content"> <div class="left"></div> <div class="right">Done when day is done If the day is done , If time passes, If birds sing no more . Birds no longer sing. If the wind has fiagged tired , The wind is tired. Then draw the veil of darkness thick upon me , Then cover me with a thick curtain of darkness. Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed , As you wrap the earth in the quilt of sleep at dusk, The petals of the drooping lotus at dusk. Close the petals of the water lily gently. From the traverer, The journey is not finished, the baggage is empty, Whose sack of provisions is empty before the voyage is ended , The clothes were broken and stained, and people were exhausted. Whose garment is torn and dust-laden , You have dispelled the shame and embarrassment of the passengers. Whose strength is exhausted,remove shame and poverty , Make him in the darkness of your mercy, And renew his life like a flower under Flowers are full of vitality. The cover of thy kindly night . Wake up in the darkness of your love.</div> </div> <footer class="footer"></footer> </div> </body> </html>
2) table attribute
Principle: The effect can be achieved by simulating the form of table. According to the characteristics, the element height and width can be filled by itself by omitting setting the element height and width.
.content {display:table; table-layout:fixed; } .left, .right{display:table-cell;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * {margin: 0;padding: 0;} .header, .footer {height: 60px;} .header{background-color: red;} .footer {background-color: yellow;} .content {display:table; table-layout:fixed; height: 500px; color: #fff; } .left, .right{display:table-cell; height: 100%;} .left{width: 100px; background-color: pink;} .right{background-color: black;} </style> </head> <body> <div class="contanier"> <header class="header"></header> <div class="content"> <div class="left"></div> <div class="right">Done when day is done If the day is done , If time passes, If birds sing no more . Birds no longer sing. If the wind has fiagged tired , The wind is tired. Then draw the veil of darkness thick upon me , Then cover me with a thick curtain of darkness. Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed , As you wrap the earth in the quilt of sleep at dusk, The petals of the drooping lotus at dusk. Close the petals of the water lily gently. From the traverer, The journey is not finished, the baggage is empty, Whose sack of provisions is empty before the voyage is ended , The clothes were broken and stained, and people were exhausted. Whose garment is torn and dust-laden , You have dispelled the shame and embarrassment of the passengers. Whose strength is exhausted,remove shame and poverty , Make him in the darkness of your mercy, And renew his life like a flower under Flowers are full of vitality. The cover of thy kindly night . Wake up in the darkness of your love.</div> </div> <footer class="footer"></footer> </div> </body> </html>
3) flex layout
Principle: Flex layout, can be simple, complete and responsive to achieve a variety of page layout.
.content {display:flex;} .right{flex:1;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * {margin: 0;padding: 0;} .header, .footer {height: 60px;} .header{background-color: red;} .footer {background-color: yellow;} .content {display:flex; width:100%; height: 500px; color: #fff; } .left, .right{height: 100%;} .left{width: 100px; background-color: pink;} .right{flex:1; background-color: black;} </style> </head> <body> <div class="contanier"> <header class="header"></header> <div class="content"> <div class="left"></div> <div class="right">Done when day is done If the day is done , If time passes, If birds sing no more . Birds no longer sing. If the wind has fiagged tired , The wind is tired. Then draw the veil of darkness thick upon me , Then cover me with a thick curtain of darkness. Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed , As you wrap the earth in the quilt of sleep at dusk, The petals of the drooping lotus at dusk. Close the petals of the water lily gently. From the traverer, The journey is not finished, the baggage is empty, Whose sack of provisions is empty before the voyage is ended , The clothes were broken and stained, and people were exhausted. Whose garment is torn and dust-laden , You have dispelled the shame and embarrassment of the passengers. Whose strength is exhausted,remove shame and poverty , Make him in the darkness of your mercy, And renew his life like a flower under Flowers are full of vitality. The cover of thy kindly night . Wake up in the darkness of your love.</div> </div> <footer class="footer"></footer> </div> </body> </html>
Grail Layout-Double Flying Wing Layout (Two Columns with Fixed Width and One Column with Adaptation)
Infrastructure
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * {margin: 0;padding: 0;} .header, .footer {height: 60px;} .header{background-color: red;} .footer {background-color: yellow;} .content {height: 500px; color: #fff; background-color: green;} .left, .right, .main{height: 100%; float: left;} .left{width: 100px; margin-left: -100%; background-color: pink;} .main{width: 100%; background-color: blue;} .right{width: 100px; margin-left: -100px; background-color: black;} </style> </head> <body> <div class="contanier"> <header class="header"></header> <div class="content"> <div class="main"> When Day Is Done when day is done If the day is done , If time passes, If birds sing no more . Birds no longer sing. If the wind has fiagged tired , The wind is tired. Then draw the veil of darkness thick upon me , Then cover me with a thick curtain of darkness. Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed , As you wrap the earth in the quilt of sleep at dusk, The petals of the drooping lotus at dusk. Close the petals of the water lily gently. From the traverer, The journey is not finished, the baggage is empty, Whose sack of provisions is empty before the voyage is ended , The clothes were broken and stained, and people were exhausted. Whose garment is torn and dust-laden , You have dispelled the shame and embarrassment of the passengers. Whose strength is exhausted,remove shame and poverty , Make him in the darkness of your mercy, And renew his life like a flower under Flowers are full of vitality. The cover of thy kindly night . Wake up in the darkness of your love. </div> <div class="left"></div> <div class="right"></div> </div> <footer class="footer"></footer> </div> </body> </html>
The main steps in the early stage are as follows:
1) content sub-elements floating;
2) Full screen width of main is in the first place, and rendering in the middle bar should be given priority in browsers (I don't quite understand the difference here???).
3) left and right are forced side by side with negative margin respectively.
So far it seems that the effect has been satisfied. The actual play of left and right covers the main, which results in some content being covered.
Then the Grail Layout-the difference between the two-wing layouts is in the next step.
Grail layout:
4) content plus inner margin padding;
5) left and right use relative positioning migration;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * {margin: 0;padding: 0;} .header, .footer {height: 60px;} .header{background-color: red;} .footer {background-color: yellow;} .content {height: 500px; padding: 0 100px; color: #fff; background-color: green;} .left, .right{position: relative; width: 100px;} .left, .right, .main{height: 100%; float: left;} .left{ left: -100px; margin-left: -100%; background-color: pink;} .main{width: 100%; background-color: blue;} .right{right: -100px; margin-left: -100px; background-color: black;} </style> </head> <body> <div class="contanier"> <header class="header"></header> <div class="content"> <div class="main"> When Day Is Done when day is done If the day is done , If time passes, If birds sing no more . Birds no longer sing. If the wind has fiagged tired , The wind is tired. Then draw the veil of darkness thick upon me , Then cover me with a thick curtain of darkness. Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed , As you wrap the earth in the quilt of sleep at dusk, The petals of the drooping lotus at dusk. Close the petals of the water lily gently. From the traverer, The journey is not finished, the baggage is empty, Whose sack of provisions is empty before the voyage is ended , The clothes were broken and stained, and people were exhausted. Whose garment is torn and dust-laden , You have dispelled the shame and embarrassment of the passengers. Whose strength is exhausted,remove shame and poverty , Make him in the darkness of your mercy, And renew his life like a flower under Flowers are full of vitality. The cover of thy kindly night . Wake up in the darkness of your love. </div> <div class="left"></div> <div class="right"></div> </div> <footer class="footer"></footer> </div> </body> </html>
Double-wing configuration:
4) main plus nested element inner, and set the inner margin;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * {margin: 0;padding: 0;} .header, .footer {height: 60px;} .header{background-color: red;} .footer {background-color: yellow;} .content {height: 500px; color: #fff; background-color: green;} .left, .right{position: relative; width: 100px;} .left, .right, .main{height: 100%; float: left;} .left{margin-left: -100%; background-color: pink;} .main{width: 100%; background-color: blue;} .right{margin-left: -100px; background-color: black;} .inner{padding: 100px;} </style> </head> <body> <div class="contanier"> <header class="header"></header> <div class="content"> <div class="main"> <div class="inner"> When Day Is Done when day is done If the day is done , If time passes, If birds sing no more . Birds no longer sing. If the wind has fiagged tired , The wind is tired. Then draw the veil of darkness thick upon me , Then cover me with a thick curtain of darkness. Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed , As you wrap the earth in the quilt of sleep at dusk, The petals of the drooping lotus at dusk. Close the petals of the water lily gently. From the traverer, The journey is not finished, the baggage is empty, Whose sack of provisions is empty before the voyage is ended , The clothes were broken and stained, and people were exhausted. Whose garment is torn and dust-laden , You have dispelled the shame and embarrassment of the passengers. Whose strength is exhausted,remove shame and poverty , Make him in the darkness of your mercy, And renew his life like a flower under Flowers are full of vitality. The cover of thy kindly night . Wake up in the darkness of your love. </div> </div> <div class="left"></div> <div class="right"></div> </div> <footer class="footer"></footer> </div> </body> </html>
It can be seen that the differences between them lie in:
Grail Layout: Parent elements set the inner margin, child elements set the relative offset, affecting the region from top to bottom
Double-wing layout: The target element is nested with multi-layer elements, and the inner margin of the element is set, and the influence area is limited to that element.
flex:
1) contanier set flex layout, at least full-screen height, vertical direction, can occupy the full-screen effect;
2) content setting flex layout, direction level, enlargement ratio 1, can occupy full width;
3) main enlargement ratio 1, which can occupy the remaining space;
4) before the order of the left;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * {margin: 0;padding: 0;} .contanier{display: flex; min-height: 100vh; flex-direction: column;} .header, .footer {height: 60px;} .header{background-color: red;} .footer {background-color: yellow;} .content {display: flex; flex: 1; color: #fff; background-color: green;} .left, .right{width: 100px;} .main{flex: 1;} .left{order: -1; background-color: pink;} .main{background-color: blue;} .right{background-color: black;} </style> </head> <body> <div class="contanier"> <header class="header"></header> <div class="content"> <div class="main"> When Day Is Done when day is done If the day is done , If time passes, If birds sing no more . Birds no longer sing. If the wind has fiagged tired , The wind is tired. Then draw the veil of darkness thick upon me , Then cover me with a thick curtain of darkness. Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed , As you wrap the earth in the quilt of sleep at dusk, The petals of the drooping lotus at dusk. Close the petals of the water lily gently. From the traverer, The journey is not finished, the baggage is empty, Whose sack of provisions is empty before the voyage is ended , The clothes were broken and stained, and people were exhausted. Whose garment is torn and dust-laden , You have dispelled the shame and embarrassment of the passengers. Whose strength is exhausted,remove shame and poverty , Make him in the darkness of your mercy, And renew his life like a flower under Flowers are full of vitality. The cover of thy kindly night . Wake up in the darkness of your love. </div> <div class="left"></div> <div class="right"></div> </div> <footer class="footer"></footer> </div> </body> </html>
Discarding interference codes such as color and shape, css used in actual layout
.contanier{display: flex; min-height: 100vh; flex-direction: column;} .content {display: flex; flex: 1; color: #fff; background-color: green;} .main{flex: 1;} .left{order: -1;}
The whole process does not need to calculate the numerical value, do not need to offset, flex layout can control direction, proportion, order, automatic calculation style.
The above knowledge points can make you most of the page layout, the mobile side will involve more knowledge points, random doors:
Analysis of viewports
Using Flexible to Realize Terminal Adaptation of Hand-Tao H5 Page