彻底搞懂行内元素，块级元素，行内块元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了彻底搞懂行内元素，块级元素，行内块元素相关的知识，希望对你有一定的参考价值。
参考技术A html可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。
当然，他们之间也是可以转换的。
行内元素特征：
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
元素：span 修饰字体和标签，还有和这两个标签可以直接做出平方的效果
块状元素特征：
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
元素：div、p、nav、aside、header、footer、section、article、ul-li、address
行内块状元素特征：
(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
综合了行内元素和块状元素的特性
总结
不管块级元素还是行内元素，区别主要是三个方面:一是排列方式，二是宽高边距设置，三是默认宽度。
块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。
块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。
块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。
而行内块级元素又同时拥有块级元素和行内元素的特点。
块级元素行内元素与行内块元素
1、块级元素与行内元素的区别？
块级元素独占一行
行内元素可以在一行显示，但是不能设置上下的padding和margin值。
2、块级元素与行内元素的相互转换？
块级元素转行内元素：display:inline;
行内元素转块级元素：display:block;
3、行内块元素相邻布局的时候，中间几像素的间距怎么解决？
给元素添加浮动
4、常见的块级元素、行内元素与行内块元素？
块级元素 ：div、h系列、li、dt、dd、p
行内元素 ：span、u、a、、em、b、i、u、em
行内块元素：input 、img 、button 、texterea 、label。
5、块级元素、行内元素嵌套问题？
块级元素
可以嵌套行内块元素、行内元素
行内元素
嵌套行内元素，不能嵌套块级元素
以上是关于彻底搞懂行内元素，块级元素，行内块元素的主要内容，如果未能解决你的问题，请参考以下文章