跳到主要内容

行内元素和块级元素

行内元素和块级元素的区别​

1、行内元素不会占据整行，在一条直线上排列

2、块级元素会占据一行，垂直方向排列

3、行内元素和块级元素属性不同，主要是盒模型属性上，行内元素设置width无效，height，min-width，min-height无效（可以设置line-height),margin上下无效，padding上下无效

行内元素和块级元素的相互转换​

  • 行内元素转换为块元素：display：block；
  • 块元素转换为行内元素: display: inline;

块级元素列举​

  • <address> 定义地址
  • <caption>
  • <dd>
  • <div>
  • <dl>
  • <dt>
  • <fieldset>
  • <form>
  • <h1>-<h6>
  • <hr>
  • <legend>
  • <li>
  • <ol>
  • <ul>
  • <p>
  • <pre>

行内元素列表​

  • <a>
  • <b>
  • <big>
  • <span>

行内块级元素​

  • <button>
  • <img>

1、行内元素不会占据整行，在一条直线上排列，但可以设置width，height，padding，marign上下