html+css之行元素与块元素

html中的标签有行元素(inline)、块元素(block)、行块元素（inline-block），三种，以下就简单整理一下。(本文只整理常见的，想要完整版的小伙伴可以自行查看手册哦)。

1、常见块元素：div h1 h2 h3 h4 h5 h6 p ul li ol form tr th 。

特点：块元素display：block   独占一行   默认宽度父级宽度的100%，默认垂直显示，可设置宽高、padding、margin。

2、常见行内元素：span  a i br。

特点：行元素display：inline  宽度自适应，靠内容撑开（以内容的大小为大小），水平显示，在一行之内。不能写宽高，可改变display:block不支持垂直方向的margin和padding,但左右方向的margin和padding是可以设置的。

3、常见行块元素：img。

特点：display：inline-block 对外表现为行级，对内表现为块级支持宽高，支持垂直方向的margin和padding。

若想要使行元素块元素之间相互转换可设置display属性。

虽然内联元素可以增加内边距，使其看上去好像将自己所占的地方扩大了，但是它的本质还是内联元素，它只能独占一行，第二行的元素不会在意padding的影响，所以两者会合在一起。所以垂直方向上的padding虽然可以添加，但是并不占据空间

行内元素与块级函数的三个区别
1、行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2、块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3、行内元素与块级元素属性的不同，主要是盒模型属性上
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

aoto cad选中后会出现三个蓝点,然后左键一下,蓝色的选中框变为红色的时候你就能随便拉伸了。
元素有行内元素(inline)、块级元素(block)以及行内块元素(inline-block)之分，对应地它们之间的盒模型也会有不同。
1 行内元素(inline)
通过display: inline可将元素声明为行内元素，顾名思义指在行里面的元素，因此没有换行的行为。
11 宽度和高度
行内元素不能设置宽度和高度，宽度和高度由内容撑开；
12 内边距
行内元素可以设置内边距，上下内边距不会影响行内元素的位置，但左右内边距会影响行内元素的位置；
13 边框
行内元素可以设置边框，上下边框不会影响行内元素的位置，但左右边框会影响行内元素的位置
14 外边距
行内元素不可以设置上下外边距(无效)，但可以设置左右内边距，且会影响元素的位置。
2 块级元素(block)
通过display: block可将元素声明为块级元素，块级元素拥有换行的行为。
21 宽度和高度
块级元素可以自由设置宽度和高度，其中宽度默认为父元素内容区的宽度，而高度则由内容高度撑开。
22 内边距
块级元素的内边距也可自由设置，默认为0；
23 边框
块级元素的边框可自由设置，默认为0；
24 外边距
块级元素的外边距可自由设置，默认为0。值得注意的是，上下两个元素的外边距会发生重叠，比如A元素下外边距(margin-botom)为10px，A元素的上外边距(margin-top)为20px，两者之间的外间距为20px，而非想象中的30px。
3 行内块元素(inline-block)
通过display: inline-block可将元素声明为行内块元素，行内块元素没有换行的行为，却可以设置宽度和高度，相当于行内元素和块级元素的综合体。
31 宽度和高度
行内块可自由设置宽度和高度；
32 内边距
行内块元素可正常设置内边距；
33 边框
行内块元素可正常设置边框；
34 外边距
行内块元素可正常设置外边距。值得注意的是，行内块的外边距跟其他行内块元素或块级元素的外边距不会发生重叠。

区别：

1行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。

2行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。

3行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

4块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

扩展资料：

内联元素又名行内元素，和其对应的是块元素，都是html规范中的概念。内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。

参考资料：

百度百科内联元素

---