189 8069 5689
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使用的方法大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联网站制作公司行业资讯频道。