HTML标签盒模型

盒模型原理

行内元素

特性：1、无法设置宽高，其宽高由内容撑开；

    2、可以设置内边距及左右外边距，上下外边距无法设置；

    3、建议只放入文本及其他行内元素；

    4、能够解析换行，空格只能解析一个；

    5、默认横向排版，不会霸占一行。

行内块元素

特性：1、可以设置宽高；

    2、可以设置内边距及外边距；

    3、建议只放入文本及其他行内元素；

    4、能够解析换行，空格只能解析一个；

    5、默认横向排版，不会霸占一行。

块级元素

特性：1、比较霸道，自己独占一行；

    2、可以设置宽高；

    3、可以设置内边距及外边距；

    4、不能解析换行，空格只能解析一个；

    5、宽度默认是容器（父级宽度）的100%；

    6、相当于矩形容器或盒子，可以放行内、行内块或者块级元素。

元素类型转换

特殊情况下我们需要进行元素的模式转换，改变默认元素模式使其拥有另一种元素模式的特性，使用display属性能够将三者进行任意转换。

1、display:inline;转换为行内元素。 【不常用】

2、display:block;转换为块状元素。 【常用】

3、display:inline-block;转换为行内块状元素 【比较常用】