CSS layout - a part of CC that cannot be ignored

This article was reproduced from the public number: The Joker's Cabin

preface

CSS layout is a front-end must-have skill, and if HTML is structural beauty, CSS is the visual beauty that gives users a different experience of the effect and visual impact. I f a generous and beautiful layout, the user will be very comfortable at first sight, not only improve the user's visual effects but also improve the user's experience. With the increase in the variety of devices now, different sizes, strange-shaped devices make the pressure of front-end development continue to increase, more and more UI frameworks emerge, we will ignore the most basic CSS, the following summarizes some of the frequently used CSS layout, learning and progress together.

A single-column layout

Single-column layouts are the most common and commonly used layout methods, generally set a maximum or minimum width and center can be achieved.

<div id="app"></div>

#app{
    border:1px solid red;
    margin:0 auto;
    height: 500px;
    width: 100%;
    max-width: 960px;
    min-width: 500px;
    box-sizing: border-box;
}

Two-column layout

The two-column layout divides the page into two parts with different left and right widths, usually fixed left width, and the right width full of the remaining width, often used for api网站 and 后台管理系统 This layout when the screen shrinks, or when the width is not wide enough, the full part on the right becomes a single-column layout, and the left part changes to a vertical display or hiding.

<div id="app">
    <div id="main">main</div>
    <div id="side">side</div>
</div>

#main{
    background:orange;
    flex:1;
}
#side{
    width:200px;
    background:greenyellow;
}
#main,#side{
    height: 200px;
}
#app{
    display: flex;
    flex-direction:row-reverse;
    flex-wrap: wrap;
}
@media only screen and (max-width:1000px){
    #app{
        flex-direction: row;
    }
    #main{
        flex:100%;
    }
}

Three-column layout

A three-column layout is a three-part, left-center-right horizontal direction that divides a page into three parts, such as github It is also possible to nest a two-column layout consisting of a full section on the right side of the two-column layout in a horizontal direction.

• Grail layout

<div id="app">
    <div id="main">main</div>
    <div id="side">side1</div>
    <div id="foot">side2</div>
</div>

*{
    margin:0px;
    padding:0px;
}
#app{
    padding:0px 200px 0px 300px;
}
#app::after{
    content: "";
    display: block;
    clear: both;
}
#main,#side,#foot{
    float: left;
}
#main{
    background:orange;
    width:100%;
}
#side{
    background:greenyellow;
    width: 300px;
    position: relative;
    margin-left:-100%;
    left: -300px;
}
#foot{
    background:palevioletred;
    width: 200px;
    position: relative;
    margin-left:-200px;
    right:-200px;


}
@media only screen and (max-width:1000px){
    #app{
        padding:0px;
    }
   #side{
      margin-left:0px;
      left:0px;
   }
   #foot{
    margin-left:0px;
    right:0px;
 }
}

• Dual wing layout

<div id="app">
    <main>
        <div id="container">main</div>
    </main>
    <header>header</header>
    <footer>footer</footer>
</div>

*{
    margin:0px;
    padding:0px;
}
#app::after{
    content: "";
    display: block;
    clear: both;
}
main,header,footer{
    float: left;
}
main{
    background:orange;
    width: 100%;
}
header{
    background:greenyellow;
    width: 300px;
    margin-left: -100%;
}
footer{
    background:palevioletred;
    width: 200px;
    margin-left: -200px;
}
#container{
    margin: 0px 200px 0px 300px;
}
@media only screen and (max-width:1000px){
   header{
      margin-left:0px;
   }
   footer{
    margin-left:0px;
 }
}

• The difference between the Grail and the wings is shown below

There is also a layout in the vertical direction is divided into the upper and lower three parts, the upper and lower parts of the fixed height, the middle part of the height is uncertain, when the page height is less than the browser height, the lower part should be fixed at the bottom of the browser, but when the height of the page exceeds the height of the browser, the lower part should be opened with the middle part, displayed at the bottom of the page, that sticky footer

• The traditional layout method

Place header and main in a container so that the height of the container fills the entire screen, and a certain height is reserved below to set the margin for footer to insert into the bottom of the container for functionality.

<div id="app">
    <header></header>
    <main>
        <div id="container"></div>
    </main>
</div>
<footer></footer>

*{
    margin:0px;
    padding:0px;
}
#app{
    box-sizing: border-box;
    min-height: 100vh;
    padding-bottom: 100px;
}


header,footer{
    height: 100px;
    background: burlywood;
}
main{
    background: cadetblue;
}
footer{
    margin-top:-100px ;
}

• Flex layout

The parent app uses the flex layout height to fill the container, leaving the child containers arranged vertically, and header and footer to set a fixed height for main to fill the remaining containers

<div id="app">
    <header></header>
    <main>
        <div id="container"></div>
    </main>
    <footer></footer>
</div>

*{
    margin:0px;
    padding:0px;
}
#app{
    display: flex;
    flex-direction: column;
    height: 100%;
}


header,footer{
    background: burlywood;
    height: 100px;
}
main{
    background: cadetblue;
    flex: 1;
}

The interview here asks what the principle of flex:1 is? flex-grow flex-shrink flex-basis

flex-grow:1; //放大比例
flex-shrink:1;  //  缩小比例
flex-basis；0%;  // 分配剩余空间

• Grid layout

The grid layout is a sentence that sets the first and last lines high to a fixed value, with the middle section determined by the browser itself

<div id="app">
    <header></header>
    <main>
        <div id="container"></div>
    </main>
    <footer></footer>
</div>

*{
    margin:0px;
    padding:0px;
}
#app{
    display: grid;
    height: 100%;
    grid-template-rows:100px auto 100px;
}


header,footer{
    background: burlywood;
}
main{
    background: cadetblue;
}

summary

Classics are always classics, the framework more choices and more, the foundation is always what we need to master, so-called 万变不离其中 with these basic knowledge we only need flexible use

• 1. First of all, we need to lay out the large frame to write out, that is, the main level of the page container, the general main container placed on top of the sub-container.
• 2. Arrange the layout containers horizontally.
• 3. Set the width of the container.
• 4. Eliminate the side effects of layout, such as high collapse caused by floating.
• 5. In order to adapt to different models, through media inquiries for optimization.

The above is W3Cschool编程狮 about the CSS layout - CC can not be ignored part of the relevant introduction, I hope to help you.