CSS样式块级元素，行内元素，行内块级元素
CSS样式块级元素，行内元素，行内块级元素
用户7043603
发布于 2022-02-26 17:33:07
发布于 2022-02-26 17:33:07
前言
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等
本文系转载，前往查看
如有侵权，请联系?cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系?cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录