This is the fourth day of my participation in the August More text Challenge. For details, see:August is more challenging

Layout principles

  1. Try not to write to deathwidthandheight
  2. Try to use some advanced syntax, such ascalc,nth-child,flex(of course, still have to consider the compatibility)

Float layout versus Flex layout

Float layout

  1. On the child elementfloat: left(right)
  2. To the parent element (container).clearfix
 .clearfix::after{
     content: ' ';
     display: block; / * or table * /
     clear: both;
 }
 .clearfix{
     zoom: 1; /* IE compatible */
 }
Copy the code

Clear the floating example navigation bar example

Flex layout

See ruan yifeng’s Flex Layout Tutorial: Syntax

Sample layout

Take a PC and mobile layout as an example

PC:

1. Average layout with float

When doing an average layout, you often run into a situation where you don’t have enough width, as shown below

In the figure above, the sum of the element widths exceeds the width of the container, so the last element moves to the next line

In view of this problem, there are several solutions for your reference

Method 1: Use nth-child

Use nth-child to set margin-left of odd and margin-right of even elements to 0 respectively

<div class="pictures clearfix">
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
</div>
Copy the code
.pictures {
  width: 800px;
  background: green;
  margin: 0 auto;
}
.picture {
  width: 194px;
  height: 194px;
  background: #ddd;
  margin: 4px;
  float: left;
}
.picture:nth-child(4n+1) { / * 1 and 5 * /
  margin-left: 0;
}
.picture:nth-child(4n) { / * 4 and 8 * /
  margin-right: 0;
}
Copy the code

See the effect: js.jirengu.com/vazaqivoja/…

If you want to be compatible with browsers such as Internet Explorer that do not support nth-child syntax, you can use the “negative margin” method.

Method 2: negative margin

This method adds a wrapper between parent and child and sets a negative margin on the wrapper

<div class="pictures">
   <div class="picture-wrapper clearfix">
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
   </div>
</div>
Copy the code
.pictures {
  width: 800px;
  background: green;
  margin: 0 auto;
}
.picture {
  width: 194px;
  height: 194px;
  background: #ddd;
  margin: 4px;
  float: left;
}
.pictures > .picture-wrapper{
  margin:0 -4px;
}
Copy the code

See the effect: js.jirengu.com/mogenujaci/…

2. Use Flex to achieve even layout

Method 1: Use flex’s space-between property

<div class="pictures">
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
</div>
Copy the code
.pictures {
  width: 800px;
  background: green;
  margin: 0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.picture {
  width: 194px;
  height: 194px;
  background: #ddd;
  margin:4px 0;
}
Copy the code

See the effect: js.jirengu.com/yohebomuqo/…

However, only using space-between can have drawbacks (the above methods do not have this problem). In the following picture, we delete a picture and find that the second row is not arranged in the order we expect, leaving a space at the end.

To solve this problem, use Flex + negative margin

Flex + negative margin

<div class="pictures">
   <div class="picture-wrapper">
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
   </div>
</div>
Copy the code
.pictures {
  width: 800px;
  background: green;
  margin: 0 auto;
}
.picture {
  width: 194px;
  height: 194px;
  background: #ddd;
  margin: 4px;
}
.pictures > .picture-wrapper{
  display:flex;
  flex-wrap:wrap;
  margin: 0 -4px;
}
Copy the code

See the effect: js.jirengu.com/sedabamohe/…

This method is similar to “negative margin” in the float layout above, except that a.clearfix can be omitted from the picture-wrapper

Minor optimization: Use the calc attribute

.pictures {
  width: 800px; /* After using the calc attribute, remove this width and try scaling the page */
  background: green;
  margin: 0 auto;
}
.picture {
  width: calc(25% - 8px);/* 808x25% - 8px */
  height: 194px;
  background: #ddd;
  margin: 4px;
}
Copy the code

See the effect: js.jirengu.com/gimaverune/…

The advantage of using the calc attribute here is that if the element is of variable width/height, the page can scale at the same ratio.

3. Left and right layout with space in the middle

<div class="art clearfix">
   <div class="sider">AD 1</div>
   <div class="main">AD 2</div>
</div>
Copy the code
.art{
  background: #ddd;
  width: 800px;
  margin: 0 auto;
}
.art > .sider{
  float: left;
  width: 33.333333%;
  border: 1px solid;
  height: 100px;
}
.art > .main{
  float: left;
  width: 66.666666%;
  border: 1px solid;
  height: 100px;
}
Copy the code

What if we want to create a gap between the bottom two ads?

Use float to do that

Method one: Add div inside
<div class="art clearfix">
   <div class="sider">
     <div class="sider-child">AD 1</div>
   </div>
   <div class="main">
     <div class="main-child">AD 1</div>
   </div>
</div>
Copy the code
.art{
  background: #ddd;
  width: 800px;
  margin: 0 auto;
}
.art > .sider{
  float: left;
  width: 33.333333%;
}
.art > .main{
  float: left;
  width: 66.666666%;
  border: 1px solid;
  height: 100px;
}
.sider-child{
  margin-right: 20px;
  border: 1px solid;
  height: 100px;
}
Copy the code

See the effect: js.jirengu.com/cayiziribu/…

Method two: Use the calc attribute
<div class="art clearfix">
   <div class="sider">AD 1</div>
   <div class="main">AD 2</div>
</div>
Copy the code
.art{
  background: #ddd;
  width: 800px;
  margin: 0 auto;
  display: flex;
}
.art > .sider{
  float: left;
  width: calc(33.333333% - 20px);
  margin-right: 20px;
  height: 100px;
  border: 1px solid;
}
.art > .main{
  float: left;
  width: 66.666666%;
  border: 1px solid;
  height: 100px;
}
Copy the code

See the effect: js.jirengu.com/tacanacohu/…

Use Flex to do this

Method 1: margin-right:auto

In this case, remove the.clearfix class from the.art in HTML and add the.art in method 2 above to display: flex; And remove float: left; Art >.sider: margin-right: 20px; Instead of margin – right: auto; Can see effect: js.jirengu.com/canemojiju/…

Method 2: space-between

Margin-right: auto; margin-right: auto; “), and then add justify-content: space-between; Can see effect: js.jirengu.com/dusuputata/…

