html元素的分类

HTML对盒子(元素)分类：
1.块级元素(block)
2.行内元素(inline)
3.行内块元素(inline-block) 。
 注：HTML的大多数元素都是块级(block)元素或行内(inline)元素。

1.块级(block)元素

特点：

默认情况下，块级元素会另起一行，并尽可能的充满整个容器；

宽度、高度以及外边距和内边距都可控制；

宽度默认是它容器的100%，除非设定一个宽度；

块级元素可以包含行内元素和其他块级元素，相比于行内元素可以创建更复杂和大型的结构。

常见的块级元素:div,p

块级元素列表：

注：两个同时具有外边距的块元素竖排，它们之间的垂直距离会取得距离的较大值；如果是横排的话，它们之间的水平距离是外边距之和。

2.行内(内联)元素-inline
特点：

和其他元素都在一行上；
 高和外边距不可改变；
 宽度就是它的文字或图片的宽度，不可改变
  设置宽度width   无效。
  设置高度height  无效，可以通过line-height来设置。
  设置margin 只有左右margin有效，上下无效。
  设置padding 只有左右padding有效，上下则无效（padding-top到页面顶部后就不再增加）。注意元素范围是增大了，但是对元素周围的内容是没影响的。
 设置 border只有左右border有效，但border-top到页面顶部后就不再增加；
 内联元素只能容纳文本或者其他内联元素

行内元素列表：



3.行内块元素 
 在行内元素的基础上，可以设置宽高属性的元素。
常见的行内块元素是：img元素 ，input元素。

4.元素级别之间的转换(display 属性)

块元素默认display:block；
行内元素默认为display:inline；
行内块元素默认为display:inline-block；
display:none;  不显示该元素，也不会保留该元素原先占有的文档流位置。
display:block;  转换为块级元素。
display:inline;  转换为行内元素。
display:inline-block; 转换为行内块元素。