标签的显示模式（block/inline/inline-bloc

标签的显示模式（block/inline/inline-block）

• 标签的显示模式分为三种：块级元素、行内元素和行内块元素。

   一、块级元素（block）
  
    每个块级元素都会独占一行，且可以设置宽度、高度等属性。
  

  常见的块级元素有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>是最典型的块级元素，也是在css布局中会经常用到的块级元素。

  块级元素的特点：

    1.总是从新的行开始；
      
    2.宽高、行高、内外边距都可以进行设置；
  
    3.如果不设置宽度，那么它默认是容器的100%；
  
    4.可以容纳块级元素和内联元素。
  
  二、行内元素（inline）
  
    行内元素不独占一行，它靠自身的内容撑开来支撑结构，一般不设置宽高等属性，常用于页面中控制文本的样式。
  

  常见的行内元素有：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

  行内元素的特点：
  
    1.和相邻元素在一行；
  
    2.高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效；
  
    3.宽度默认是自身内容的宽度；
  
    4.只能容纳文本和其他行内元素。
  

  三、行内块元素（inline-block）

   在行内元素中有几个特殊的标签`<img />、<input />、<td>`，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
  

  行内块元素的特点：

    （1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙;
  
    （2）默认宽度就是它本身内容的宽度;
  
    （3）高度，行高、外边距以及内边距都可以控制。
  

  四、三种模式之间的转换

    块级元素转行内元素：   display:inline;
  
    行内元素转换块级元素：   display:block;
  
    块级元素、行内元素转换为行内块元素：    display:inline-block;
  

  以上就是今天写的内容啦，希望和大家一起共同学习，如果有错误希望给我回复喔O(∩_∩)O~