CSS常用布局套路

前言

在使用过 CSS 一段时间后，虽然对每个属性都熟练，但是在布局的时候难免会有些奇怪的 bug ，那么怎么避免这些奇怪的 bug 呢？ 本文介绍了一些 常见的布局套路，记住一些要点，可以使其少出现 bug。

布局流程

• 是否兼容IE？
• 是！
• 那就用 float 布局
• 不是！
• 那就使用 flex布局

原则

• 不到万不得已不要写死 width 和 height
• 尽量使用高级语法，如： calc flex grid
• 如果兼容IE， 就全部写死

浮动布局（Float）

1. 给子级加 float: left
2. 给父级加 clearfix

小栗子

• HTML 部分

<div class="parent clearfix">
  <div class="chlid fl">
    <div class="content-left">
      内容1
    </div>
  </div>
  <div class="child fl">
    <div class="content-right">
      内容2
    </div>
  </div>  
</div>

• CSS部分

.fl {
  float: left;
}

.clearfix::after {
  content: '';
  clear: both;
  display: block;
}
.clearfix {
  zoom: 1;
} /* IE6 */

.child:nth-child(1) {
  width: 30%;
}

.child:nth-child(2) {
  width: 70%;
}

.content-left {
  margin-right: 10px;
}

1. 给父元素 clearfix
2. 给子元素 float 不要给它加其他属性（margin），目的是为了使它们之间不会互相影响
3. 然后子元素里面有 content ,给 content 加属性(margin、padding)，目的在各自浮动元素的空间里自己玩不会影响到上一级的浮动元素

平均布局

使用 float

兼容 IE
👉🏻 链接

平均布局居中

1. 先给最外面的第一层盒子 margin: 0 auto
2. 再给第二层盒子 margin-left: -??px``margin-right: -??px 以及 clearfix(清除浮动) 让他撑开盒子
3. 最后里面的盒子 float: left

使用 calc

以下结构，使用 flex 布局,就可以很快实现 平均布局

  <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>

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

但是它有一个bug, 当少了一个 div 就会很奇怪
那该如何解决这个 bug 呢？

  <div class="pictures">
    <div class="out-picture">
      <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>

.pictures {
  width: 800px;
  margin: 0 auto;
}

.out-picture {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;
}

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

calc(25% - 8px) 的意思是 父级元素宽度的25% 减去 8px (留出一个 8px 的空间)

还可以用新属性 gap 实现以上布局，这样就不需要 calc 和 margin

gap 是 row-gap 和 column-gap 的缩写

gap目前的兼容性

注意：

1. 不要给名字命名为 ad ,会被当作广告屏蔽，可以叫 art
2. 布局用的 div (要居中布局)，不要给它身上加其他属性，每个 div 一个作用比较好，不要动布局(不要给它加其他的属性它只是负责布局的)，只给布局里面的 div 给 padding margin

移动端布局

1.meta viewport

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

2.media

对于每个 section 板块,需要把宽度弄掉
例子：

@media (max-width: 420px) {
  .picture {
    width: calc(50% - 8px)
  }
}

如果怕图片变形， 那就不要用 img 标签,可以用背景图

background: transparent
url(xx/xx/xx.jpg) no-repeat center;
background-size: cover; /*尽量全的显示图片*/