小编给大家分享一下css中display怎么使用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联建站于2013年成立,先为增城等服务建站,增城等地企业,进行企业商务咨询服务。为增城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
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
div{
background-color:pink;
}
span{
background-color:yellow;
}
如上图所示可以看出block元素占据了一行的全宽,想当与width:100%,下面的内容要以新行开始
而行级元素就是只显示自己那部分的内容,并不占用一行
display:inline-block
常见的行内块元素:img、input
特点:内容决定大小,可以改变宽高
span{
background-color:yellow;
display:inline-block;//设置行块级元素
width:100px;
height:30px;
}
以上是“css中display怎么使用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!