一、含义
①块状元素:一般是其他元素的容器,可以容纳内联元素和块状元素,块状元素排斥其他元素与其同一行,width和height起作用,常见的有div和p;
②内联元素:只能容纳文本和其他内联 元素,它允许其他元素和他位于同一行,width和height不起作用,常见的有a和span。
二、区别
独占一行 | 能设置宽高 | 竖直方向的margin,padding | 水平方向的margin,padding | |
块状元素: | 是 | 是 | 有,可以设置 | 有,可以设置 |
内联元素: | 否 | 否 | 不可以 | 有,可以设置 |
三、常见的块状和内联元素
块状元素 | 内联元素 |
address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易,也是CSS layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表 noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容 noscript - 可选脚本内容(对于不支持script的浏览器显示此内容) ol - 有序表单 p - 段落 pre - 格式化文本 table - 表格 ul - 无序列表 li | a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体(不推荐) bdo - bidi override big - 大字体 br - 换行 cite - 引用 code - 计算机代码(在引用源码的时候需要) dfn - 定义字段 em - 强调 font - 字体设定(不推荐) i - 斜体 img - 图片 input - 输入框 kbd - 定义键盘文本 label - 表格标签 q - 短引用 s - 中划线(不推荐) samp - 定义范例计算机代码 select - 项目选择 small - 小字体文本 span - 常用内联容器,定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本 u - 下划线 var - 定义变量 |
四、相互转化
转化为块状元素:display:block;
转化为内联元素:display:inline;
一般导航栏会把块级元素转换为内联元素,类似的还有制作水平菜单。