目录一、标准面试回答二、分别解释1. display: block常见块级元素示例2. display: inline常见行内元素示例3. display: inline-block常见元素示例三、最核心对比表四、举个最直观的例子现象五、面试加分点1. inline-block 为什么常用2. inline-block 会有间隙问题解决方式3. 现在很多布局更常用 flex六、面试高分回答模板七、简洁背诵版八、一句话总结这是 CSS 面试里的高频题建议不要只背“块级独占一行行内不独占一行”最好从是否换行、是否能设置宽高、默认宽度表现这几个角度回答。一、标准面试回答block、inline、inline-block的主要区别在于是否独占一行能不能设置宽高元素宽度如何表现block独占一行可以设置宽高inline不独占一行宽高由内容撑开直接设置宽高通常无效inline-block不独占一行但可以设置宽高兼具行内和块级的一部分特性这段先说出去已经比较完整了。二、分别解释1.display: block块级元素的特点独占一行默认会从新的一行开始默认宽度通常会撑满父容器可以设置width和height可以设置margin、padding常见块级元素divph1 ~ h6ulli示例div { display: block; width: 200px; height: 100px; }2.display: inline行内元素的特点不独占一行可以和其他行内元素排在同一行宽度由内容决定直接设置width、height通常不生效水平方向的margin、padding一般有效垂直方向表现相对特殊常见行内元素spanastrongem示例span { display: inline; width: 200px; /* 通常无效 */ height: 100px; /* 通常无效 */ }3.display: inline-block行内块元素的特点不独占一行可以和其他元素排在同一行可以设置width和height同时保留部分行内布局特性常见元素imginputbutton也可以手动把div、span设为inline-block示例span { display: inline-block; width: 200px; height: 100px; }三、最核心对比表特性blockinlineinline-block是否独占一行是否否是否可设置宽高是通常否是默认宽度撑满父容器由内容决定由内容决定是否可与其他元素同排一行否是是四、举个最直观的例子div classbox blockblock/div div classbox blockblock/div span classbox inlineinline/span span classbox inlineinline/span span classbox inline-blockinline-block/span span classbox inline-blockinline-block/span.box { background: skyblue; border: 1px solid #333; } .block { display: block; width: 150px; height: 50px; } .inline { display: inline; width: 150px; /* 不生效 */ height: 50px; /* 不生效 */ } .inline-block { display: inline-block; width: 150px; height: 50px; }现象block两个元素会分两行显示inline两个元素在一行宽高设置不明显生效inline-block两个元素在一行但宽高可以生效五、面试加分点1.inline-block为什么常用因为它非常适合这种场景元素要排成一行但又希望设置宽高比如导航按钮标签按钮宫格布局图片列表2.inline-block会有间隙问题这是一个常见追问。多个inline-block元素之间如果 HTML 代码里有换行或空格浏览器会把它当作文本空白渲染导致元素之间出现间隙。例如span classitem/span span classitem/span中间可能会有空隙。解决方式去掉标签间换行和空格父元素设置font-size: 0用flex替代3. 现在很多布局更常用flex你可以补一句早期很多横向排列会用inline-block但现在更常见的是flex布局因为控制对齐、间距、伸缩更方便。这句话很加分。六、面试高分回答模板display: block、inline、inline-block的区别主要看三个点是否独占一行、能不能设置宽高、宽度如何计算。block元素会独占一行默认宽度通常撑满父容器并且可以设置宽高inline元素不会独占一行宽度由内容决定直接设置宽高通常不生效inline-block则结合了两者的特点不独占一行但可以设置宽高。所以如果一个元素既想和别的元素排在同一行又需要设置宽高一般会用inline-block。不过现在实际开发中很多场景也会直接用flex来做布局。七、简洁背诵版block独占一行可以设宽高inline不独占一行不能直接设宽高inline-block不独占一行但可以设宽高八、一句话总结block像整行盒子inline像文字inline-block像能设尺寸的文字盒子。