HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种,一般使用 display,进行三者的转换。
display: inline; 将元素转换为行内元素;
display: block; 将元素转换为块级元素;
display: inline-block; 将元素转换为行内块级元素。
行内元素(display: inline)
特点:
1. 和其他元素都在一行上;
2. 高,行高及外边距和内边距不可改变;
3. 宽度就是它的文字或图片的宽度,不可改变;
4. 内联元素只能容纳文本或者其他内联元素
常见行内元素:span、strong、em、s、u、a等
块级元素(display: block)
特点:
1. 总是在新行上开始;
2. 高度,行高以及外边距和内边距都可控制;
3. 宽度缺省是它的容器的100%,除非设定一个宽度;
4. 它可以容纳内联元素和其他块元素
常见的块级元素:
- h1~h6,hr
- div,dir(目录列表),dl(定义列表)
- table,ul.ol,li,form,fieldset(from控制组)
- p,pre
- address,blockquote,center
- menu(菜单列表)
- noframes(对于不支持frame的浏览器显示此区块内容)
- noscript(对于不支持script的浏览器显示此内容)
行内块级元素(display: inline-block)
特点:
1. 不自动换行
2. 能够识别宽高
3. 默认排列方式为从左到右
常见行内块级元素: input、img、button