Page layout
Title: Assuming the height is known, write a three-column layout with the left and right columns each 300px wide and the middle adaptive
When writing code, note: semantic should be in place (not all div) page layout deep understanding of CSS basic knowledge solid thinking and positive (thinking flexible: the advantages and disadvantages of each scheme and comparison; Be proactive: Be sure to master the grid layout solution, because it is the latest and should be reflected in the interview.) Code writing should be standard (indent the place where the indentation, clear class name, you can quickly learn the meaning of the code through the class name)
What is the meaning of this passage?
1. What are the advantages and disadvantages of these five schemes
Floating solution
Disadvantages: Float is out of the flow of documents, common is clear float (how to clear float and clear float issues); Advantages: Good compatibility (float, clear float and float around the elements of the relationship between good)
Absolute positioning solution
Disadvantages: The layout is out of the document flow, so the following child elements are out of the document flow, resulting in poor usability of the scheme; Advantages: Fast, and not prone to problems
Flex layout
CSS3 new layout, is to solve the above two layout of the deficiencies appear, more perfect.
Table layout
Said a lot of people don’t use the table layout, said he was more troublesome, operation more complicated, more SEO friendly, it is a kind of misunderstanding, to form the layout of the form layout is applicable in many scenarios, such as form layout is easily done here, and form layout has a good compatibility, flex cannot solve the problem, Also consider compatibility issues. IE8 does not support Flex on PCS. If you want to achieve the same effect, consider a table layout. Disadvantages: In addition to the disadvantages mentioned above, there is also the problem of the table-cell three columns side by side, one of the contents of the cell is too much, the other two cells will automatically support the height, sometimes is not necessary
Grid layout
Advantages: less code
2. Assuming that the condition that the height is known is removed, considering the vertical direction, there may be a side of the height spread relatively high, which of the five schemes just written can still be applied, which can not be used
Flex layout and table layout can still be used, the other three can not be used, respectively, why for floating layout, after the content is exceeded, there is no cover, so it will be placed at the bottom of the left, floating solution (BFC, this is to draw the knowledge of BFC).
3. How compatible are these five options? If you were writing the business layout right now, which one would you choose
4. Flexibility of page layout
Three column layout: left and right width fixed, middle adaptive up and down height fixed, middle adaptive (suitable for mobile terminal) in addition to floating the other four can be used two column layout left width fixed, right adaptive right width fixed, left adaptive height fixed, adaptive height fixed, on the adaptive
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Layout</title> <style> /* The entire page is initialized before the Layout, because each browser has an initial style for HTML tags */ HTML *{padding: 0; margin: 0; } /* Layout {margin-top: 20px; margin-top: 20px; } */ /* Set height */. Layout article div{min-height: 100px; } </style> </head> <body> <! Five methods: 1. Floating layout 2. Absolute positioning 3. Flexbox 4. Grid layout --> <! -- Each scheme is divided by a section tag --> <! The first method: float --> <! <section class=" Layout float"> <! <header> float solution </header> <style>.layout.float. Left {float: left; float: left; width: 300px; background: red; } .layout.float .right{ float: right; width: 300px; background: blue; }.layout.float. Center {/* Because it is a block element, it is automatically expanded in the horizontal direction according to its containing block */ background: yellow; } </style> <article class="left-right-center"> <! -- HTML5 standard recommendations, There should be a header element inside the article tag --> <header> Three sections of the floating solution </header> <div class="left"></div> <div class="right"></div> <div Class ="center"> <h1> Floating solution </h1> 1. </div> </article> </section> <! -- The second method: Absolute positioning --> <section class="layout absolute"> <header> Floating solution </header> <style>.layout.absolute. Left-center -right>div{/* */ position: absolute; } .layout.absolute .left{ left: 0; width: 300px; background: red; } .layout.absolute .center{ left: 300px; right: 300px; background: yellow; } .layout.absolute .right{ right: 0; width: 300px; background: blue; } </style> <article class="left-center-right"> <header> Absolutely position the solution in three areas </header> <div class="left"></div> <div Class ="center"> <h2> Absolute positioning solution </h2> 1. <div >< div class="right"></div> </article> </section> <! -- Third method: <section class="layout flexbox"> <header> Flexbox solution </header> <style> */.layout.flexbox{margin-top: 140px; } .layout.flexbox .left-center-right{ display: flex; } .layout.flexbox .left{ width: 300px; background: red; } .layout.flexbox .center{ flex: 1; background: yellow; } .layout.flexbox .right{ width: 300px; background: blue; } </style> <article class="left-center-right"> <! -- <header> Three areas of the Flexbox solution </header> --> <! <div class="left"></div> <div class="center"> <h2> Flexbox solution </h2> 1 <div >< div class="right"></div> </article> </section> <! <section class="layout table"> <style>.layout.table. Left-center right{width: 100%; display: table; height: 100px; } .layout.table .left-center-right>div{ display: table-cell; } .layout.table .left{ width: 300px; background: red; } .layout.table .center{ background: yellow; } .layout.table .right{ width: 300px; background: blue; } </style> <header> table layout solution </header> <article class="left-center right"> <! -- <header> Three areas of the table layout </header> --> <! <div class="left"></div> <div class="center"> <h2> Table layout </h2> 1 <div >< div class="right"></div> </article> </section> <! <section class="layout grid"> <style>.layout.grid. left-center-right{display: grid; width: 100%; /* row height 100px */ grid-template-rows: 100px; / / grid-template-columns: 300px auto 300px; / / grid-template-columns: 300px auto 300px; } .layout.grid .left{ background: red; } .layout.grid .center{ background: yellow; } .layout.grid .right{ background: blue; } </style> <header> Grid layout solution </header> <article class="left-center-right"> <! <div class="left"></div> <div class="center"> <h2> Grid layout </h2> 1 Class ="right"></div> </article> </section> </body> </ HTML >Copy the code