我喜欢移动它，移动它（第二部分）
内容提要
本文介绍了CSS中display属性和position属性的区别，display属性影响布局解释方式，position属性控制元素位置。文章还介绍了flexbox和grid布局的使用方法，并提供了练习挑战。
延伸解读
display 与 position 的核心区别
文章指出，display 和 position 虽然都影响元素在页面上的呈现，但作用层面不同。position 控制元素在文档中的定位方式，比如正常流、相对其他元素或完全脱离；而 display 决定布局如何被解释，即显示类型。display 不仅设置元素自身的外部显示类型，还影响其子元素的内部布局行为。理解这一区别有助于在调试布局时快速定位问题根源。
外部显示类型：block 与 inline 的默认行为
大多数元素默认外部显示类型为 block，例如 <div>，它们会独占一行，后续元素另起一行。而 <span> 等元素默认为 inline，不会创建新行。文章提到，可以通过 display: block 或 display: inline-block 改变元素显示类型。在 CodePen 练习中，将 .box 规则改为 inline-block 即可让所有盒子并排显示，这直观展示了外部显示类型对布局的影响。
内部显示类型：flexbox 与 grid 的适用场景
flexbox 和 grid 是两种内部显示类型，用于控制子元素的排列方式。flexbox 让子元素在父容器内灵活排列，更适应不同屏幕尺寸，因为它是相对于彼此和容器定位，而非窗口。grid 则允许将元素放置在网格中，提供更复杂的二维布局。文章通过 CodePen 示例演示了 display: flex 配合 justify-content 和 align-items 实现居中，以及 display: grid 配合 grid-template 将盒子放入四个象限。
通过挑战巩固布局技能
文章末尾提供了三个练习挑战，帮助读者巩固 flexbox 布局技能。挑战一要求查找 MDN 上正确的 justify-content 属性值，使盒子在水平方向均匀分布且不贴边，并垂直居中。挑战二要求将盒子分组并放置在右下角，需要调整多个属性。挑战三要求找到反转元素显示顺序的 flex 属性。这些挑战鼓励读者主动查阅文档并动手实践，而非被动阅读。
Q&A
CSS中的display属性和position属性有什么区别？
display属性影响布局的解释方式，而position属性控制元素在文档中的位置。
如何改变元素的显示类型？
可以通过设置display: block或display: inline-block来改变元素的显示类型。
什么是flexbox布局？
flexbox是一种布局方式，可以灵活地排列子元素，适应不同屏幕尺寸。
如何使用grid布局？
通过设置display: grid并定义grid-template，可以将元素放置在网格中。
文章中提供了哪些练习挑战？
文章提供了三个挑战，涉及调整flexbox的对齐方式和元素的显示顺序。
display属性的外部显示类型和内部显示类型有什么区别？
外部显示类型决定元素的基本布局方式，内部显示类型影响包含在该元素内的元素的显示行为。
