CSS常用布局

水深无声 2022-02-21 01:15 294阅读 0赞

**目录**

1.品字布局

（1）满屏品字布局

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

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

（1）移除标签空格

（2）使用margin负值

（3）font-size

（4）使用letter-spacing

（5）word-spacing

--------------------

## 1.品字布局 ##

### （1）满屏品字布局 ###

效果：

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70][] （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/][https_www.zhangxinxu.com_wordpress_2012_04_inline-block-space-remove-_E5_8E_BB_E9_99_A4_E9_97_B4_E8_B7_9D]

### （1）移除标签空格 ###

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

效果：

![20190410104733668.png][]

### （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;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70]: /images/20220221/fcb5e653db7643429d0c01d785168b40.png
[https_www.zhangxinxu.com_wordpress_2012_04_inline-block-space-remove-_E5_8E_BB_E9_99_A4_E9_97_B4_E8_B7_9D]: https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
[20190410104733668.png]: /images/20220221/1607cf422e9c432f929044873663af4a.png