Mobile client:

  1. First, add a meta: VP
  2. Use media queries for responsive navigation

Min-width: 600px;

.parent .menu{
  display: none;
}
@media (max-width: 420px) {.parent .menu{
    display: block;
  }
  .parent .nav{
    display: none; }}Copy the code
  1. Adaptive banners

Fixed width on PC, adaptive mobile terminal

.banner {
  width: 800px;
  height: 300px;
  background: # 888;
  margin: 0 auto;
  margin-top: 10px;
}
@media (max-width: 420px) {.banner{ width: auto; }}Copy the code
  1. Adaptive Pictures
.pictures {
  width: 800px;
  background: green;
  margin: 0 auto;
}
@media (max-width: 420px) {.pictures{ width: auto; }}Copy the code
  1. From four images per row on PC to two images per row on mobile
.picture {
  width: calc(25% - 8px);
  height: 194px;
  background: #ddd;
  margin: 4px;
}
@media (max-width: 420px) {.picture { 
    width: calc(50% - 8px); }}Copy the code
  1. The bottom AD changes to a top down structure
.art{
  background: #ddd;
  width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 420px) {.art { 
    width: auto; 
    flex-direction: column; }}.art > .sider{
  width: calc(33.333333% - 20px);
  height: 100px;
  border: 1px solid;
}
@media (max-width: 420px) {.art > .sider { 
    width: auto; 
    height: auto; }}.art > .main{
  width: 66.666666%;
  border: 1px solid;
  height: 100px;
}
@media (max-width: 420px) {.art > .main { 
    width: auto; 
    height: auto; }}Copy the code

To solve the bug:

  1. – Fixed a bug with left/right scrolling on mobile (caused by negative margin)

Solution: add overflow: hidden;

.pictures {
  width: 800px;
  background: green;
  margin: 0 auto;
  overflow: hidden; /* Fix the bug */
}
Copy the code
  1. The problem with the banner is that when you zoom out to mobile, the width becomesauto, but the height remains the same, which will cause the image to deform

Solution: Instead of using the IMG tag, use the BACKGROUND: URL of CSS to set the background image

.banner {
  width: 800px;
  height: 300px;
  background: # 888;
  margin: 0 auto;
  margin-top: 10px;
  background: transparent url(https://ftp.bmp.ovh/imgs/2019/12/fea07c39f3654cff.jpg) no-repeat center;
  background-size: cover; /* Keep the image scale as high as possible */
}
Copy the code

Also, if you want to zoom out and keep the image at a fixed scale, search for a fixed scale div

The layout of the final (PC + mobile side) : js.jirengu.com/panukozaxu/… Join the reactive navigation: js.jirengu.com/giquheqogu/…