页面布局套路

一、浮动布局
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;
}

页面布局套路_第1张图片
image.png

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

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


页面布局套路_第2张图片
image.png

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


页面布局套路_第3张图片
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;
}

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


页面布局套路_第4张图片
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;
}
页面布局套路_第5张图片
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;
}
页面布局套路_第6张图片
image.png

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

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


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

你可能感兴趣的:(页面布局套路)