我敢打赌，你还不知道 display 还有这些骚操作！

这些，其默认宽度会将父容器占满，高度会依据内容自动进行撑开，并且能够随心所欲地设置宽高以及内外边距，无论怎样去折腾都没问题。

div {
  width: 300px;    /* 总裁说：我要这么宽 */
  height: 100px;   /* 我要这么高 */
  margin: 20px 0;  /* 上下都要留足面子 */
  padding: 10px;   /* 里面也要宽敞 */
}

专横总裁的典型行径便是，逐个依次由上而下堆叠放置，规规矩矩，绝无插乱顺序之情况。

二、行内元素：社恐患者的内向人生

行内元素如同社恐之人，习惯于蜷缩于角落之处，竭尽全力避免吸引他人目光，其中、、皆是典型例证，它们与别的元素共处一行，依照从左至右的顺序排列，直至空间不足以容纳才会进行换行操作，令人最为恼火的是，即便你为它们设定了宽度与高度，它们却全然不予理会，仿若在宣称：“我不依从你所认为的，我只遵循我自己要遵从的。”。

span {
  width: 200px;   /* 无效，社恐表示不想变宽 */
  height: 50px;   /* 无效，社恐表示不想长高 */
  margin: 10px;   /* 左右有效，上下只是摆设（但背景会露出来） */
  padding: 5px;   /* 左右有效，上下可能会跟别人重叠 */
}

但是社恐也有脾气，比如

虽是行内元素，那却能够去设置宽高，因它归属“可替换元素”，家里有矿。

三、行内块级元素：社恐的逆袭

存有这样一种元素，它能够这般，似行内元素那样依次排列，还能像块级元素那般随意去设置宽度与高度等，有吗？有的！那便是inline-block，可称作社恐患 者的逆袭。它既具备合群的特性，又拥有实力，简直如同元素这个范畴里的六边形战士。

.button {
  display: inline-block;
  width: 100px;
  height: 40px;
  margin: 5px;
}

但是，inline - block是有着一个坑的，那种坑就是，元素相互之间的换行符，会被渲染成为一个空格，如此一来就会导致出现间隙那种莫名其妙的情况。在这个时候，要么把父元素的font - size设置成为0，要么就干脆把HTML里面的换行给删除掉。记住，千万不要在inline - block的这个世界里面留下空格，不然的话你是会哭的。

四、用一张图来明白三者的那场有着恩怨情仇牵连的，属性为块级元素的，还有行内元素的，以及行内块级元素的情况。

是否独占一行

是，总裁范

否，社恐

否，但有点实力

默认宽度

撑满父容器

由内容决定

由内容决定

能否设置宽高

不能（除了家里有矿的）

水平margin

有效

有效

有效

垂直margin

有效

无效（假装有但实际没空间）

有效

padding

四边有效

四边都渲染但垂直不占位

四边有效

五、display新特性：从土枪到核武器

以往，我们去运用display时，基本上所采用的便是block、inline、inline - block这三种形式，而如今呢，CSS已然发生了很大的变化，给我们提供了一系列全新的样式。

1. Flexbox：真·布局神器

这一种情况是，display: flex仿佛是给容器施展了神奇的魔法，在此种魔法作用之下，其中容纳的子项能够以自动的方式进行排列布置，并且，就连在容器之中实现轻松居中这一效果，它也能够轻易达成，如此一来，以往那种依靠margin: 0 auto以及position等方法来实现布局的陈旧方式，就再也无需使用了。

.container {
  display: flex;
  justify-content: center;  /* 子项们，给我排排站好，居中！ */
  align-items: center;      /* 垂直方向也给我居中 */
}

Flexbox对一维布局特别适配，像导航栏、按钮组这类，处理起来简直易如反掌，毫无难度可言。

2. Grid：二维空间的降维打击

那种名为display: grid的东西简直就像是开了挂一般，它径自将页面划分成网格，能够随心所欲地进行摆放，比俄罗斯方块还要来得自由，是这样的一种情况。

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 三列，比例1:2:1 */
  gap: 10px;  /* 缝隙，完美解决间距问题 */
}

Grid是专门去应对复杂布局而产生的，比如说网页的整体架构，还有卡片墙，运用Grid那真的是特别畅快。

3. flow-root：专治浮动塌陷的老中医

往昔清除浮动需借助overflow: hidden，然而该方法副作用颇为巨大，极有可能将内容裁剪掉。当下出现了display: flow-root，其专门用于创建BFC也就是块级格式化上下文，此方式既能清除浮动，又不存在副作用，简直可称作老中医。

.parent {
  display: flow-root;  /* 孩子，你尽管浮动，我撑得住 */
}

4. contents：自我牺牲的隐形侠

要论绝，display: contents更甚，它令元素自身“不见”，然而其内部子元素直接提升一个层级去参与布局，情形恰似领导讲：“你们径直听从我上级的指挥，无需经由我。”它通常运用于Flex或者Grid那种布局里面，用于去除居于中间起不了实质作用的包裹层。

.container {
  display: flex;
}
.wrapper {
  display: contents;  /* wrapper隐形，它的孩子直接变成flex项 */
}

六、实战：从土办法到骚操作

我们着手去做一个导航栏，此导航栏有着这样的要求，即Logo要处于左对齐的状态，菜单要处于居中的状态，登录按钮要处于右对齐的状态。要是采用老办法的话，极有可能会写出数量众多的float以及position，而如今运用Flexbox，只需一行代码便能将其搞定。

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* 两端对齐 */
}
.menu {
  display: flex;
  gap: 20px;
  list-style: none;
}

要是你期望菜单能够做到绝对居中，并且不会受到左右两边元素宽度的干扰，那么此时可以给menu添加margin: 0 auto，如此一来它就会自动去吸收剩余的空间，进而实现完美居于中心的效果。

别把行内元素当作块级来使用，除非你明确知晓自己正在做什么，请注意这是七、避坑指南里提到的。要是你希望它拥有宽高，那就记得转换为inline - block或者block。垂直对齐要使用vertical - align，特别是在inline - block兄弟之间，默认基线对齐会让你对人生产生怀疑，添加个vertical - align: middle就能瞬间治愈这种情况。要留意inline - block的空格间隙问题，要么删除空格，要么将父元素的font - size设置为0，之后再对子元素单独设定字体大小。慎用地使用display: contents，尽管它呈现出隐形的状态，然而元素的点击事件以及可访问性或许仍然存在着，不要致使用户进行点击操作却最终一无所获。八、总结。

展现出独占特性的块级元素仿若霸道总裁，表现为内敛特质的行内元素恰似社恐患者，inline-block这类元素是实现了逆袭的社恐，灵活运用的Flexbox以及功能强大的Grid是现代布局场景中极其有效的工具。当你对这些技巧达成融会贯通，便能够在CSS所构建的领域之中肆意地前行。在下一回遭遇到有关布局方面的棘手难题时，不妨对今日所讲述的内容予以回忆思考，说不定会突然产生灵感，进而找到解决办法！

要是你认为这篇文章对你起到了帮助作用，那就记着去点个赞，从而让更多的小伙伴能够看到。咱们明天再相见，接着去解锁新的知识内容！

事先预告一下，明天的时候，我们会针对“CSS选择器优先级与继承机制”展开讨论，这个讨论绝对能让你开心到嘴巴都无法合拢，并且还能够让你把相关知识点牢牢记住！

相关标签： # display # CSS布局 # Flexbox # Grid # 行内元素