css行内框和块框的区别有哪些

本篇内容介绍了“css行内框和块框的区别有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

区别：1、行内框不遵守严格的盒模型，而块框遵守。2、块框在浏览器中所占空间由元素大小，内边距，边框和外边距构成；而行内框由元素大小决定。3、行内框无法设置高度，块框可以。4、行内框中浏览器会忽视padding和margin的设置，块框不会。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

大家都知道DOM元素在css样式的定义下分为内联元素和块元素。由于浏览器的盒模型我们可以把元素看成一个个框，所以这两种分类又叫做行内框和块框。本篇文章旨在介绍浏览器对这两种框不同的呈现模式。

块框（块元素）

严格遵守盒模型—-某个元素在浏览器中所占空间由元素大小，内边距，边框和外边距构成，还服从外边距叠加原则。所谓外边距叠加原则准确的来说并不是求和原则而是求最大原则。例如：

(1)上下两个紧挨着的div元素，上面的div元素设置了margin-bottom，下面的div元素设置了margin-top，加入给这两个div都加上一个border，那么这时候这两个div在浏览器中呈现出来的效果并不是两个边框之前相距margin-botton + margin-top的和，而是相距两个值中的最大的那个。

(2)不仅对于不同且相邻的块元素由margin叠加原则，对于同一个元素相邻的margin也有叠加规则。想想空元素，它的外上边距和外下边距不就是直接相邻的吗？

行内框（内联元素）

行内元素不遵守严格的盒模型。它在浏览器中垂直占据的位置只由元素的大小决定并且无法用css为行内框设置高度，且浏览器会忽视padding和margin的设置 。

对于margin我们无论设置什么值都没有效果，但是对于行内框有一个padding陷进。

举例来说，如果在页面写一个span，为它加上border线，然后改变padding的值，这时边界框就会变高，表面上看起来padding的值撑起了行内框的高度，整个框的高度由元素高和上下内边距组成，但是如果你在该span下面写一个div，那么问题来了。

div并不会和span隔pandding那么宽，而是直接在span元素行高结束的地方另起一行。

这就说明了浏览器对于span盒子的解释和块框完全不同，垂直方向的padding，margin并不会为该元素在浏览器中占据空间行内框的高度只由行内框的内容自动撑起，因为这种方式所以唯一改变行内框高度的方法就是为行内元素设置行高。

说明：

• 行内框的高度=文字高度+行间距

• 行框高度= 最高的行内框顶部-最低行内框底部

存在最高和最低的区分是因为同一行内可能有大小不同的字体，上下位置不同的字体，因此存在不同的行内框高度。

从大的层面理解，行内框针对个体，行框针对一个整体。

如下图，box所在的框，是整行的最高点和最低点，行框由它撑起来。

所以行框=box的行内框。

其他小框就是各个文字自己的行内框了。

“css行内框和块框的区别有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！