块级元素和行内元素的区别


块级元素(block element)

div - 定义文档中的分区或节
dl - 定义列表
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
ol - 排序表单
li-标签定义列表项目


内联元素(inline element)
a - 锚点
b - 粗体(不推荐)
br - 换行
em - 强调
i - 斜体
img - 图片
input - 输入框
label - 表格标签
select - 项目选择
small - 小字体文本
span - 常用内联容器,定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
u - 下划线

(以上只是部分常见的块级元素和内联元素)


两者的区别:

1.块级元素单独占据一整行,行内元素占据的位置只有自身文本宽度的空间;


qb1.png

2.块级元素可以包含文本,块级,行内元素,而行内元素只能包含文本和行内元素;

qb2.png

3.块级元素可以设置宽高,行内元素设置宽高无效;

qb3.png

4.行内元素设置上下margin无效,设置上下padding无效,只能撑大背景色与边框;而对于块级元素有效

qb4.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在css布局中,会经常使用的块级元素和行内元素,而且会经常混淆这二者的使用,下面我们就来对这二者做出明确的区别,便...
    博为峰51Code教研组阅读 366评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,179评论 1 92
  • HTML中的元素可分为两种类型:块级元素和行级元素。这些元素的类型是通过文档类型定义(DTD)来指明。块级元素:显...
    adingmoon阅读 573评论 0 0
  • 块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签P。form这个块元素比较特殊,它只能...
    三杯两盏石酒_9265阅读 1,220评论 0 3
  • HTML中元素大多数都是块级元素或行内元素。下面就让我们来仔细的剖析剖析它们的用法和区别。 一、定义。 每个名字背...
    betterwlf阅读 27,422评论 7 23

友情链接更多精彩内容