布局套路

概述

float布局

不要在布局的div（child）上操作，要操作在布局的div下的div上操作（content）

float做平均布局

  
  


  

    
logo
    

      

        

          导航1
        
        

          导航2
        
        

          导航3
        
        

          导航4
        
        

          导航5
        
      
    
  
  

  

    

      

      

      

      

      

      

      

      

    
  

.clearfix::after {
  content:'';
  display: block;
  clear: both;
}
.parent {
  margin: 0 auto;
  background: #ddd;
  min-width: 600px;
}
.child:nth-child(1) {
  width: 100px;
  text-align: center;
  background-color: #333;
  color: white;
  height: 36px;
  line-height: 36px;
}
.child:nth-child(2) {
}
.nav {
  line-height: 24px;
  padding: 6px 0;
}
.navItem {
  margin-left: 20px;
}
.banner {
  width: 800px;
  height: 300px;
  background: #888;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.pictures {
  width: 800px;
  margin: 0 auto;
  background: black;
}
.picture {
  width: 194px;
  height: 194px;
  background: #ddd;
  margin: 4px;
  float: left;
}
.pictures > .xxx {
  background: rgba(255, 0, 0, 0.8);
  margin-left: -4px;
  margin-right: -4px;
}

使用calc布局

1. float法

  
  


  

    
logo
    

      

        

          导航1
        
        

          导航2
        
        

          导航3
        
        

          导航4
        
        

          导航5
        
      
    
  
  

  

    

      

      

      

      

      

      

      

    
  
  

    

      
广告1
    
    

      
广告2
    
  

* {
  box-sizing: border-box;
}
.clearfix::after {
  content:'';
  display: block;
  clear: both;
}
.parent {
  margin: 0 auto;
  background: #ddd;
  min-width: 600px;
}
.child:nth-child(1) {
  width: 100px;
  text-align: center;
  background-color: #333;
  color: white;
  height: 36px;
  line-height: 36px;
}
.child:nth-child(2) {
}
.nav {
  line-height: 24px;
  padding: 6px 0;
}
.navItem {
  margin-left: 20px;
}
.banner {
  width: 800px;
  height: 300px;
  background: #888;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.pictures {
  width: 800px;
  margin: 0 auto;
}
.pictures > .xxx {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;
}
.picture {
  width: calc(25% - 8px);/*➖号两边的空格别忘了*/
  height: 194px;
  background: #ddd;
  margin: 4px;
  border: 1px solid red;
}
.art {
  background: #ddd;
  width: 800px;
  margin: 0 auto;
}
.art > .sider {
  height: 300px;
  float: left;
  border: 1px solid black;
  width: 33.333333%
}
.art > .main {
  height: 300px;
  float: left;
  border: 1px solid black;
  width: 66.666666%
}
.sider-child {
  margin-right: 20px;
  border: 1px solid red;
  height: 300px;
}

用于布局的div不要去动它，任何操作在它的子div上进行操作

2. flex法

  
  


  

    
logo
    

      

        

          导航1
        
        

          导航2
        
        

          导航3
        
        

          导航4
        
        

          导航5
        
      
    
  
  

  

    

      

      

      

      

      

      

      

    
  
  

    

      广告1
    
    

      广告2
    
  

* {
  box-sizing: border-box;
}
.clearfix::after {
  content:'';
  display: block;
  clear: both;
}
.parent {
  margin: 0 auto;
  background: #ddd;
  min-width: 600px;
}
.child:nth-child(1) {
  width: 100px;
  text-align: center;
  background-color: #333;
  color: white;
  height: 36px;
  line-height: 36px;
}
.child:nth-child(2) {
}
.nav {
  line-height: 24px;
  padding: 6px 0;
}
.navItem {
  margin-left: 20px;
}
.banner {
  width: 800px;
  height: 300px;
  background: #888;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.pictures {
  width: 800px;
  margin: 0 auto;
}
.pictures > .xxx {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;
}
.picture {
  width: calc(25% - 8px);/*➖号两边的空格别忘了*/
  height: 194px;
  background: #ddd;
  margin: 4px;
  border: 1px solid red;
}
.art {
  background: #ddd;
  width: 800px;
  margin: 0 auto;
  margin-bottom: 100px;
  display: flex;
  justify-content: space-between;
}
.art > .sider {
  height: 300px;
  border: 1px solid black;
  width: calc(33.333333% - 20px);
}
.art > .main {
  height: 300px;
  border: 1px solid black;
  width: 66.666666%
}

手机布局

  
  


  

    
logo
    

      

        

          导航1
        
        

          导航2
        
        

          导航3
        
        

          导航4
        
        

          导航5
        
      
    
  
  

  

    

      

      

      

      

      

      

      

      

    
  

.clearfix::after {
  content:'';
  display: block;
  clear: both;
}
.parent {
  margin: 0 auto;
  background: #ddd;
  min-width: 600px;
}
.child:nth-child(1) {
  width: 100px;
  text-align: center;
  background-color: #333;
  color: white;
  height: 36px;
  line-height: 36px;
}
.child:nth-child(2) {
}
.nav {
  line-height: 24px;
  padding: 6px 0;
}
.navItem {
  margin-left: 20px;
}
.banner {
  width: 800px;
  height: 300px;
  background: #888;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.pictures {
  width: 800px;
  margin: 0 auto;
  background: black;
}
.picture {
  width: 194px;
  height: 194px;
  background: #ddd;
  margin: 4px;
  float: left;
}
.pictures > .xxx {
  background: rgba(255, 0, 0, 0.8);
  margin-left: -4px;
  margin-right: -4px;
}