热议：css display属性有哪些值

下面通过几个常用的属性值来介绍以下 display 属性的使用：

display: none

display 的属性值 none 可以用来隐藏元素，和visibility: hidden;功能相似，不同的是display: none;在隐藏元素的同时，它还会将元素所占的位置一并隐藏。display: none;通常会与 JavaScript 结合使用来隐藏或显示某个元素，下面通过一个示例来演示一下：

        
 
    隐藏    <script>        function change_box(obj){            var box = document.getElementById("box");            if(box.style.display == "none"){                box.style.display = "";                obj.innerHTML = "隐藏";            }else{                box.style.display = "none";                obj.innerHTML = "显示";            }        }    </script>

运行上面的代码，在页面中点击“显示”或“隐藏”按钮即可对页面中指定的元素执行显示或隐藏操作，如下图所示：

display: block

display 属性的属性值 block 可以将元素强制转换为块级元素，示例代码如下：

        这是一个链接

display: inline

display 属性的属性值 inline 可以将元素强制转换为行内元素，让元素拥有行内元素的特性，例如可以与其他行内元素共享一行等，示例代码如下：

        
    
    
display: inline;
    
display: inline;

display: inline-block

display 属性的属性值 inline-block 可以将元素强制转换为行内块元素，inline-block 既具有 block 能够设置宽高的特性又具有 inline 不独占一行的特性，示例代码如下：

        
    
    
display: inline-block;
    
display: inline-block;

（学习视频分享：web前端）

以上就是css display属性有哪些值的详细内容，更多请关注php中文网其它相关文章！

关键词：