css中display怎么使用

小编给大家分享一下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

123
//块级元素

helloworld

//行级元素

如上图所示可以看出block元素占据了一行的全宽,想当与width:100%,下面的内容要以新行开始

而行级元素就是只显示自己那部分的内容,并不占用一行

css中display怎么使用


  display:inline-block

  常见的行内块元素:img、input

  特点:内容决定大小,可以改变宽高

  

  

  

  

helloworld




css中display怎么使用

以上是“css中display怎么使用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


新闻名称:css中display怎么使用
本文来源:http://csdahua.cn/article/gogjss.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流