css中display怎么使用
小编给大家分享一下css中display怎么使用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
display属性
display属性可以有多个值，但常常用到的如下所示
none:此元素不会被显示。
block：此元素将显示为块级元素，此元素前后会带有换行符。
inline：此元素会被显示为内联元素，元素前后没有换行符。
inline-block:行内块元素，既有块级属性又有行级属性。
所以在这篇文章中，我将详细介绍block，inline，inline-block以及none，这些常用的属性值
display：block
特点：独自占用一行，可以通过CSS改变宽高
常用的块级元素：div，p，ul，li，ol，form，address
display：inline
特点：内容决定大小，不可以通过CSS改变宽高
常用的行级元素：span，strong，em，a，del
<style>
div{
background-color:pink;
}
span{
background-color:yellow;
}
</style>
</head>
<body>
<div>123</div>//块级元素
<p><spanclass="span">hello</span>world</p>//行级元素
如上图所示可以看出block元素占据了一行的全宽，想当与width:100%，下面的内容要以新行开始
而行级元素就是只显示自己那部分的内容，并不占用一行
display:inline-block
常见的行内块元素：img、input
特点：内容决定大小，可以改变宽高
<style>
span{
background-color:yellow;
display:inline-block;//设置行块级元素
width:100px;
height:30px;
}
</style>
</head>
<body>
<p><spanclass="span">hello</span>world</p>
以上是“css中display怎么使用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
