The essence of CSS: Have you lost all of these layouts?

preface

Recently, when I was busy taking a break, I found that the layout in my mind was very messy and mixed, so I spent some time to sort out some commonly used layouts and their implementation methods. Here, I share them with you.

Single row layout

The single column layout is the most common type of layout. It usually has an element as a container, with a fixed width and horizontal center alignment.

A single column layout generally takes two forms:

(Photo credit: blog.csdn.net/Ace_Arm/art…)

A single column layout

A column layout header, content, bottom width consistent

rendering

Code implementation

html

<header></header>
<main></main>
<footer></footer>
Copy the code

css

header,footer{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}
Copy the code

One column layout (full column)

A column layout (a column) has the same width at the top and bottom and takes up the entire page, with a smaller content area in the middle that does not take up the entire screen.

rendering

Code implementation

html

<header></header>
<main></main>
<footer></footer>
Copy the code

css

header,footer{
    width: 100%;
    height: 100px;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}
Copy the code

Single column layout is the most basic and simple one, the implementation method is not limited to the above two, we can freely play, find more methods to achieve.

2 column layout

The two-column layout is also used very frequently, with the main effect being to split the page into two columns of unequal width. Typically, a column with a smaller width is set to a fixed width for a sidebar or something, while another column is filled with remaining width for the content area.

It is widely used in background management system and API documents.

rendering

Take a look at the results first:

Code implementation

There are many ways to implement a two-column layout, but here are two of them.

Calc function

The calc() function is used to dynamically calculate the length value. The content area uses the calc() function to calculate the remaining width and set the width, plus a margin-left value that is the width of the sidebar.

The code is as follows:

html

<div class="slider"></div>
<div class="main"></div>
Copy the code

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
.slider,.main{
    height: 100%;
}
.slider{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    background: black;
}
.main{
    width: calc(100% - 100px);
    background: red;
    margin-left: 100px;
}
Copy the code

Flex properties

The idea is simple with flex properties. Set the parent element to Flex, the sidebar width to be fixed, and the content area to Flex :1 to fill the rest of the area.

The code is as follows:

html

<div class="slider"></div>
<div class="main"></div>
Copy the code

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}
.slider,.main{
    height: 100%;
}
.slider{
    width: 100px;
    background: black;
}
.main{
    flex: 1;   
    background: red;
}
Copy the code

3 column layout

The three-column layout is also used frequently in daily development and is arranged in left-center order, with the middle column usually the widest, followed by the left and right columns. Fixed width on the left and right sides, adaptive in the middle, can respond according to the screen size.

rendering

Let’s take a look at the renderings first

Code implementation

There are many ways to implement a three-column layout. Here are two of them (twin wings, Holy Grail, flex)

Margin: 0 margin: 0 margin: 0 margin: 0 margin: 0 margin: 0 margin

When margin is set to a negative value, the element will move to the left

Twin wing layout

The code is as follows:

html

<div class="main"> <div class="middle"> <div class="content"> Middle </div> <div class="left"> left </div> <div Class ="right"> </div> </div>Copy the code

css

* {
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100%;
    height: 100%;
}
div{
    height: 100%;
}
.main>div {
    float: left;
}

.left {
    width: 200px;
    background: red;
    margin-left: -100%;
}

.right {
    width: 200px;
    background: blue;
    margin-left: -200px;
}

.middle {
    width: 100%;
    background: yellow;

}

.content {
    margin-left: 200px;
    margin-right: 200px;
}
Copy the code

The holy grail layout

The code is: HTML

<div class="main"> <div class="center"> Middle middle middle middle middle middle middle back </div> <div class="left"> left </div> <div class="right"> right </div> </div>Copy the code

css

* {
    margin: 0;
    padding: 0;
}

.main {
    height: 200px;
    padding: 0 150px 0 200px;
    background: greenyellow;
    *zoom: 1;
}

.left,
.center,
.right {
    float: left;
}

.center {
    width: 100%;
    height: 200px;
    background: red;
}

