行内元素，行内块元素，块元素的区别

最新推荐文章于 2024-04-10 14:16:40 发布

Tea-pd

最新推荐文章于 2024-04-10 14:16:40 发布

阅读量2.5k

点赞数 3

文章标签： elementui 前端 javascript html5 css3

本文链接：https://blog.csdn.net/tea_tea_/article/details/125352971

版权

前言：本人是新生小白，如有错误之处欢迎指出

首先我们先来介绍行内元素 inline

<body>
      常见的行内元素有
      <span>ddd</span>
      <a href="">ccccc</a>
      <em>bbb</em>
      <i>啊啊啊啊</i>
      <strong>嗷嗷嗷</strong>
      <b>嗷嗷嗷啊</b>
      <select name="" id=""><!--额外提示用来创建单选或多选菜单,通常搭配 <option></option>使用-->
              <option value=""></option>
      </select>
      <sub>啊   <!--额外提示用来定义下标文本-->  
      <sup> 啊    <!--额外提示用来定义上标文本--> 


</body>

总结：

1.行内元素不会自动换行，无论你写多少内容都在一行，除非那一行都被内容写满。

2. 行内元素不能设置宽高,行内元素的宽高是被内容撑开，设置宽度，高度，以及行高，和text-align都是无效的，其高度有其内容宽高决定。但是水平方向上的padding和margin可以设置，垂直方向上的无效默认的宽度就是它本身的宽度

3.行内元素里面不能放块元素，并且和相邻的行内元素在一行上。块元素里可以套行内元素和行内块元素

4.行内元素只能容纳纯文本或者是其他的行内元素（a标签除外，a里面不可以放自己）

接下来介绍行内块元素 inline-block

常见的行内块元素有input和img标签

特点：

1.行内块元素既具有行内元素特点即不独占一行，又具有块元素特点即可以设置宽高

接下来介绍块元素 block

<body>
      常见的块元素有
     <div></div>
     <h1-h6></h1-h6>
     <header></header>
     <main></main>
     <footer></footer>
     <ul></ul>
     <ol></ol>
     <li></li>
     <p></p>
     <hr>
     <form action=""></form>
     <dl></dl>
     <dt></dt>
     <dd></dd>
     <!-- 特点
    1.可以设置宽高，行高和内外边距都是可以设置
    2.每个块级元素都是独自占一行。
    3.宽度默认是父元素的100% 
    4.p元素属于特殊的块级元素，不可以放置其他的块级元素-->
</body>