CSS Display(显示) 与 Visibility（可见性）

最新推荐文章于 2024-06-12 12:02:32 发布

Vip宅男

最新推荐文章于 2024-06-12 12:02:32 发布

阅读量435

点赞数

分类专栏： Java Web开发实战

本文链接：https://blog.csdn.net/Vipwxs/article/details/79023792

版权

Java Web开发实战专栏收录该内容

24 篇文章 0 订阅

订阅专栏

CSS Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

Box 1

Box 2

Box 3

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Visibility-hidden</title>
    <style>
        h1.hidden{
            visibility: hidden;
        }
    </style>
</head>
<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意:实例中的隐藏标题仍然占用空间</p>
</body>
</html>

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>display-none</title>
    <style>
        h1.hidden{
            display: none;
        }
    </style>
</head>
<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题不占用空间。</p>
</body>
</html>

CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

<h1>
<p>
<div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

<span>
<a>

如何改变一个元素显示

可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

下面的示例把列表项显示为内联元素：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>把列表项显示为内联元素</title>
    <style>
        li{display: inline;}
    </style>
</head>
<body>
<p>链接列表水平显示:</p>
<ul>
    <li><a href="/html/" target="_blank">HTML</a></li>
    <li><a href="/css/" target="_blank">CSS</a></li>
    <li><a href="/js/" target="_blank">JavaScript</a></li>
    <li><a href="/xml/" target="_blank">XML</a></li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>把span元素作为块元素(block)</title>
    <style>
        span{
            display: block;
        }
    </style>
</head>
<body>
<h2>Goods</h2>
<span>I want to a cat</span>
<span>I want to a car</span>
<h2>Foods</h2>
<span>I want to drink</span>
<span>I want to eat</span>
</body>
</html>

注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>如何显示元素的内联元素</title>
    <style>
        p{display: inline;}
    </style>
</head>
<body>
<p>display 属性的值为“inline”的结果</p>
<p>两个元素显示在同一水平线上。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>如何显示元素的块元素</title>
    <style>
        span{
            display: block;
        }
    </style>
