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>
View Code

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="images/tudou.jpg" height="252" width="448" alt="">
        <div class="mask"></div>
    </a>
    <a href="#">
        <img src="images/tudou.jpg" height="252" width="448" alt="">
        <div class="mask"></div>
    </a>
    <a href="#">
        <img src="images/tudou.jpg" height="252" width="448" alt="">
        <div class="mask"></div>
    </a>
</body>
</html>
View Code

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>
View Code

鼠标样式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>
View Code

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="images/tudou.jpg" height="252" width="448" alt=""> 
        my name 
    </div>
</body>
</html>
View Code

 使用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="images/tudou.jpg" height="252" width="448" alt=""> 
        <!-- my name -->
    </div>
</body>
</html>
View Code

 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>
View Code

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>
View Code

 滑动门效果

<!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>
View Code

 微信滑动门

<!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>
View Code

 

posted @ 2018-11-04 15:03  ~沐风  阅读(165)  评论(0)  编辑  收藏  举报