首先我们要知道display是显示的意思,分别有四种属性值分别为:
display:block;(转换为块元素)
display:inline;(转换为行内元素)
display:inline-block;(转换为行内块元素)
display:none;(元素不会被显示)
接下来我们就要理解什么是块元素,行内元素以及行内块元素。
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
块元素(block) | 一行只能放一个块元素 | 可以设置高度宽度 | 容器100% | 容器可以包含任意标签 |
行内元素(inline) | 一行可以放多个行内元素 | 不可以直接设置宽高 | 它本身容器的宽度 | 容纳文本或其他行内元素 |
行内块元素是(line-block) | 一行放多个行内块元素 | 可以设置宽高 | 它本身容器的宽度 |
注意:行内块元素能满足块元素和行内块元素的使用,既可以设置宽高还能同行使用。
接下来演示一下使用: display:block;(转换为块元素)
接下来演示一下使用:display:inline;(转换为行内元素)
接下来演示一下使用: display:inline-block;(转换为行内块元素)
display:none;(元素不会被显示)会被隐藏感兴趣的小伙伴可以自己测试一下博主对错。
(以上存有个人意见以及学习的知识存在错误希望提出共同成长)