css中display使用的方法-创新互联

css中display使用的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

我们拥有10余年网页设计和网站建设经验,从网站策划到网站制作,我们的网页设计师为您提供的解决方案。为企业提供成都网站建设、成都网站制作、微信开发、微信小程序开发、移动网站建设H5网站设计、等业务。无论您有什么样的网站设计或者设计方案要求,我们都将富于创造性的提供专业设计服务并满足您的需求。

我们一般在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使用的方法-创新互联
URL网址:http://myzitong.com/article/gdshc.html