行级元素与块级元素转换（行级元素转换为块级元素） - 原点资讯

持续总结前端面试的知识点，希望能够帮助有需要的朋友。零碎的知识在工作中也能起到很大的作用。今天说说行及元素和块级元素的区别及相互转换的方法。

行级元素与块级元素转换,行级元素转换为块级元素(1)

行内元素与块级函数的三个区别

1.行内元素与块级元素直观上的区别

行内元素会在一条直线上排列，都是同一行的，水平方向排列。

块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上

行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

行内元素转换为块级元素

display

块级元素默认display:block;行内非替换元素(a,span)默认为display:inline;；行内替换元素(input)默认为display:inline-block;
display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。
display:block;转换为块级元素。
display:inline;转换为行内元素。
display:inline-block;转换为行内块级元素。

如果觉得本篇文章对你有帮助，欢迎收藏，转发。