块元素和行内元素

Posted 2021-01-09 liaoxiaolao

行内元素又叫内联元素：

内联元素只能容纳或者其他内联元素，常见内联元素<span><a>

块内元素 

块元素一般都从新行开始，可以容纳文本，其他内联元素和其他块元素，即使内容不能占满一行，块元素也要把整行占满。常见块元素<div>,<p>

行内元素：(inline element),特点是只占内容的宽度，不会占满一行，默认不会换行。

块元素：(block element)不管内容多大，它要换行，同时占满整行。

<p>作为段落元素是有段前段后的。

块内元素会将行内元素打断，相当于行内元素没有用。但会有警告。

现在行内元素是不能放块元素的。

行内元素只能放文本和行内元素（图片是行内元素）。

而块元素里可以放块元素和行内元素，文本。

一些css属性对行内元素不生效，比如margin,left不生效（这是在低版本浏览器中发生的）。

行内元素当做块内元素来使用，块内元素当做行内元素来使用都是可以的。

在行内元素中加入了style="display:block"，会使其按照快内元素显示。

在快内元素中加入了style="display:inline"，会使其按照行内元素方式显示。

块内元素和行内元素的转换

如果我们希望一个元素按照块内元素显示：则：

display:block;

如果我们希望一个元素按照按照行内元素显示：则：

display:inlilne