.left {
    width: 200px;
    height: 200px;
    background: yellow;
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.right {
    width: 150px;
    height: 200px;
    background: gainsboro;
    margin-left: -150px;
    position: relative;
    left: 150px;
}
Copy the code

In fact, the essence of the two-wing layout is the same as the Grail layout. Both elements are arranged by setting a negative margin. The difference is the HTML structure. To eliminate coverage of both sides. Therefore, the principle of these two layouts is basically the same, the key is to set negative margin skills, and element float relative positioning skills to achieve.

Flex layout

The code is: HTML

< div class = "main" > < div id = "left" > the left fixed width < / div > < div id = "main" > middle adaptive < / div > < div id = "right" > on the right side of the fixed width < / div > < / div >Copy the code

css

* {
    padding: 0px;
    margin: 0px;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}

#left,
#right {
    width: 100px;
    background-color: #0FC;
}
#main {
    flex: 1;
    background-color: #999;
}
Copy the code

Using flex layout is the easiest way to do this without worrying about browser compatibility.

Vertical layout (Sticky Footer)

This layout divides the page into three sections: top, middle and bottom, each with a fixed height, and the middle section with variable height. When the page height is smaller than the browser height, the lower part should be fixed at the bottom of the screen. When the height of the page exceeds the height of the browser, the bottom section should be spread out along with the middle section and displayed at the bottom of the page.

This layout is also called sticky footer, which means the bottom part sticks to the bottom of the screen.

Code implementation

Let’s start by building simple HTML code

The < body > < div class = "content" > < / div > < div class = "footer" > < / div > < / body >Copy the code

Content is our content area. Let’s start with the solution.

Add the minimum height for the content area

Viewpoint height (VIEWPOINT height) is used to calculate the height of the whole window (1vH = 1% of the window height), and then subtract the height of the bottom footer to get the minimum height of the content area. For example, we can add the following style:

.content{min-height:calc(100vh-footer height); box-sizing:border-box; }Copy the code

This problem is solved, but what if the footer height of the page is different? Recalculating every page is cumbersome, so this method is simple but not recommended.

Using Flex layout

The method is to split the window height using flex layout. The flex of the footer is set to 0 so that the footer gets its inherent height; The Flex for content is set to 1 so that it fills up with everything except the footer.

The code is as follows:

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
 }
 .content {
    flex: 1; 
}
.footer{
    flex: 0;      
}
Copy the code

This layout is easy to use and recommended.

You can add a wrapper around the content

It is easy to add a wrapper around the content and change the HTML code to something like this:

<body> <div class="wrapper"> <div class="content"></div> <div class="footer"></div> </body>Copy the code

Then add the following styles:

html, body, .wrapper { height: 100%; } body > .wrapper { height: auto; min-height: 100%; } .content { padding-bottom: 150px; /* Must use the same height as footer */}. Footer {position: relative; margin-top: -150px; /* Footer */ height: 150px; clear:both; }Copy the code

Also, to ensure compatibility, you need to add the ClearFix class to the Wrapper. The code is as follows:

<body> <div class="content"></div> </div> <div class="footer"></div> </body>Copy the code

.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}    
Copy the code

Ok, ok, done, this method is also recommended, but it adds a lot of code, also changes the HTML document structure.

Sticky layout

What is a sticky layout? Let’s start with a demo

That’s right, keeping the element (in this case the title) above the page view as the page scrolls, which is what we often see as an adsorption effect.

The title line sets the background color. If the background color is not set (background transparency), text from the normal document flow will be displayed superimposed on the header line text.

Sticky positioned elements will block the scrolling “normal” document flow; The sticky elements in the back will cover the sticky elements in the front like layers of Sticky notes.

Code implementation

Sticky layout is achieved mainly by the sticky property of position.

position: sticky;
Copy the code

Let’s start with compatibility:

It Can be seen from Can I use that the compatibility of sticky is not very good, so everyone should consider carefully when using it. If compatibility is not required, it is still quite comfortable to use it.

A simple example is given below.

html:

</header> <div class="content"> </div> </header> </div> </header> <div class="content"> </div> </main>Copy the code

Js (don’t want to write too many p tags, so use JS generation, lazy):

let num = 20
let html = ''
for (var i = 0; i < num; i++) {
    html += `<p>${i + 1}</p>`
}
Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(item=>{
    item.innerHTML = html
})
Copy the code

css:

main {
    width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}
header {
    position: sticky;
    top: 0;
    height: 30px;
    background-color: blanchedalmond;
}
Copy the code

I am Monkeysoft, your “three lines” is the biggest power of monkeysoft creation, if this article has any mistakes and suggestions, welcome to leave a comment!