块元素、行内元素和行内块元素的区别以及转换
Willem Zhang Lv5

块元素(block)

可以设置其宽度、高度,内外边距,独占一行

默认宽度为 100% 父级元素的宽度

代码<boody><div></div></body>中块元素div的父元素是body,长度默认为浏览器的宽;

代码<div><p></p></div>中块元素p的父元素是div,长度默认为div的宽;那句话可以理解为(默认状态下,块状元素的宽与父元素的宽相同)。

不受空格影响

可以容纳行内元素和其他块元素

常见的块元素:div,h1~h6,ul,li,p,table等

行内元素(inline-level)

不支持宽高(宽高根据内容大小自动撑开),自左向右排列

受空格影响

默认宽度是自身内容的宽度

不独占一行

常见的行内元素:span,i,a,b,strong,em,sub,sup等

行内块元素(inline-block)

支持宽高,自左向右排列

受空格影响

不独占一行

具备块元素和行内元素的所有特点

标签之间的转换

display:

none(隐藏,不显示)

block(转化为块元素)

inline(转化为行内元素)

inline-block(转化为行内块元素)

注意:当元素浮动(float)后,不再区分行内和块元素,并且具备两者所有特点

另一种分类方法

替换元素和非替换元素

替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

例如:img元素通过src属性的值来读取图片信息并显示出来

来源:

https://blog.csdn.net/zheng_14451/article/details/108187175

https://blog.csdn.net/weixin_44299027/article/details/103876512

https://segmentfault.com/a/1190000000654770

https://www.imooc.com/qadetail/123665

元素两种分类方法

替换元素

替换元素和非替换元素

  • Post title:块元素、行内元素和行内块元素的区别以及转换
  • Post author:Willem Zhang
  • Create time:2021-04-21 03:38:00
  • Post link:https://ataraxia.top/2021/04/20/块元素、行内元素和行内块元素的区别以及转换/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.
 Comments