css 框模型制作

CSS 框模型基础

CSS 框模型（Box Model）是网页布局的核心概念，由内容（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成。通过调整这些属性，可以控制元素在页面中的显示效果。

元素总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
元素总高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

设置内容区域

通过 width 和 height 属性定义内容区域大小。默认情况下，这些属性仅影响内容框，不包括内边距、边框或外边距。

.box {
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
}

调整内边距

padding 属性控制内容与边框之间的空间。可以分别设置四个方向的值或使用简写形式。

.box {
  padding: 20px; /* 统一值 */
  padding: 10px 20px; /* 上下 左右 */
  padding: 5px 10px 15px 20px; /* 上 右 下 左 */
}

添加边框

border 属性用于设置边框样式、宽度和颜色。支持单独设置每条边框或使用简写。

.box {
  border: 2px solid #333; /* 宽度 样式 颜色 */
  border-top: 1px dashed red; /* 单边设置 */
}

控制外边距

margin 属性定义元素与其他元素之间的间距。与 padding 类似，支持多值简写。

.box {
  margin: 15px; /* 统一值 */
  margin: 0 auto; /* 水平居中常用写法 */
}

框模型模式切换

默认情况下，元素的 width 和 height 仅指内容区域。通过 box-sizing 可以改变计算方式：

.box {
  box-sizing: border-box; /* width/height 包含 padding 和 border */
}

实际应用示例

以下是一个完整的框模型应用案例，展示如何创建一个带有内边距、边框和外边距的盒子：

.container {
  width: 80%;
  margin: 0 auto;
}

.card {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 2px solid #3498db;
  border-radius: 8px;
  margin-bottom: 30px;
  background-color: #f9f9f9;
  box-sizing: border-box;
}

响应式调整

结合媒体查询，可以针对不同屏幕尺寸调整框模型属性：

@media (max-width: 768px) {
  .card {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
  }
}