CSS_11_元素的隐藏、显示与溢出

元素的隐藏、显示与溢出

隐藏

display:none;

元素隐藏不等于删除,元素不占据位置。

visibility:hidden

元素隐藏,但是隐藏的元素仍占据位置。

显示

display:block

block除了可以转化为块级元素之外,还有显示的功能。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移动显示二维码title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: pink;
            margin: 100px auto;
            text-align: center;
            line-height: 100px;
            position: relative;
        }
        img {
            position: absolute;
            left: 100px;
            top: 0;
            display: none;
        }
        div:hover img {
            display: block;
        }
    style>

head>
<body>
<div>
    <span>二维码span>
    <img src="../images/二维码.png" alt="">
div>
body>
html>

溢出

overflow溢出,检索或者设置当对象的内容超过其指定高度及宽度时的管理

属性值 描述
visible 取消溢出处理
auto 超出自动显示滚动条,不超出不显示滚动条
hidden 不显示超过对象尺寸,超出的部分隐藏掉
scroll 不管是否有超出内容,总是显示滚动条

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>溢出效果title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*overflow: auto; 滚动条*/
            /*overflow: hidden; 不显示超出的尺寸*/
            /*overflow: visible; 取消溢出效果*/
            overflow: scroll;
        }
    style>
head>
<body>
    <div>
        <span>今日新闻手动阀凤姐欧威伽伽span>
        <span>今日新闻手动阀凤姐欧威伽伽span>
        <span>今日新闻手动阀凤姐欧威伽伽span>
        <span>今日新闻手动阀凤姐欧威伽伽span>
        <span>今日新闻手动阀凤姐欧威伽伽span>
        <span>今日新闻手动阀凤姐欧威伽伽span>
        <span>今日新闻手动阀凤姐欧威伽伽span>
        <span>今日新闻手动阀凤姐欧威伽伽span>
    div>
body>
html>

你可能感兴趣的:(CSS)