HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换:
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
块状元素:
1. 总是在新行上开始。
2. 高度,行高以及外边距和内边距都可控制。
3. 宽度缺省是它的容器的100%,除非设定一个宽度。
4. 它可以容纳内联元素和其他元素。
内联元素:
1. 和其他元素都在一行上;
2. 高,行高及外边距和内边距不可改变;
3. 宽度就是它的文字或图片的宽度,不可改变;
4. 内联元素只能容纳文本或者其他内联元素;
对内联元素,需注意如下:
1. 设置宽度 width 无效。
2. 设置高度 height 无效,可以通过line-height来设置。
3. 设置margin 只有左右margin有效,上下无效。
4. 设置padding只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。
内联块状元素
1. 不自动换行;
2. 能够识别宽高;
3. 默认排列方式为从左到右;