CSS常用布局

目录

1.品字布局

（1）满屏品字布局

​ （2）品字布局（每块都有固定宽高）

2.去掉inline-block间隔的方法

（1）移除标签空格

（2）使用margin负值

（3）font-size

（4）使用letter-spacing

（5）word-spacing

---

1.品字布局

（1）满屏品字布局

<div style="margin:0 auto;height:100px;background:rgb(29, 229, 48)"></div>
<div style="float:left;width:50%;height:100px;background:#e0f"></div>
<div style="float:left;width:50%;height:100px;background:#05f"></div>

效果：

 （2）品字布局（每块都有固定宽高）

实现方法的基本思路：

（1）三块高宽是确定的；

（2）上面那块用margin: 0 auto;居中；

（3）下面两块用float或者inline-block不换行；

（4）用margin调整位置使他们居中

2.去掉inline-block间隔的方法

参考：https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

（1）移除标签空格

  <div class="space">
    <a href="##">惆怅</a>
    <a href="##">淡定</a>
    <a href="##">热血</a>
  </div>
  <p></p>
  <div class="space">
    <a href="##">惆怅</a
    ><a href="##">淡定</a
    ><a href="##">热血</a>
  </div>

  .space a {
      display: inline-block;
      padding: .5em 1em;
      background-color: #cad5eb;
      color: #34538b;
      text-decoration: none;
  }

效果：

 

（2）使用margin负值

.space a {
    display: inline-block;
    margin-right: -3px;
}

（3）font-size

.space {
    font-size: 0;
    -webkit-text-size-adjust:none;
}

 

（4）使用letter-spacing

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

（5）word-spacing

.space {
    word-spacing: -6px;
}
.space a {
    word-spacing: 0;
}