1.问题：
div是块级元素，一个div元素占一行，但是，今天测试样式时，总是会有两个div并占一行，很困惑，结果发现是app这个样式
在main.css里
#app样式布局在main.ts里被应用
2.原因以及样式分析
@import './base.css';
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}整体功能
这段代码是一个CSS样式表，用于设置一个名为#app的元素的样式，使其在屏幕宽度大于等于1024px时，以两列网格布局显示，并且在不同屏幕宽度下有不同的布局调整，以实现响应式设计。
代码结构
- 媒体查询：
@media (min-width: 1024px)表示当屏幕宽度大于等于1024px时，应用以下样式。 #app元素的样式：在媒体查询内部，#app元素被设置为display: grid，表示使用CSS网格布局，grid-template-columns: 1fr 1fr表示将#app元素划分为两列，每列的宽度为1份弹性空间，padding: 0 2rem表示在水平方向上设置2rem的内边距。#app元素的其他样式：在媒体查询外部，#app元素还被设置了max-width: 1280px，表示其最大宽度为1280px，margin: 0 auto表示在水平方向上居中显示，padding: 2rem表示在四周设置2rem的内边距，font-weight: normal表示字体粗细为正常。- 全局样式：
*表示所有元素，*::before和*::after表示所有元素的伪元素，这些元素被设置为box-sizing: border-box，表示使用盒模型，margin: 0表示外边距为0，font-weight: normal表示字体粗细为正常。
响应式设计
- 大屏幕布局：当屏幕宽度大于等于1024px时，
#app元素以两列网格布局显示，每列宽度自适应，水平方向有2rem的内边距，最大宽度为1280px，水平居中。 - 小屏幕布局：当屏幕宽度小于1024px时，由于没有在媒体查询外部设置
#app元素的其他布局样式，可能会采用默认的布局方式，比如堆叠显示等。
3.grid布局改快级元素布局
display: block; /* 将grid布局改为块级元素布局，不再是两列显示 */
