块级元素与行内元素

什么是块级元素?

p、h1或div等元素常常称为块级元素。这意味着这些元素显示为一块内容，即块框。

块级框从上到下一个接一个的垂直排列，框之间的垂直距离由框的垂直外边距计算出来。

什么是行内元素？

行内元素在一行中水平排列，例如strong和span等元素。行内元素可以用水平内边距、边框和外边距调整它们的水平间距。但是，垂直外边距、边框和外边距不影响行内框的高度。同样，在行内框上设置显示的高度或宽度也没有影响。由一行幸存的水平框被称为行框，行框的高度总是足以容纳它包含的所有行内框。但是，设置行高可以增加这个框的高度。因此，修改行内框尺寸的唯一方法是修改行高或者水平边框、内边距或外边距。

如何改变生成的框的类型？

使用display属性可以改变生成的框的类型。通过将display属性设置为block，可以让行内元素表现的像块级元素一样。

把display属性设置为inline-blok。可以让元素想行内元素一样水平地依次排列。但是，框的内容仍然符合块级框的行为，可以显式地设置宽度、高度、垂直外边距和内边距。

还可以通过将display属性设置为none,让生成的元素根本没有框。这样，这个框及其所有内容就不再显示，不占用文档中的空间，可以用这个特性来达到改变元素显示与否。

CSS中有3种基本的定位机制：普通流、浮动和绝对定位。除非专门置顶，否则所有框都在普通流中定位。 普通流中元素框的位置由元素在HTML中的位置决定

框可以按照HTML元素的嵌套方式包含其他框。大多数框由显示定义的元素形成。但是，在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在将一些文本添加到一个块级元素（比如div）的开头时。即使没有把这些文本定义为块级元素。它也会被当成块级元素对待：

<div>
    匿名块框
    <p>普通块框</p>
</div>

在这种情况下，这个块框被称为匿名块框，因为他不与专门定义的元素相关联。无法直接对匿名块或行框应用样式，要操作他们可以使用JavaScript中的DOM来进行操作。

转载于:https://www.cnblogs.com/nanxia/p/8420384.html