块级元素和内联元素的区别小结

  • Post author:
  • Post category:其他






块状元素:





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 – 无序列表








内联元素



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 – 下划线








1.内联元素允许其他内联元素与其位于同一行,块状元素独占一行。


2.宽度和高度只对块状元素起作用,内联元素不起作用




3.如果我们把内联元素转化成块状元素,在相应的内联元素加上一个属性display:block就可以了,反之块级元素转换为内联元素在相应的块级元素上添加

属性display:inline;就可以啦。




4.text-indent:2em;”属性,只能加在块状元素上面,内联元素是不起作用的。


5.块级元素可以包含内联元素和某些块级元素,但内联元素不能包含块级元素


6.块级元素不能放在p标签里面


7.li 标签可以包含div


8.块级元素可以设置宽度和高度。




9.有几个特殊的块级元素只能包含内联元素不能包含块级元素,如h1-h6, p dt .






版权声明:本文为xxz_best原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。