zoukankan html css js c++ java

HTML&CSS基础-display和visibility

　　　　　　　　　　　　　HTML&CSS基础-display和visibility

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

一.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display和visibility</title>
        
        <style type="text/css">
            a{
                /**
                 *     将一个内联元素变成块元素:
                 *         通过dispaly样式可以修改元素的类型,虽然有多个可用参数，但常用参数就以下几个:
                 *             none:
                 *                 不显示元素，并且元素不会再页面中继续占有位置
                 *             inline:
                 *                 可以将一个元素作为内联元素显示
                 *             block:
                 *                 可以将一个元素设置块元素显示
                 *             inline-block:
                 *                 将一个元素转换为行内块元素,可以使一个元素既有行内元素的特点又有行内元素的特点，和img的功能有点像。
                 *         除了上面的几个常用参数外，CSS还设置了其它属性，我这里就不一一去试了，感兴趣的小伙伴可以查阅官网手册。
                 * 
                 *     
                 */
                display:inline-block;
                width: 300px;
                height: 300px;
                background-color: yellow;
            }
            
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                
                /**
                 *     display: none;
                 *         使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
                 */
                /*display: none;*/
                
                /**
                 *     规定元素属性是否可见:
                 *         使用visibility属性可以规定元素是否可见，虽然有4个可用参数，但常用的参数就以下两个:
                 *             visible:
                 *                 默认值，元素是可见的
                 *              hidden;
                 *                 使用该方式隐藏的元素虽然不会再页面中显示，但是它的位置会依然保持哟~
                 */
                visibility: hidden;
                
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        <a href="#">我是一个超链接</a>
        <span>我是一个P标签</span>
    </body>
</html>

二.浏览器打开以上代码渲染结果

查看全文

相关阅读:
hadoop分布式搭建
 朴素贝叶斯算法
 python数组并集交集补集
 VMware Workstation下安装Linux
决策树ID3算法
 微信小程序开发测试
 筛法求素数质数
 STL——heap结构及算法
 STL——序列式容器
 使用位图字体工具BMFont从图片生成自定义字体

原文地址：https://www.cnblogs.com/yinzhengjie/p/7811884.html