CSS 新手必学：3个布局属性搞懂就能排页面

刚学前端的新手，HTML写出来都是竖排的方块，想做成两栏、居中、自适应宽度就抓瞎。其实不用记一大堆属性，先搞懂下面3个布局工具，日常排页面基本够用。

一、display：先决定元素怎么排
block（块级）：默认占一整行，比如div、p标签。
inline（行内）：只占内容宽度，比如span、a标签。
flex（弹性布局）：现在最常用，父元素加 display:flex，子元素就能横向排列。
例子：
.container {
  display: flex;
  gap: 10px; /* 子元素之间留间距 */
}
一行排多个卡片、导航栏菜单项，用flex一行代码搞定。

二、margin：控制位置和间距
水平居中：
.box {
  width: 300px;
  margin: 0 auto; /* 左右auto就居中了 */
}
元素之间留白用margin，注意上下margin会重叠，取较大值。

三、width和max-width：让页面自适应
写死width: 1200px在手机上会溢出。改成：
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px; /* 两边留内边距 */
}
这样大屏幕显示1200px居中，小屏幕自动缩窄，还不会顶到屏幕边缘。

新手常见坑：
- 别一开始就用position:absolute到处飘，先把flex和margin用熟
- 盒模型先搞懂：width + padding + border = 实际占位宽度
- 想快速调样式按F12在浏览器里实时改，看到效果满意了再复制到代码里

练习建议：
先做一个简单导航栏（横向排列+居中），再做一个两栏布局（左固定宽度右侧自适应），这两个练会了，日常页面就不怕了。