当两个相邻元素之间有 margin 时，它们的 margin 可能会发生折叠，即取两者 margin 中较大者作为最终的 margin 值。
为了避免 margin 折叠，可以使用以下方法：
/* 方法一：使用 border 或 padding */
.element {
border: 1px solid #000;
margin: 10px;
}
/ 方法二：使用浮动 /
.element {
float: left;
margin: 10px;
}
/ 方法三：使用 inline-block /
.element {
display: inline-block;
margin: 10px;
}
使用百分比可以使元素的宽度随着父元素的宽度变化而变化。
以下是控制宽度百分比的方法：
/* 方法一：使用百分比 */
.element {
width: 50%;
}
/ 方法二：使用 max-width /
.element {
max-width: 500px;
width: 100%;
}
/ 方法三：使用 flexbox /
.parent {
display: flex;
}
.child {
flex: 1;
}