</head>
<body>
<span>display 属性值为“bolck”的结果</span>
<sapn>这两个元素之间的换行符</sapn>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>如何使用一个表的collapse属性</title>
    <style>
        table,th,td{
            border: 1px solid black;
        }
        tr.collapse{
            visibility:collapse;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
    </tr>
    <tr class="collapse">
        <td>Lois</td>
        <td>Griffin</td>
    </tr>
</table>
<p><b>注意:</b> IE8 及其更早版本需要通过指定 !DOCTYPE 才可以支持 visibility:collapse。</p>
</body>
</html>

CSS Float(浮动)

什么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图像右浮动，文本流向将环绕在它左边</title>
    <style>
        img{
            float: right;
        }
    </style>
</head>
<body>
<p>在下面的段落中，我们添加了一个<b>float:right</b>的图片。导致图片将会浮动在段落的右边。</p>
<p>
    <img src="image/img.gif" alt="无此图片"/>
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>彼此相邻的浮动元素</title>
    <style>
        .thumbnail{
            float: left;
            width: 110px;
            height: 90px;
            margin: 5px;
        }
    </style>
</head>
<body>
<h3>图片库</h3>
<p>试着调试窗口，看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="image/img.gif" alt="无此图片" width="100px" height="100px"/>
<img class="thumbnail" src="image/img1.gif" alt="无此图片" width="101px" height="101px"/>
<img class="thumbnail" src="image/img2.gif" alt="无此图片" width="102px" height="102px"/>
<img class="thumbnail" src="image/img3.gif" alt="无此图片" width="103px" height="103px"/>
<img class="thumbnail" src="image/img4.jpg" alt="无此图片" width="104px" height="104px"/>
<img class="thumbnail" src="image/img5.gif" alt="无此图片" width="105px" height="105px"/>
<img class="thumbnail" src="image/img6.gif" alt="无此图片" width="106px" height="106px"/>
<img class="thumbnail" src="image/img7.gif" alt="无此图片" width="107px" height="107px"/>
<img class="thumbnail" src="image/img8.gif" alt="无此图片" width="108px" height="108px"/>
<img class="thumbnail" src="image/img9.gif" alt="无此图片" width="109px" height="109px"/>
</body>
</html>

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用clear属性往文本中添加图片廊</title>
    <style>
        .thumbnail{
            float: left;
            width: 110px;
            height: 90px;
            margin: 5px;
        }
        .text_line{
            clear: both;
            margin: 2px;
        }
    </style>
</head>
<body>
<h3>图片库</h3>
<p>试着调试窗口，看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="image/img.gif" alt="无此图片" width="100px" height="100px"/>
<img class="thumbnail" src="image/img1.gif" alt="无此图片" width="101px" height="101px"/>
<img class="thumbnail" src="image/img2.gif" alt="无此图片" width="102px" height="102px"/>
<img class="thumbnail" src="image/img3.gif" alt="无此图片" width="103px" height="103px"/>
<img class="thumbnail" src="image/img4.jpg" alt="无此图片" width="104px" height="104px"/>
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="image/img5.gif" alt="无此图片" width="105px" height="105px"/>
<img class="thumbnail" src="image/img6.gif" alt="无此图片" width="106px" height="106px"/>
<img class="thumbnail" src="image/img7.gif" alt="无此图片" width="107px" height="107px"/>
<img class="thumbnail" src="image/img8.gif" alt="无此图片" width="108px" height="108px"/>
<img class="thumbnail" src="image/img9.gif" alt="无此图片" width="109px" height="109px"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>为图像添加边框和边距并浮动到段落的右侧</title>
    <style>
        img{
            float: right;
            border: 1px dotted black;
            margin: 0px 0px 15px 20px;
        }
    </style>
</head>
<body>
<p>在下面的段落中，图像将向右浮动。黑色虚线边界添加到图像。我们还添加了边缘的0px的顶部和margin，15px底部margin，和20px左侧的margin图像。使得文本远离图像:</p>
<p>
    <img src="image/img6.gif" width="95" height="84" />
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>为图像添加边框和边距并浮动到段落的右侧</title>
    <style>
        div{
            float: right;
            width: 120px;
            margin: 0px 0px 15px 20px;
            padding: 15px;
            border: 1px solid black;
           text-align: center;
        }
    </style>
</head>
<body>
<div>
    <img src="image/img6.gif" alt="无此图片" width="90px" height="80px"/><br/>
    CSS is fun
</div>
<p>
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
</p>
<p>
    在上面的段落中,div元素是120像素宽,它包含了图像。
    div元素会向右浮动。
    Margins 被添加到div使得文本远离div。
    Borders和padding被添加到div框架的图片和标题中
</p>
</body>
</html>

创建一个没有表格的页面:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>创建一个没有表格的页面</title>
    <style>
        /*box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素*/
        *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
        }
        .header{
            background-color: #2196f3;
            color: white;
            text-align: center;
            padding: 15px;
        }
        .footer{
            background-color: #444;
            color: white;
            padding: 15px;
        }
        .topmenu{
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #777;
        }
        .topmenu li{
            float: left;
        }
        .topmenu li a{
            display: inline-block;
            color: white;
            text-align: center;
            padding: 16px;
            text-decoration: none;
        }
        .topmenun li a:hover{
            background-color: #222;
        }
        .topmenu li a.active {
            color: white;
            background-color: #4CAF50;
        }
        .column{
            float: left;
            padding: 15px;
        }
        .clearfix:after{
            content: '';
            clear: both;
            display: table;
        }
        .sidemenu{
            width: 25%;
        }
        .content{
            width: 75%;
        }
        .sidemenu ul{
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        .sidemenu li a{
            margin-bottom: 4px;
            display: block;
            padding: 8px;
            background-color: #eee;
            text-decoration: none;
            color: #666;
        }
        .sidemenu li a:hover{
            background-color: #555;
            color: white;
        }
        .sidemenu li a:active{
            background-color: #008cba;
            color: white;
        }
    </style>
</head>
<body>
<ul class="topmenu">
    <li><a href="@#home" class="active">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系我们</a></li>
    <li><a href="#about">关于我们</a></li>
</ul>
<div class="clearfix">`
    <div class="column sidemenu">
        <ul>
            <li><a href="#flight">The Flight</a></li>
            <li><a href="#city" class="active">The City</a></li>
            <li><a href="#island">The Island</a></li>
            <li><a href="#Food"> The Food</a></li>
            <li><a href="#People">The Poeple</a></li>
            <li><a href="#history"></a>The History</li>
            <li><a href="#oceans">The oceans</a></li>
        </ul>
    </div>
    <div class="column content">
        <div class="header">
            <h1>The City</h1>
        </div>
        <h1>Chania</h1>
        <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
        <p>You will learn more about responsive web pages in a later chapter.</p>
    </div>
    </div>
    <div class="footer">
        <p>底部脚本</p>
</div>
</body>
</html>

Vip宅男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Display(显示) 与 Visibility（可见性）

CSS Display(显示) 与 Visibility（可见性）display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。Box 1Box 2Box 3隐藏元素 - display:none或visibility:hidden隐藏一个元素可以通过把display属性设置为"
复制链接

扫一扫

专栏目录