常见的块级元素与行内(内联)元素有哪些?它们有什么区别?

我需要一个答案,或许美满,或许破碎,但我不想半途而废。

30a67a40b5de4837a62b79891860df52.jpeg

 

1.默认情况

哪些HTML标签是块级元素、哪些是内联元素?

 

块级元素(display:block/table;):div、h1-h6、p、table、ul、ol、dl、li、dl、dt、dd……

行内元素(display:inline/inline-block;):span、a、

img、input、button……

 

2.块级元素和行内(内联)元素的区别

块级元素

46d0457856f248ccb55883280d61bffd.jpeg

 

  • 独占一行
  • 可以设置宽高,width默认为100%(父级元素宽度),height默认为0
  • 可以容纳内联元素和块级元素

行内元素

dc4e974036324bb18e499ba729e383fd.jpeg

  • 一行可放置多个
  • 不能设置宽高,宽高由内容撑开
  • 水平方向的 padding 和 margin 属性可以使用(内边距的 top/bottom和外边距的top/bottom都不能设置)
  • 只能容纳文本和内联元素

行内替换(置换)元素(也被称作行内块元素)

319a94dcfeab47588d3fde4208402c6a.jpeg

  • 一行可放置多个
  • 可以设置宽高,默认宽高由内容撑开
  • 常见的行内替换元素:img、input

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值