HTML中的块元素、内联元素和内联快元素

页面布局中常用的三种标签：块元素、内联元素、内联块元素。

1. 块元素（行元素）

常见块元素：div、ul、li、dl、dt、dd、p、h1-h6

特点：

• 支持全部的样式；
• 若没有设置宽度，默认的宽度为父级的100%；
• 盒子占据一行，即使设置了宽度。

2.内联元素（行内元素）

常见的内联元素：a、span、lable、button、textarea、b、strong、select、em

特点：

• 不支持宽、高、margin上下、padding上下；
• 宽、高由内容决定；
• 盒子并在一行；
• 代码换行，盒子之间会产生间距；
• 子元素是内联元素，父元素可以用text-aling设置子元素的水平对齐，用line-heighet设置垂直对齐。

解决内联元素间隙的方法：

1. 去掉内联元素之间的换行；
2. 将内联元素的父级font-szie设置为0，内联元素自身再设置font-szie。

3.内联块元素（行内块元素）

内联块元素是新增的元素类型，现有元素没有归类于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素会内联元素转化成这种元素。
特点：

• 支持全部样式；
• 若没有设置宽、高，则由美容决定；
• 盒子并在一行；
• 代码换行，盒子会产生间距；
• 子元素是内联块元素，父元素可以用text-align属性设置子元素的水平对齐，line-height设置垂直对齐。

这三种元素可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转换为块元素，少量转化为内联块。而使用内联元素时，直接使用内联元素，而不用块元素转化了。

通过display属性相互转化

display属性：

1. none 隐藏且不占位置；
2. block 以块元素显示；
3. inline 以内联元素显示；
4. inline-block 以内联块元素显示。