前端开发入门——块级元素和行内元素

本文创建于2020年8月，以下为正文：

标签分为两种等级，一种是块级元素，另一种是行内元素。那么接下来我们来了解以下它们的用法和区别。

块级元素通俗来讲就是块级元素一般是其他元素的容器元素，能容纳其他元素或内联元素。就好比一个四方块，可以放其他的四方块，并呈现在页面上任何地方。块级元素只能出现在元素中。

行内元素一般情况下行内元素只包含内容或者其他行内元素，宽度和长度依据内容而定，不可以设置，可以和其他元素和平共处于一行。行内元素适合显示具体内容。display属性为inline的元素为行内元素。中文叫法：内联元素、内嵌元素、行内元素 、直进式元素等。

块级元素和行内元素之间的区别有哪些呢？

直观上来看，块级元素独占一行，默认宽度为100%，而行内元素在同一行显示，宽度则由内容撑开。从设置上来看，块级元素可以设置宽高，margin、padding和四个方向，而行内元素不可以设置宽高，只能设置margin、padding和左右道，上下道不起作用。从内容上来说，块级元素默认的display为block，而行内元素中的display为inline。块级元素可以包含块级元素和行内元素，行内元素一般只包含行内元素和文本。

那块级元素和行内元素如何去加深记忆，各自有什么特点呢？

块级元素的特点：

1.总是在新行上开始

2.高度、行高以及外边距和内边距都可控制

3.宽度缺省是它的容器的100%，除非设定一个宽度

4.它可以容纳内联元素和其他快元素

行内元素的特点：

1.和其他元素都在一行上

2.高、行高以及外边距和内边距不可改变

3.宽度就是他的文字或图片的宽度，不可改变

4.内联元素只能容纳文本或者其他内联元素

块级元素和行内元素包括的内容

块级元素：快就大多为结构性标记

< address>...< /asserss>

< center>...< /center>地址文字

<h1~h6>...</h1~h6>标题1~6级

< hr>水平分割线

< p>...< /P>段落

< pre>...< /pre>预格式化

< blockquote>...< /blockquote>段落缩进 前后5个字符

< marquee>...< /marquee>滚动文本

< ul>...< /ul>无序列表

< ol>...< /ol>有序列表

< dl>...< dl>定义列表

< table>...< /table>表格

< form>...< /form>表单

< div>...< /div>

行内元素：行内大多为描述性标记

< span>...< /span>

< a>...< /a>链接

< br>换行

< b>...< /b>加粗

< strong>...< /strong>加粗

< img>图片

< sup>...< /sup>上标

< sub>..< /sub>下标

< i>...< /i>斜体

< em>...< /em>斜体

< del>...< /del >删除线

< u>...< /u>下划线

< input>...< /input>文本框

< textarea>...< /textarea>多行文本

< select>...< /select>下拉列表

（ps:如果您觉得有用，请点赞转发，让更多人看到哦）