5、overflow、hover

一、overflow

1、属性介绍

说明:

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

##

visible    默认值。内容不会被修剪，会呈现在元素框之外。

hidden    内容会被修剪，并且其余内容是不可见的。

scroll    内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit    规定应该从父元素继承 overflow 属性的值。

2、应用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="height: 200px; width: 300px; overflow: scroll">

        <img src="test.jpg">

    </div>

</body>

</html>

二、hover

1、属性介绍

##

选择鼠标指针浮动在其上的元素，并设置其样式；

hover 选择器可用于所有元素，不只是链接。

2、应用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-header{

            position: fixed;

            right: 0;

            left: 0;

            top: 0;

            height: 48px;

            background-color: #2459a2;

            line-height: 48px;

        }

        .pg-body{

            margin-top: 50px;

        }

        .w{

            width: 980px;

            margin: 0 auto;

        }

        .pg-header .menu{

            display: inline-block;

            padding: 0 10px 0 10px;

            color: white;

        }

        .pg-header .menu:hover{

            background-color: blue;

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="w">

            <a class="logo">LOGO</a>

            <a class="menu">全部</a>

            <a class="menu">42区</a>

            <a class="menu">段子</a>

            <a class="menu">1024</a>

        </div>

    </div>

    <div class="pg-body">

        <div class="w">a</div>

    </div>

</body>

</html>

巴特西

5、overflow、hover

最新文章

热门文章