顶部导航布局Top Navigation Layout
“菜单在上面，主要内容在下面，是最常见的网站结构。
界面组件 · 布局与空间
用网格、弹性布局、定位与间距安排信息关系。
布局与空间
侧边栏布局Sidebar Layout
“左边负责找路，右边负责认真看内容。
单页布局Single Page Layout
“所有内容在一页里顺着读，需要时用锚点跳转。
文档布局Documentation Layout
“左边找章节，中间读内容，必要时旁边放补充。
卡片网格布局Card Grid Layout
“很多同类内容并排出现，方便扫一眼比较。
居中布局Centered Layout
“把注意力收在中间，不让长行文字把人拉散。
瀑布流布局Masonry Layout
“高矮不同的卡片像砌墙一样自然往下排。
分屏布局Split Screen Layout
“一边看，一边做，两个重点并排出现。
间距Spacing
“留白不是浪费，是告诉人哪些内容应该一起看。
外边距Margin
“一个区块和外面其他内容之间隔多远。
内边距Padding
“一张卡里面的文字离边框要留多少呼吸空间。
弹性布局Flexbox
“让一排东西自动对齐、分开或换行。
网格布局CSS Grid
“先划好行和列，再把内容放进对应格子。
层级Z-index
“页面上两样东西压在一起时，谁该在最上面。
吸顶Sticky Position
“往下滚时，重要导航仍留在你手边。
定位CSS Position
“决定一个元素是老老实实排队，还是相对某个位置浮出来。
居中Centering
“把该在中间的东西真正放稳，不只是数字上居中。
盒模型Box Model
“每个网页元素都像一个盒子，里面装内容，外面还有边框和留白。
溢出Overflow
“东西装不下时，是露出来、被裁掉还是允许滚动。
预览Preview
“先看成品会长什么样，再决定要不要真的发出去。
对齐Alignment
“该在一条线上的内容排齐，眼睛就更容易比较。
滚动Scroll
“屏幕装不下时，页面允许你沿内容继续走。