CSS 盒模型尺寸核对

1. 设置整数像素

2. 两种盒模型对照

content-box：内容宽 240px，边框外宽 288px。

border-box：内容宽 192px，边框外宽 240px。

.box {
  box-sizing: border-box;
  width: 240px;
  padding: 20px;
  border: 4px solid #17647c;
}

计算范围与隐私

只核对普通块盒的水平尺寸，左右采用相同内边距与实线边框，不计margin、滚动条、min/max-width、Flex收缩或Grid约束。图形区可横向滚动，图形不会为了移动屏幕缩小。内容宽最低为0，border-box不会压缩边框和内边距。CSS下载只包含border-box规则，无高度。参数仅在本页内存处理，不上传、不自动保存，无后端/API/密钥。