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;
}
}调试框模型
浏览器开发者工具中：
- 选中元素后查看盒模型图示
- 实时修改
margin/padding/border值测试效果 - 使用
outline: 1px solid red;临时高亮元素边界而不影响布局
