元素显示类型

在HTML中有很多标签，不同的标签在页面中的显示效果是不一样的。比如说div之间默认会换行显示 两个span之间会在一行显示。我们根据HTML标签的显示特点我们将标签分为三类：块元素、行内元素、行内块元素

1. 块元素

div h1~h6 p ul ol li form, table

• 独占一行，内容不够一行的地方会被默认添加外边距。外边距可以要块级盒子水平居中

  margin:0 auto;
  

• 可以设置宽高，宽度默认是父元素的宽度，高度默认由内容撑开默认是0px

• 可以正常的设置上下外边距和内边距

• 块级元素一般作为大容器，可以嵌套：块级元素、行内元素、行内块元素等等……

  p元素除外,p标签中不要嵌套div、p、h等块级元素

2. 行内元素

a、span 、b、u、i、s、strong、ins、em、del……

• 用于控制页面中文本的样式

• 一行可以显示多个,不独占一行。用来包裹文字级别的

• 宽度和高度默认由文字大小撑开

• 不可以设置宽高，写了也不生效

• 左右外边距内边距边框有效，上下外边距内边距边框无效。只是视觉上可以看到，不会影响页面的布局。

  <style>
      span {
          /* 只是视觉上可以看到 */
          padding: 20px;
          background-color: green;
      }
      
      div {
          width: 300px;
          height: 300px;
          background-color: red;
      }
  </style>
  ​
  <span>span1</span>
  <span>span2</span>
  <div></div>
  

• 标签换行解析空格

• 结构上：内部不能放块元素，但是a标签能包裹块级元素做区域链接。同时注意a标签内部可以嵌套任意元素

  • 但是： a标签不能嵌套a标签

3. 行内块元素

• 对内是块级（可以设置宽高），对外是行内元素（一行可以显示多个）
• input、textarea、button、select……
• 上下左右外边距内边距有效
• 解析空格
• 结构上内部可以包裹任何的元素

特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

置换元素就是浏览器根据元素的属性，来决定具体的显示内容，浏览器会根据img标签的src属性的值来读取图片信息进行显示，存储在代码之外的，我们看HTML代码是看不到图片的实际内容的。置换元素区别于一般的inline元素，他们本身拥有内在尺寸（宽度，高度，宽高比），也可以设置 width / height 属性，他们的性质同行内元素设置了inline-block 一样。

4. 元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

属性	效果
display：block	转换成块级元素
display：inline-block	转换成行内块元素
display：inline	转换成行内元素