页面布局套路

一、浮动布局
1.给儿子加上float:left
2.给父元素加clearfix
时刻记住这一点！！

二、flex布局
1.给爸爸加上display：flex
2.在爸爸上使用justify-content:cneter;

float 实现平均布局，要

 .pictures{
     width:800px;
     margin:10px auto;
      background:#aaa;
  }
.picture{
  width:194px;
  height:194px;
  background:red;
  float:left;
  margin:4px;
}

.picture:nth-child(4n+1){
  margin-left:0;
}

.picture:nth-child(4n){
  margin-right:0;
}

image.png

每个picture给4px的margin，排不下，第一个的左边和第四个的右边margin要消除掉，善于用css的伪类nth-child(4n)和nth-child(4n+1)

第二种方法 margin负值法，在picture的外面再包一层，然后将他的margin扩展出去，让里面的div和之前的大div对齐

image.png

然后再去掉包裹的div的颜色，就可以实现和之前一样的效果了

image.png

  .pictures{
     width:800px;
     margin:10px auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    
  }

.picture{
  width:194px;
  height:194px;
  background:red;
  margin:4px 0;
 
}

学会使用calc计算属性//宽度就是1/4再减去8px了,在能不定死宽度的情况下尽量不要定死宽度

.picture{
  width:calc(25% - 8px); 
  height:194px;
  background:red;
  margin:4px 0;
}

在布局已经完成情况下，如何修改边距

image.png

.art{

  width:800px; 
  margin:0 auto;
}

.side{
  border:1px solid;
  width:33.3333% ;
  float:left;
    background:blue;
     height:300px;
}


.main{
  border:1px solid;
  height:300px;
  width:66.666666%;
  float:left;
    background:blue;
}

1.使用计算属性，

.side{
  border:1px solid;
  width:calc(33.3333% - 20px);
  margin-right:20px;
  float:left;
  background:blue;
  height:300px;
}

image.png

2.在第一個div中加一個子div，由內部撑开

.side{
  border:1px solid;
  width:33.333%;
  float:left;
  background:blue;
}

.side-child{
  height:300px;
  background:green;
  margin-right:20px;
}

image.png

记住，每个div只有一个作用，要么只做布局，要么再添加别的东西，千万千万不要在布局的div上再添加其他的东西，卧槽，这不是我一直以来的做法吗。。怪不得每次页面都写不好！草！

记住，常规做法都是由内部高度撑开外部高度

移动端布局第一步：加meta标签