行内块元素如何转换
发布于 2 个月前 作者 webdashen 171 次浏览 来自 分享

块级元素

代表性的就是div,其他的比如p,header,section,address,语义化增强代码的可读性

  • 能识别高和宽
  • 可以自动换行
  • 多个元素写在一起从上到下进行排序
  • margin和padding的上下左右都可以识别

行内元素

一行内的元素如 <span></span> <a> </a><img><br>大多数为描述性的标记

  • 块级元素设置的宽高无效
  • margin的上下无效,左右方向有效,padding上下左右都有效,但是会撑大自己的空间
  • 块级元素不会自动换行

行内块元素

继承行内元素跟块元素的特征,不自动换行,能够识别高度和宽度,排序方式从左到右

转换

display:inline;转化为行内元素 display:block;转化为块状的元素 display:inline-block; 转化为行内块元素

回到顶部