本文共 791 字，大约阅读时间需要 2 分钟。
页面布局中常用的三种标签：块元素、内联元素、内联块元素。
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设置垂直对齐。
解决内联元素间隙的方法：
- 去掉内联元素之间的换行；
- 将内联元素的父级font-szie设置为0，内联元素自身再设置font-szie。
3.内联块元素（行内块元素）
内联块元素是新增的元素类型，现有元素没有归类于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素会内联元素转化成这种元素。
特点： - 支持全部样式；
- 若没有设置宽、高，则由美容决定；
- 盒子并在一行；
- 代码换行，盒子会产生间距；
- 子元素是内联块元素，父元素可以用text-align属性设置子元素的水平对齐，line-height设置垂直对齐。
这三种元素可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转换为块元素，少量转化为内联块。而使用内联元素时，直接使用内联元素，而不用块元素转化了。
通过display属性相互转化
display属性：
- none 隐藏且不占位置；
- block 以块元素显示；
- inline 以内联元素显示；
- inline-block 以内联块元素显示。
转载地址：http://yuhwi.baihongyu.com/