HTML布局元素（标签）

一、HTML布局元素是什么？

     html的一些常见的元素有div、span、a、b、em 、h1--h6、input、textare、li 、ul、br等等，这些元素标签上都有着自己的默认的display属性，不同的display属性值有不同的

     用处，对于布局元素来说主要分为三种inline(内联元素)、block（块状元素）、inline-block（内联块状元素）

二、三种布局元素的说明

     1、inline(内联元素)：

           常见的内联元素有:span、a、b、string、input、textarea等，他们本身的属性是display：inline;

           和其他行内元素从左到右的在一行上面显示，不能够直接设置元素的宽啊高啊等相关属性，但可以设置padding与margin的左右边距值，上下也没用。

           他的宽高是由他本身内容决定的，并且内联元素中只能放文本或其他内联元素；

     2、block(块状元素)：

          常见的内联元素有:div、p、h1--h6、ol、ul、li、table等，他们本身的属性是display：block;

          独占一行，每个元素都是会从新的一行开始，从上到下排布，支持css的高宽属性，支持padding与margin的所有属性；

          在不设置宽度的情况下，块状元素的宽度是他父级元素的宽度，不设置高度的情况下，他的高度是他本身内容的高度；

    3、inline-block（内联块状元素）

         结合了inline与block的一些特点，使元素变成行内元素，拥有行内元素的特性。又可以改变他的宽高与padding、margin等css属性，但又不独占一行，从左到右显示

                                                                                         （inline与block的简单展示）

三、三种布局元素的适用场景

      1、内联元素适合，不指定宽高，宽高由内容指定。2、块状元素合适，指定宽高，占满一行的时候。3、内联块状元素适合，指定宽高，不占满一行的时候。