CSS样式块级元素，行内元素，行内块级元素

前言

HTML元素按布局属性可以分为三种类型：块级元素、行内元素、行内块元素 这篇文章梳理一下他们的区别与联系

一、区别

1.块级元素

属性

• 默认独占一行
• 如果不设置宽度，默认是父级的宽度。
• 即使设置的宽度，也会占用一行
• 可以设置全部属性

2.行内元素

属性

• 不会独占一行，可以与其他非块级元素同行
• 不是全部属性都生效。margin的上下，padding的上下，宽度，高度都不可以设置。宽度随元素的内容大小而变化。
• 代码换行时，会出现间隔。解决方案：父元素设置font-size为0，子元素再设置具体的字体大小。
• 行内元素里面不可以嵌套块级元素

3.行内块元素

属性

• 不会独占一行，可以与其他非块级元素同行
• 可以设置全部属性
• 代码换行时，会出现间隔。解决方案：父元素设置font-size为0，子元素再设置具体的字体大小。

二、联系

可以通过css的display的属性来转换

• block 块级元素
• inline 行内元素
• inline-block 行内块级元素

display: block; // 设置元素为块级元素
display: inline:    // 设置元素为行内元素
display: inline-block; // 设置元素为行内块元素

三、常见标签

1.块级元素

div,p,ul,li(列表),ol(有序列表),h1,h2,h3,h4,h5,h6,form,hr,dd,dl header,main,footer,section,address,article,aside等

2.行内元素

a,span,label,i等

3.行内块元素

img,input,textarea,select,button,canvas,svg等