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

<style>
	div{
		background-color: pink;
	}
	span{
		background-color: yellow;
	}
	</style>
</head>
<body>		
	<div>123</div>//块级元素
 <p><span class="span">hello</span>world</p>//行级元素

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

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

行块级元素转换

（1）块级元素转行级元素

给块级元素设置display：inline

（2）行级元素转换成块级

给行级元素设置display:block

display:inline-block

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

特点：内容决定大小，可以改变宽高

<style>
	span{
		background-color: yellow;
		display:inline-block;//设置行块级元素
		width:100px;
		height:30px;
	}
	</style>
</head>
<body>		
 <p><span class="span">hello</span>world</p>

display：none与visibility：hidden区别

display：none用来隐藏元素，不仅看不见还不占用任何空间大小

visibility: hidden也可以用来隐藏元素，但是虽然看不见仍存在，保留一个空位

例

display:none

 .span{
   background-color: aquamarine;
  display:none;}
	</style>
</head>
<body>		
 <p><span class="span">hello</span>world</p>

hello被隐藏但是并没有留下任何空位

visibility: hidden

<style>
 .span{
  background-color: pink;
   visibility: hidden;}
</style>
</head>
<body>
 <p><span class="span">hello</span>world</p>

hello被隐藏但仍然空出一个位置

感谢各位的阅读！看完上述内容，你们对css中display使用的方法大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联行业资讯频道。

当前题目：css中display使用的方法
当前链接：https://www.cdcxhl.com/article18/pdsggp.html

成都网站建设公司_创新互联，为您提供企业建站、微信小程序、用户体验、静态网站、关键词优化、面包屑导航

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容