display属性应用和详细讲解

  首先我们要知道display是显示的意思,分别有四种属性值分别为:

   display:block;(转换为块元素)

   display:inline;(转换为行内元素)

   display:inline-block;(转换为行内块元素)

  display:none;(元素不会被显示)

   接下来我们就要理解什么是块元素,行内元素以及行内块元素。

元素模式元素排列设置样式默认宽度包含
块元素(block一行只能放一个块元素可以设置高度宽度容器100%容器可以包含任意标签
行内元素(inline)一行可以放多个行内元素不可以直接设置宽高它本身容器的宽度容纳文本或其他行内元素
行内块元素是(line-block一行放多个行内块元素可以设置宽高它本身容器的宽度

注意:行内块元素能满足块元素和行内块元素的使用,既可以设置宽高还能同行使用。

接下来演示一下使用:  display:block;(转换为块元素)

  

接下来演示一下使用:display:inline;(转换为行内元素)

接下来演示一下使用: display:inline-block;(转换为行内块元素) 

 

 

  display:none;(元素不会被显示)会被隐藏感兴趣的小伙伴可以自己测试一下博主对错。

(以上存有个人意见以及学习的知识存在错误希望提出共同成长) 

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值