特性 短轮询 长轮询 SSE WebSocket
通信方向 单向 (客户端拉) 单向 (客户端拉) 单向 (服务端推) 双向互发
底层协议 HTTP HTTP HTTP TCP(WS/WSS)
连接类型 短连接 挂起 HTTP HTTP 长连接 TCP 长连接
浏览器原生 API 无 (ajax/fetch) 无 (ajax) EventSource WebSocket
自动重连 需手动实现 需手动 内置自动重连 需手动
消息格式 任意 任意 固定 SSE 格式 任意
二进制数据 支持 支持 不友好 完美支持
适用场景 低频、简单拉取 准实时、简单通知 纯服务端推送 双向实时交互

借助 CSS resize 属性，浏览器原生支持右下角拖拽拉伸。

通过鼠标按下状态结合 transform 可实现简易拖拽体验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS 模拟拖拽移动</title>
  <style>
    .drag-move {
      width: 160px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background: #67c23a;
      color: #fff;
      border-radius: 6px;
      cursor: grab; /* 鼠标手型 */
      transition: transform 0.1s ease;
      user-select: none;
      position: relative;
      left: 50px;
      top: 50px;
    }
    /* 鼠标按住时，模拟拖拽偏移 */
    .drag-move:active {
      cursor: grabbing;
      /* 简易拖拽偏移，可自行调整数值 */
      transform: translate(20px, 20px);
    }
  </style>
</head>
<body>
  <div class="drag-move">按住拖动</div>
</body>
</html>

CSS 盒模型

所有 HTML 元素都可看作矩形盒子，盒模型决定元素尺寸、边距、布局，分标准盒模型和 IE 怪异盒模型。

一、盒子组成（四层结构）

从外到内依次：

  1. margin 外边距：盒子与其他元素的距离，透明
  2. border 边框：盒子边界，可见样式
  3. padding 内边距：内容与边框之间的距离，继承背景色
  4. content 内容区：文字、图片等实际内容

二、两种盒模型核心区别

由 box-sizing 属性控制，计算公式不同

1. 标准盒模型（默认）

box-sizing: content-box;

  • 元素实际宽度 = width(内容) + padding + border
  • width/height 仅设置内容区大小

公式：

1
总宽度 = width + padding-left + padding-right + border-left + border-right

2. IE 怪异盒模型（常用）

box-sizing: border-box;

  • 元素实际宽度 = 设定的 width
  • width/height 包含：内容 + padding + border

公式：

1
内容宽度 = width - padding - border

现代开发统一推荐 border-box，改 padding/border 不会撑大盒子，布局更可控。

三、属性用法

1. margin 外边距

1
2
3
4
5
6
7
8
9
10
11
12
/* 四个值：上 右 下 左 */
margin: 10px 20px 10px 20px;
/* 两个值：上下  左右 */
margin: 10px 20px;
/* 一个值：四边相同 */
margin: 10px;

/* 单独方向 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

特性：

  • 垂直方向 margin 会合并（相邻块级元素上下边距取最大值）
  • margin: 0 auto; 可实现块级元素水平居中

2. padding 内边距

写法同 margin，不能为负值，背景会延伸到 padding 区域。

1
2
padding: 10px;
padding: 5px 15px;

3. border 边框

1
2
3
4
5
6
7
/* 宽度 样式 颜色 */
border: 2px solid #333;

/* 单独设置 */
border-width: 2px;
border-style: solid; /* solid 实线 / dashed 虚线 / dotted 点线 */
border-color: #000;

四、完整示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
  <style>
    .box1 {
      /* 标准盒模型（默认） */
      box-sizing: content-box;
      width: 200px;
      padding: 20px;
      border: 5px solid #f00;
      margin: 30px;
      background: #eee;
    }

    .box2 {
      /* 怪异盒模型（推荐） */
      box-sizing: border-box;
      width: 200px;
      padding: 20px;
      border: 5px solid #00f;
      margin: 30px;
      background: #eee;
    }
  </style>
</head>
<body>
  <div class="box1">content-box</div>
  <div class="box2">border-box</div>
</body>
</html>

计算：

  • box1 实际宽：200 + 40 + 10 = 250px
  • box2 实际宽：200px

五、全局统一设置（项目标配）

所有元素统一使用 border-box，避免布局错乱：

1
2
3
4
5
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

六、关键总结

  1. content-box：width = 内容宽（默认）
  2. border-box：width = 内容+内边距+边框（开发首选）
  3. margin 透明、可负、会垂直合并；padding 不透明、不可负
  4. 布局优先全局设置 box-sizing: border-box

CSS 实现 0.5px 细线

原生 border: 0.5px 在部分设备/浏览器会被四舍五入成 1px，下面是主流兼容方案，按实用优先级排序。

一、方案1：transform 缩放（最通用、推荐）

利用 scale(0.5) 压缩 1px 线条，适配所有移动端/PC，支持横竖线。

水平线

1
2
3
4
5
6
.half-line {
  height: 1px;
  background: #333;
  transform: scaleY(0.5); /* 垂直缩放一半 */
  transform-origin: center; /* 缩放基点，避免偏移 */
}

竖直线

1
2
3
4
5
6
7
.half-line-v {
  width: 1px;
  height: 100px;
  background: #333;
  transform: scaleX(0.5);
  transform-origin: center;
}

完整示例（分割线）

1
2
3
4
5
6
7
8
9
10
11
<div class="line"></div>

<style>
.line {
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleY(0.5);
  transform-origin: 0 center; /* 基点左对齐，布局更稳 */
}
</style>

二、方案2：border + 媒体查询（适配高清屏）

区分设备像素比，针对 Retina/高清屏单独设置 0.5px，普通屏用 1px。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.line {
  height: 1px;
  background: #333;
}

/* 2倍屏（主流手机） */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .line {
    height: 0.5px;
  }
}

/* 3倍屏 */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .line {
    height: 0.333px;
  }
}

说明：普通低分辨率屏幕不识别小数像素，自动 fallback 为 1px。

三、方案3：渐变渐变实现（渐变蒙版）

用线性渐变做出细线条，适合做单边分割线，可配合 border 使用。

1
2
3
4
5
6
.line {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, #333, transparent);
  opacity: 0.5;
}

特点：视觉上变细，本质还是 1px，靠透明度模拟细线条，适合装饰线。

四、方案4：伪元素实现（不占用原生布局）

适合给元素底部/顶部加 0.5px 下划线/分割线，不改动原有结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
  position: relative;
  padding-bottom: 10px;
}
.box::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #666;
  transform: scaleY(0.5);
  transform-origin: 0 bottom;
}

关键补充 & 踩坑

  1. 为什么直接写 0.5px 有时无效？
    浏览器渲染基于物理像素，老式屏幕最小单位是 1 物理像素，小数会被取整；高清屏（Retina）1 个 CSS 像素 = 2/3 物理像素，才支持小数像素。

  2. 缩放方案偏移问题
    缩放后线条位置可能偏移，用 transform-origin 修正：

    • 水平线条：transform-origin: left center
    • 底部下划线：transform-origin: left bottom

  3. 全局通用分割线最简写法（项目常用）

1
2
3
4
5
6
7
8
/* 全局 0.5px 分割线 */
.split-line {
  width: 100%;
  height: 1px;
  background-color: #eee;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

选型建议

  • 移动端/H5、需要强兼容：优先 transform 缩放
  • 只做高清屏适配、追求原生像素：设备像素比媒体查询
  • 仅视觉弱化、装饰线条：渐变 + 透明度