css中display使用的方法
css中display使用的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
创新互联建站凭借在网站建设、网站推广领域领先的技术能力和多年的行业经验,为客户提供超值的营销型网站建设服务,我们始终认为:好的营销型网站就是好的业务员。我们已成功为企业单位、个人等客户提供了网站设计制作、网站设计服务,以良好的商业信誉,完善的服务及深厚的技术力量处于同行领先地位。
我们一般在CSS布局制作时候,常常会用到display属性中的值block、none、inline,inline-block那么今天我们来学习如何使用它们
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%,下面的内容要以新行开始
而行级元素就是只显示自己那部分的内容,并不占用一行
行块级元素转换
(1)块级元素转行级元素
给块级元素设置display:inline
(2)行级元素转换成块级
给行级元素设置display:block
display:inline-block
常见的行内块元素:img、input
特点: 内容决定大小,可以改变宽高
helloworld
display:none与visibility:hidden区别
display:none用来隐藏元素,不仅看不见还不占用任何空间大小
visibility: hidden也可以用来隐藏元素,但是虽然看不见仍存在,保留一个空位
例
display:none
.span{ background-color: aquamarine; display:none;}helloworld
hello被隐藏但是并没有留下任何空位
visibility: hidden
helloworld
hello被隐藏但仍然空出一个位置
感谢各位的阅读!看完上述内容,你们对css中display使用的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联行业资讯频道。
本文名称:css中display使用的方法
本文地址:http://pwwzsj.com/article/pdsggp.html