必须设置 box-sizing: border-box; 否则 border 会使元素总宽超出设定值；border 需同时指定宽度、样式（如 solid）、颜色三部分；单边边框优先用 border-bottom 等方向属性；内边距和行高需同步调整以保证对齐。
用 border 设实线边框，但别漏掉 box-sizing
HTML5 本身不提供边框设置能力，实际是靠 CSS 的 border 属性。设成实线很简单：border: 1px solid #000;。但加完后元素变宽、父容器撑开、文字偏移——根本原因不是边框写错了，而是默认的盒模型把边框算在 width/height 外面。浏览器一渲染，width: 200px; + border: 2px; = 实际占宽 204px。
解决方法就一条：强制改用 border-box 模型：
div {
box-sizing: border-box;
width: 200px;
border: 2px solid #333;
}这样 200px 就是“含边框的总宽”，布局不再意外膨胀。
border 三个必要参数缺一不可
写 border 时只写 border: 1px solid; 或 border: #666; 是无效的，浏览器会直接忽略整条声明。必须同时指定三部分：
立即学习“前端免费学习笔记（深入）”；
- 宽度（如
1px、thin） - 样式（必须是
solid、dashed等合法值，solid才是实线） - 颜色（如
#000、red、transparent）
常见错误示例：border: solid #000; —— 缺宽度，不生效；border: 1px #000; —— 缺样式，也不生效。
只给某一边设实线边框？用方向性属性更稳
如果只要下边框实线，别用 border: 1px solid #000; 再覆盖其他三边，容易漏或写错。直接用单边属性：
input {
border-bottom: 2px solid #007bff;
border-top: none;
border-left: none;
border-right: none;
}或者更简洁地重置再单独设：
input {
border: 0;
border-bottom: 2px solid #007bff;
}注意：border: 0 和 border: none 效果相同，但语义上 none 更明确表示“无边框”；而 0 是长度值，某些旧环境可能解析异常，推荐统一用 none。
边框导致文字/内边距错位？检查 padding 和 line-height
加了边框后，按钮文字贴着上边、输入框光标下沉——大概率是没同步调 padding。边框本身不占内容空间，但会影响视觉对齐。比如原来 padding: 8px; 在无边框时刚好，加上 2px 边框后，内容区实际被压缩了（尤其当用了 box-sizing: content-box 时）。
稳妥做法：
- 先统一加
box-sizing: border-box; - 再按需调整
padding，让内边距数值和视觉节奏匹配 - 行内元素（如
span、a）加边框后高度突变，往往要配line-height对齐
例如按钮常用组合：
button {
box-sizing: border-box;
padding: 6px 12px;
border: 1px solid #ccc;
line-height: normal; /* 避免某些浏览器自动加行高 */
}边框看着简单，但真正卡住人的从来不是“怎么画出来”，而是它悄悄改变尺寸计算、触发重排、干扰垂直对齐。动手前先看一眼 computed styles 里的 box-sizing 和 border-width，比反复调 margin 有用得多。
