css行内框和块框

大家都知道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并不会为该元素在浏览器中占据空间行内框的高度只由行内框的内容自动撑起，因为这种方式所以唯一改变行内框高度的方法就是为行内元素设置行高。**

互相转换

css的display：block／inline／none可以设置元素为行内框或者块框。