CSS盒模型由内容、内边距、边框和外边距组成，总宽度受box-sizing影响；inline-block元素兼具行内和块级特性，常用于水平布局，但需处理空白间隙、垂直对齐等问题，通过font-size: 0、vertical-align和box-sizing: border-box可有效控制布局。
CSS盒模型和inline-block元素布局是前端开发中非常基础但关键的知识点。理解它们的工作原理，能帮助你更精准地控制页面的结构与样式。
CSS盒模型的基本构成
每个HTML元素都可以看作一个矩形盒子，这个盒子由四个部分组成：
- 内容区域（content）：实际内容显示的区域，比如文字、图片等。
- 内边距（padding）：内容与边框之间的空间，背景色会延伸到padding区域。
- 边框（border）：围绕内容和padding的边线。
- 外边距（margin）：盒子与其他元素之间的距离，不包含背景色。
在标准盒模型中，元素的总宽度计算方式为：
width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
可以通过设置box-sizing: border-box来改变计算方式，使width包含padding和border，更便于布局控制。
inline-block元素的特点
将元素的display设置为inline-block后，它既具有块级元素可以设置宽高的特性，又保留了行内元素不会独占一行的特征。
- 可以在同一行显示多个元素，同时设置width、height、padding、margin等属性。
- 常用于实现水平排列的导航菜单、图片列表或按钮组。
- 默认对齐方式是基线对齐（baseline），可能导致意料之外的垂直间隙。
inline-block布局中的常见问题与解决方法
使用inline-block进行布局时，容易遇到以下问题：
立即学习“前端免费学习笔记（深入）”；
-
元素之间出现空白间隙：这是由于HTML中换行或空格被当作文本处理导致的。解决办法包括：
- 将多个元素写在同一行，不留空格。
- 父容器设置
font-size: 0，子元素再重新设置字体大小。 - 使用HTML注释
连接元素。
-
垂直对齐问题：可通过设置
vertical-align属性调整，例如vertical-align: top让元素顶部对齐。 -
盒模型带来的宽度计算偏差：建议统一使用
box-sizing: border-box避免padding撑大预期宽度。
实用布局示例
创建一个两栏并排布局：
左侧内容右侧内容
对应CSS：
.col {
display: inline-block;
width: 48%;
padding: 10px;
box-sizing: border-box;
vertical-align: top;
}
.container {
font-size: 0; /* 消除空白 */
}
.col {
font-size: 16px; /* 恢复字体大小 */
}
.col:first-child {
margin-right: 4%;
}
这样就能实现两个等宽列并排显示，且无多余间隙。
基本上就这些。掌握盒模型和inline-block的细节，能让你在不依赖Flex或Grid的情况下，也能灵活完成常见布局任务。虽然现在有更现代的布局方式，但理解inline-block仍有其价值。
