行内、块级、行内块三者元素的区别

不爱吃糖的程序媛

发布于 2024-01-18 21:04:50

800

发布于 2024-01-18 21:04:50

文章被收录于专栏：夏天的前端笔记

1.行内元素：

特点：

与其他行内元素并排，不能设置宽高，默认的宽度就是文字的宽度。行内元素不能设置margin-top,margin-bottom,padding-top,padding-bottom,line-height.

行内元素有：

除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。

  <span>...</span>

  <a>...</a>  链接

  <br>  换行

  <b>...</b>  加粗

  <strong>...</strong>  加粗

  <sup>...</sup>  上标

  <sub>...</sub>  下标

  <i>...</i>  斜体

  <em>...</em>  斜体

  <del>...</del>  删除线

  <u>...</u>  下划线

  <input>...</input>  文本框

  <textarea>...</textarea>  多行文本

  <select>...</select>  下拉列表

2.块级元素：

特点：

霸占一行，不能与其他任何元素并列。能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。块级元素：所有的容器级标签，都是块级元素，以及p标签。div , h系列 , li , dt ,dd。

注意：

段落元素（文字元素）内不能放块元素

例如，p标签里不能放div标签，h1中也不能放div

  <address>...</adderss>   

  <center>...</center>  地址文字

  <h1>...</h1>  标题一级

  <h2>...</h2>  标题二级

  <h3>...</h3>  标题三级

  <h4>...</h4>  标题四级

  <h5>...</h5>  标题五级

  <h6>...</h6>  标题六级

  <hr>  水平分割线

  <p>...</p>  段落

  <pre>...</pre>  预格式化

  <blockquote>...</blockquote>  段落缩进   前后5个字符

  <marquee>...</marquee>  滚动文本

  <ul>...</ul>  无序列表

  <ol>...</ol>  有序列表

  <dl>...</dl>  定义列表

  <table>...</table>  表格

  <form>...</form>  表单

  <div>...</div>

3.行内块元素

特点：

和相邻的行内元素（包含行内块）在一行上，它们直接会有空白缝隙；一行可以显示多个；默认宽度就是内容的宽度；高度、宽度、内外边距都可以自定义；

注意了：img是一个可替换元素。它的 display 属性的默认值是 inline，但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它就像 inline-block 一样。你可以为设置 border/border-radius、padding/margin、width、height 等等的 CSS 属性。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-08-11，如有侵权请联系 cloudcommunity@tencent.com 删除

容器