CSS系列（2）-- 盒模型精解

前端技术探索系列：CSS 盒模型精解 📦

致读者：深入理解盒模型的本质 👋

前端开发者们，

今天我们将深入探讨 CSS 盒模型，这是构建网页布局的核心概念。通过本文，你将全面理解盒模型的工作原理及其在实际开发中的应用。

盒模型基础概念 🚀

盒模型组成

/* 基础盒模型示例 */
.box {/* 内容区域 */width: 200px;height: 100px;/* 内边距 */padding: 20px;/* 边框 */border: 1px solid #ccc;/* 外边距 */margin: 10px;
}/* 完整的盒模型控制 */
.detailed-box {/* 内容尺寸 */width: 200px;height: 100px;/* 内边距分向设置 */padding-top: 10px;padding-right: 20px;padding-bottom: 10px;padding-left: 20px;/* 边框分向设置 */border-top: 1px solid #ccc;border-right: 2px dashed #999;border-bottom: 1px solid #ccc;border-left: 2px dashed #999;/* 外边距分向设置 */margin-top: 10px;margin-right: auto;margin-bottom: 10px;margin-left: auto;
}

盒模型类型

/* 标准盒模型 */
.content-box {box-sizing: content-box;width: 200px; /* 内容宽度 */padding: 20px;border: 1px solid #ccc;/* 总宽度 = 200px + 40px + 2px = 242px */
}/* IE盒模型 */
.border-box {box-sizing: border-box;width: 200px; /* 总宽度 */padding: 20px;border: 1px solid #ccc;/* 内容宽度 = 200px - 40px - 2px = 158px */
}

外边距折叠现象 🤝

基本折叠规则

/* 相邻元素外边距折叠 */
.paragraph-1 {margin-bottom: 20px;
}.paragraph-2 {margin-top: 15px;/* 实际间距为20px，取较大值 */
}/* 父子元素外边距折叠 */
.parent {margin-top: 20px;
}.child {margin-top: 15px;/* 父元素上外边距为20px */
}

防止外边距折叠

/* 创建BFC防止折叠 */
.prevent-collapse {/* 方法1：使用overflow */overflow: hidden;/* 方法2：使用border */border-top: 1px solid transparent;/* 方法3：使用padding */padding-top: 1px;/* 方法4：使用display */display: flow-root;
}

视觉格式化模型 👁️

块级格式化上下文(BFC)

/* 创建BFC的常见方式 */
.bfc-container {/* 方法1：浮动 */float: left;/* 方法2：绝对定位 */position: absolute;/* 方法3：行内块 */display: inline-block;/* 方法4：overflow */overflow: hidden;/* 方法5：弹性盒 */display: flex;/* 方法6：网格 */display: grid;/* 方法7：多列布局 */column-count: 2;
}

行内格式化上下文(IFC)

/* 行内元素布局 */
.inline-container {/* 行高 */line-height: 1.5;/* 文本对齐 */text-align: justify;/* 垂直对齐 */vertical-align: middle;
}/* 行内块元素 */
.inline-block {display: inline-block;vertical-align: top;/* 保持行内特性的同时可设置宽高 */
}

实践项目：响应式卡片组件 🛠️

class ResponsiveCard {constructor(options = {}) {this.options = {breakpoints: {mobile: 375,tablet: 768,desktop: 1024},padding: {mobile: 16,tablet: 24,desktop: 32},...options};this.init();}init() {this.createStyles();this.setupResizeObserver();}createStyles() {const style = document.createElement('style');style.textContent = `.responsive-card {box-sizing: border-box;margin: 16px;background: #fff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);transition: all 0.3s ease;}@media (max-width: ${this.options.breakpoints.mobile}px) {.responsive-card {padding: ${this.options.padding.mobile}px;}}@media (min-width: ${this.options.breakpoints.mobile + 1}px) and (max-width: ${this.options.breakpoints.tablet}px) {.responsive-card {padding: ${this.options.padding.tablet}px;}}@media (min-width: ${this.options.breakpoints.tablet + 1}px) {.responsive-card {padding: ${this.options.padding.desktop}px;}}`;document.head.appendChild(style);}setupResizeObserver() {const observer = new ResizeObserver(entries => {entries.forEach(entry => {this.updateCardLayout(entry.target, entry.contentRect.width);});});document.querySelectorAll('.responsive-card').forEach(card => {observer.observe(card);});}updateCardLayout(card, width) {// 根据宽度动态调整卡片布局if (width <= this.options.breakpoints.mobile) {card.style.flexDirection = 'column';} else {card.style.flexDirection = 'row';}}
}