css 框模型制作

CSS 框模型基础

CSS 框模型（Box Model）是网页布局的核心概念，包含内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。通过调整这些属性可以控制元素的实际占用空间。

• 内容区域（width/height）：元素的实际内容大小。
• 内边距（padding）：内容与边框之间的空白。
• 边框（border）：围绕内容和内边距的线条。
• 外边距（margin）：元素与其他元素之间的空白。

标准框模型与替代模型

默认情况下，元素的宽度计算方式为： [ 总宽度 = width + padding + border + margin ]

通过 box-sizing 属性可以切换计算方式：

.box {
  box-sizing: border-box; /* 总宽度包含 padding 和 border */
  width: 300px;
  padding: 20px;
  border: 5px solid black; /* 实际内容宽度为 250px */
}

常见布局示例

圆形元素

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: coral;
}

卡片效果

.card {
  width: 200px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

双边框效果

.double-border {
  width: 150px;
  height: 150px;
  padding: 10px;
  border: 5px dashed #333;
  outline: 5px solid #f00;
}

响应式框模型技巧

使用百分比或视口单位实现自适应：

.responsive-box {
  width: 90%;
  max-width: 1200px;
  padding: 2vw;
  margin: 0 auto;
}

通过媒体查询调整边距：

@media (max-width: 768px) {
  .responsive-box {
    padding: 10px;
    margin: 5px;
  }
}

调试框模型

浏览器开发者工具中：

1. 选中元素后查看盒模型图示
2. 实时修改 margin/padding/border 值测试效果
3. 使用 outline: 1px solid red; 临时高亮元素边界而不影响布局