CSS魔法（四）常用属性

元素的显示与隐藏 display、visibility、overflow

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display、visibility 和 overflow。

display: none;隐藏某个元素不保留位置

display: block 显示某个元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    div {

        width: 200px;

        height: 100px;

        background-color: pink;

        display: none;/* display: none隐藏某个元素,不保留位置;display: block显示某个元素 */

    }

    p {

        width: 200px;

        height: 100px;

        background-color: red;

    }

    </style>

</head>

<body>

    <div></div>

    <p>测试</p>

</body>

</html>

visibility: hidden; 隐藏某个元素保留位置

visibility: visible; 显示某个元素

最常用的是display

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    a {

        display: block;

        width: 448px;

        height: 252px;

        margin: 100px;

        position: relative;

    }

    .mask {

        width: 100%;

        height: 100%;

        background:rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;

        position: absolute;

        top: 0;

        left: 0;

        display: none; /* 首先正常情况下 是隐藏的*/

    }

    /*什么时候出来？  鼠标放到 a 身上    是a 里面的 mask 出来*/

    a:hover .mask { /*：hover  鼠标经过a 然后 a 里面的 mask 就显示出来 所以这里用 后代选择器*/

        display: block; /*显示出来*/

    }

    </style>

</head>

<body>

    <a href="#">

        <img src="data:images/tudou.jpg" height="252" width="448" alt="">

        <div class="mask"></div>

    </a>

    <a href="#">

        <img src="data:images/tudou.jpg" height="252" width="448" alt="">

        <div class="mask"></div>

    </a>

    <a href="#">

        <img src="data:images/tudou.jpg" height="252" width="448" alt="">

        <div class="mask"></div>

    </a>

</body>

</html>

overflow

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 不剪切内容也不添加滚动条。

auto : 超出自动显示滚动条，不超出不显示滚动条

hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 不管超出内容否，总是显示滚动条

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div {

            width: 200px;

            height: 200px;

            border: 1px solid red;

            /*overflow: hidden;  溢出隐藏*/

            overflow: scroll;  /*scroll 滚动条 */

            overflow: auto;  /*auto 自动  */

        }

    </style>

</head>

<body>

    <div>

        文字文字文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字文字文字

    </div>

</body>

</html>

鼠标样式cursor

cursor : default 小白

cursor : pointer 小手

cursor : move 移动

cursor : text 文本

textarea

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    input {

        outline: none;  /*取消轮廓线的做法*/

        border: 1px solid #ccc;

        width: 200px;

        height: 25px;

        background: url(images/s.png) no-repeat 180px center;

    }

    textarea {

        resize: none;  /*防止拖拽*/

        outline: none;  /*取消蓝色边框*/

    }

    </style>

</head>

<body>

    <input type="text">

    <textarea name="" id="" cols="30" rows="10"></textarea>

</body>

</html>

dl标签与table标签

https://blog.csdn.net/zhenyu5665/article/details/54909686

vertical-align 垂直对齐

baseline

top

middle

bottom

使用vertical-align: middle可消除缝隙。（产生缝隙的原因是图片默认和文字基线对齐）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    img {

        vertical-align: middle;

        /* display: block; */

    }

    div {

        border: 2px solid red;

    }

    </style>

</head>

<body>

    <div>

        <img src="data:images/tudou.jpg" height="252" width="448" alt="">

        my name

    </div>

</body>

</html>

使用display: block将img标签转为块级元素，可消除缝隙。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    img {

        /* vertical-align: middle; */

        display: block;

    }

    div {

        border: 2px solid red;

    }

    </style>

</head>

<body>

    <div>

        <img src="data:images/tudou.jpg" height="252" width="448" alt="">

        <!-- my name -->

    </div>

</body>

</html>

text-overflow 文字溢出

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    * {

        margin: 0;

        padding: 0;

    }

    body {

        padding: 30px;

    }

    li {

        list-style: none;

        width: 200px;

        height: 30px;

        border: 1px solid pink;

        white-space: nowrap;

        /*1.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行*/

        overflow: hidden;  /* 2. 超出的部分 隐藏*/

        text-overflow: ellipsis;  /* 3. 溢出的部分用省略号替代*/

        line-height: 30px;

    }

    </style>

</head>

<body>

    <ul>

    <li>文字内容文字内容文字内容文字内容文字内容</li>

    <li>文字内容文字内容文字内容文字内容文字内容</li>

    <li>文字内容文字内容文字内容文字内容文字内容</li>

    <li>文字内容文字内容文字内容文字内容文字内容</li>

    <li>文字内容文字内容文字内容文字内容文字内容</li>

    </ul>

</body>

</html>

nowrap禁止文字自动换行

white-space: nowrap;/*1.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行*/

overflow: hidden;  /* 2. 超出的部分 隐藏*/

text-overflow: ellipsis;  /* 3. 溢出的部分用省略号替代*/

精灵技术（sprite）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    span {

        display: inline-block;

        background: url(images/abcd.jpg) no-repeat;

    }

    .aa {

        width: 108px;

        height: 110px;

        background-position: 0 -9px;

    }

    .n {

        width: 112px;

        height: 110px;

        background-position: -255px -276px;

    }

    .d {

        width: 97px;

        height: 107px;

        background-position: -363px -8px;

    }

    .y {

        width: 110px;

        height: 110px;

        background-position: -367px -556px;

    }

    </style>

</head>

<body>

    <span class="aa"></span>

    <span class="n"></span>

    <span class="d"></span>

    <span class="y"></span>

</body>

</html>

滑动门效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    a {

        margin: 100px;

        height: 33px;

        display: inline-block;

        background: url(images/to.png) no-repeat;

        color: #fff;

        text-decoration: none;

        line-height: 33px;

        padding-left: 15px;

    }

    span {

        display: inline-block;

        height: 33px;

        background: url(images/to.png) no-repeat right;

        padding-right: 15px;

    }

    </style>

</head>

<body>

    <a href="#">

        <span>首页12345678</span>

    </a>

</body>

</html>

微信滑动门

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    body {

        background: url(images/wx.jpg)  repeat-x;

    }

    .nav li {

        float: left;

    }

    .nav a {

        /*1. a 左边放 左圆角   但是文字需要往右走 15px*/

        height: 33px;

        line-height: 33px;

        color: #fff;

        text-decoration: none;

        background: url(images/to.png) no-repeat;

        display: inline-block;

        padding-left: 15px;

    }

    .nav  span {

        /*2. span 右边放右圆角   但是文字需要往左走 15px*/

        background: url(images/to.png) no-repeat right;

        display: inline-block;

        height: 33px;

        padding-right: 15px;

    }

    /*.nav a:hover {

        background-image: url(images/ao.png);

    }

    .nav a:hover span { /*鼠标经过之后 ，span 凹下去

        background-image: url(images/ao.png);

    }*/

    .nav a:hover, .nav a:hover span {

        background-image: url(images/ao.png);

    }

    </style>

</head>

<body>

    <ul class="nav">

        <li>

              <a href="#">

                      <span>首页</span>

              </a>

        </li>

        <li>

              <a href="#">

                      <span>三个字</span>

              </a>

        </li>

        <li>

              <a href="#">

                      <span>新闻客户端</span>

              </a>

        </li>

    </ul>

</body>

</html>

巴特西