本文介绍: display属性的详细理解,首先要理解四个属性blockinlineinlineblocknone的意思以及其对应属性理解

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

   displayblock;(转换为块元素

   displayinline;(转换行内元素)

   displayinlineblock;(转换行内块元素)

  displaynone;(元素不会被显示)

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

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

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

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

  

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

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

 

 

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

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

 

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注