re:从0开始的CSS学习之路 11. 盒子垂直布局

/* 设置基本的HTML元素样式，确保良好的跨浏览器兼容性 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
 
/* 使用CSS3的flexbox布局实现盒子垂直布局 */
.container {
    display: flex; /* 使用flexbox布局 */
    flex-direction: column; /* 设置主轴方向为垂直 */
}
 
.box {
    margin: 10px; /* 设置盒子之间的间距 */
    padding: 20px; /* 设置盒子内部的填充 */
    background-color: #f0f0f0; /* 设置盒子的背景颜色 */
}

这段代码展示了如何使用flexbox来实现盒子的垂直布局。.container 类使用了 display: flex 属性，并通过 flex-direction: column 设置了主轴方向为垂直，从而使其子元素（如 .box 类）沿着垂直方向排列。