(14) “can move the box of” more gracefully show: (3) the commonly used “layout” | CSS

Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code

❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this articleA More elegant display of “Movable Boxes” : ③ Common “Layouts”

How does responsive layout work?Copy the code

🙋 on the question “refer to the answer in detail”, please click here to view access!

Foreword: get a design draft, our first is to consider the whole page from the macro “layout”. With the continuous replacement of front-end technology, many old layout methods in the past are now slowly fading, which are the most basic and most commonly used layout methods?

This article gives the answer, belongs to the master.

1 What is layout

Existing styles don’t meet people’s needs:

• The document flow

• floating

• positioning

People need:

• Navigation bar + content

• Navigation bar + content + advertising bar

• Top to bottom, left to right, constant width, adaptive…

2.1 Single-column Layout

Current mode — fixed width + horizontal center.

<div id="header"  class="layout">The head</div>
<div id="content" class="layout">content</div>
<div id="footer" class="layout">The tail</div>
Copy the code

.layout {
  width: 960px;
  /* ❗️; /* width (); The advantage of using max-width is that it does not cause left and right scroll bars to appear as the user's screen becomes smaller. This is what happens when you use width instead. However, because of the complexity of web pages nowadays, there is a lot of information. If you use max-width, it will display the page according to the user's screen size, but it is difficult to get it to layout properly. Rather than that, we developers would prefer to use width, even if there is a scroll bar, but at least the content inside is not messy. * / 


  margin: 0 auto;
}
#header {
  height: 60px;
  background: red;
}
#content {
  height: 400px;
  background: blue;
}
#footer {
  height: 50px;
  background: yellow;
}
Copy the code

2.1.2 banner

🔗 source code and effect display HTML

<div id="header">
  <div class="layout">The head</div>
</div>
<div id="content" class="layout">content</div>
<div id="footer">
  <div class="layout">The tail</div>
</div>
Copy the code

CSS

.layout {
  width: 960px;
  margin: 0 auto;
}

body {
  min-width: 960px;
  /* ❗️❗️ port (x) /* ❗️❗ port (x) /* ❗️❗ port (x) /* ❗️❗ port (x) /* ❗️❗ port (x) * /

}

#header {
  height: 60px;
  background: red;
}
#content {
  height: 400px;
  background: blue;
}
#footer {
  height: 50px;
  background: yellow;
}
Copy the code

2.2.1 The sidebar is on the left

🔗 source code and effect display HTML

<div id="content">
  <div class="aside">aside</div>
  <div class="main">content</div>
</div>
<div id="footer">footer</div>
Copy the code

CSS

#content:after {
  content: "";
  display: block;
  clear: both;
}
.aside {
  float: left;
  width: 200px;
  height: 500px;
  background: yellow;
}
.main {
  height: 400px;
  margin-left: 210px;
  background: red;
}
#footer {
  background: #ccc;
}
Copy the code

<div id="content">
  <div class="aside">aside</div>
  <div class="main">content</div>
</div>
<div id="footer">footer</div>
Copy the code

#content:after {
  content: "";
  display: block;
  clear: both;
}
.aside {
  float: right;  
  width: 200px;
  height: 500px;
  background: yellow;
}    
.main {  
  height: 400px;  
  margin-right: 210px;        
  background: red;    
}    
#footer {      
  background: #ccc;    
}
Copy the code

2.3 Three-column layout

The two columns on both sides have a fixed width and the middle column has an adaptive width.

❗️ note the order!

🔗 source code and effect display HTML

<div id="content">

  <! -- Notice why main is not in front -->

  <div class="menu">aside</div>
  <div class="aside">aside</div>
  <div class="main">content</div>
</div>
<div id="footer">footer</div>
Copy the code

CSS

#content:after {
  content: "";
  display: block;
  clear: both;
}
.menu {
  float: left;
  width: 100px;
  height: 500px;
  background: pink;
}
.aside {
  float: right;
  width: 200px;
  height: 500px;
  background: yellow;
}
.main {
  height: 400px;
  margin-left: 110px; 
  Margin-left */

  margin-right: 210px;
  background: red;
}

#footer {
  background: #ccc;
}
Copy the code

<div class="ct">
  <ul>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
  </ul>
</div>
Copy the code

ul.li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct {
  overflow:hidden;
  width: 640px;
  margin: 0 auto;
  border: 1px dashed orange;
}

.ct .item {
  float:left;
  width:200px;
  height:200px;
  margin-left: 20px;
  margin-top: 20px;
  background: red;
}
.ct>ul {
  margin-left: -20px;  
}
Copy the code