关于css:CSS之高级技巧-7

38次阅读

共计 7873 个字符，预计需要花费 20 分钟才能阅读完成。

元素的显示与暗藏

display 显示（暗藏）

显示与暗藏 

    display:none(暗藏)
    display:block（显示）

特点

  • 先暗藏元素 不占地位 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            margin: 20px 20px;
            background-color: blue;
        }
        
        .box1 {
            background-color: yellow;
            display: none;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

visibility(显示与暗藏)

    visibility:hidden
    visibility:visible

特点

  • 先暗藏元素 占地位 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            
        }
        
        div {
            width: 200px;
            height: 200px;
            margin: 20px 20px;
            background-color: blue;
        }
        
        .box1 {
            background-color: yellow;
            /* 设置元素的显示与暗藏 */
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

overflow(元素的显示与暗藏)

  • overflow:visible 既不裁切内容也不显示滚动条
  • overflow:hidden 超过内容则被剪裁掉
  • overflow:scroll 总是显示滚动条
  • overflow:auto 超出显示滚动条 不超出则不显示滚动条 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 400PX;
            height: 200PX;
            border: 1px solid red;
            /* 超出局部则主动剪裁 其它属性值请看阐明  */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        迟缓地升起后小心地将树苗移向当时挖好的树坑里，随后两个工人把树苗扶正，另外一名工人挥锹填土。移栽、扶苗、填土、围堰、浇水，一个上午的工夫，工人们共栽下国槐、西府海棠等树苗 50 余株。据门头沟区城市管    理委员会相干负责人介绍，本次景观晋升工程次要对 S1 线门头沟段沿线，设计总绿化面积约 11 万平方米，次要抉择国槐、法桐、油松、西府海棠、紫薇、山桃、金叶女贞等动物，打造三季有花、四季有景的景观成果。迟缓地升起后小心地将树苗移向当时挖好的树坑里，随后两个工人把树苗扶正，另外一名工人挥锹填土。移栽、扶苗、填土、围堰、浇水，一个上午的工夫，工人们共栽下国槐、西府海棠等树苗 50 余株。据门头沟区城市管    理委员会相干负责人介绍，本次景观晋升工程次要对 S1 线门头沟段沿线，设计总绿化面积约 11 万平方米，次要抉择国槐、法桐、油松、西府海棠、紫薇、山桃、金叶女贞等动物，打造三季有花、四季有景的景观成果。</div>
</body>

</html>

显示与暗藏的总结

显示与暗藏案例

剖析：盒子外面本来有一个半透明的遮罩，设置暗藏，当鼠标通过时显示。在非凡状况下，a 链接能够放 div 标签 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        
            .box {
                position: relative;
                width: 600px;
                height: 337px;
                margin: auto;
                border: 1px solid red;
            }
           
            .box a {display: block;}

            .box img {width: 100%;}

            .box .mask {
                display: none;
                position: absolute;
                width: 600px;
                height: 337px;
                background: rgba(0, 0, 0, 0.3) url(1. 元素的显示与暗藏 /image/arr.png) no-repeat center center;

            }
            .box a:hover .mask {display: block;}

            .box
        </style>
    </head>
    <body>
        <div class="box">
            <a href="">
                <!-- 遮罩层 -->
                <div class="mask"></div>
                <img src="./1. 元素的显示与暗藏 /image/ 素材.jpg" alt="">
            </a>
        </div>
    </body>
</html>

CSS 用户界面款式

鼠标款式 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            li {
                width: 200px;
                height: 200px;
                margin: 20px auto;
                list-style: none;
                line-height: 200px;
                text-align: center;
                font-weight: bold;
                color: white;
                background-color: #0000FF;
            }
            li:nth-child(1) {cursor: default;}

            li:nth-child(2) {cursor: pointer;}
            
            li:nth-child(3) {cursor: move;}

            li:nth-child(4) {cursor: text;}

            li:nth-child(5) {cursor: not-allowed;}
        </style>
    </head>
    <body>
        <ul>
            <li> 默认的鼠标状态 </li>
            <li> 小手状态 </li>
            <li> 挪动状态 </li>
            <li> 文本状态 </li>
            <li> 禁止状态 </li>

        </ul>
    </body>
</html>

轮廓线

在真正的开发利用中, 轮廓线是间接去掉的 

    outline:none

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin:0;
                padding: 0;
            }
            
            input {
                outline: none;
            
            
        </style>
    </head>
    <body>
        账号：<input type="text">
    </body>
</html>

避免文本域拖拽 

    resize:none

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                paddding: 0;
            }

            textarea {
                width: 200px;
                height: 200px;
                outline: 0;
                resize: none;
            }
        </style>
    </head>
    <body>
        <h2> 留言板 </h2>
        <textarea rows=""cols="">

        </textarea>
    </body>
</html>

用户界面款式总结

垂直居中

留神只针对行内元素和行内块元素失效 

vertical-align:top(顶线)  middle(中线)  baseline(基线)  bottom(底线)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            img {vertical-align: middle;}
    
        </style>
    </head>
    <body>
        
        <img src="../CSS（4）/6. 导航栏案例 /image/button2.jpg" alt="" > hello word
    </body>
</html>

去除图片缝隙的两种办法

  • 应用 vertivcal-align 的属性只有不是 baseline 便能够
  • 应用 display:block 也能够解决这个问题

没去除图片底部缝隙之前

去除图片缝隙之后 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .box {border: 1px solid red;}
            img {
                /* 去除图片底部缝隙的第一种办法 */
                /* vertical-align: bottom; */
                /* 去除图片底部缝隙的第二种办法 */
                display: block;
            }
            
        </style>
    </head>
    <body>
        <div class="box">
            <img src="../CSS（6）/image/adv.jpg" alt="">
        </div>
    </body>
</html>

文字省略形式

white-space：nowrap 强制一行显示 默认属性值为 normal

overflow:hidden 暗藏元素

text-overflow:ellipsis 文字溢出 默认属性值为 clip

留神：三个步骤一个都不能少 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box {
                width: 200px;
                height: 20px;
                border: 1px solid #ccc;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
        <div class="box">hello  我的名字叫做尧子陌  很快乐意识各位哦 </div>
    </body>
</html>

精灵技术

精灵图呈现的目标 

 加重了服务器申请和承受的次数，进步页面的加载速度

如何制作精灵图内呢

  1. 准确的测量每张背景图的大小和地位
  2. 给盒子设置宽高指定小背景图时，地位通常为负值

案例：用精灵图技术拼出本人的姓

名字为 name 的 image

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
                
            }

            div {
                float: left;
                background: url(image/name.jpg) no-repeat;

            }

            .box1 {
                width: 116px;
                height: 106px;
                background-position: -365px -557px;
            }

            .box2 {
                width: 110px;
                height: 110px;
                background-position: 0px -9px;
            }

            .box3 {
                width: 108px;
                height: 108px;
                background-position: -370px -280px;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

如何制作本人的精灵图

每个精灵图之间要摆放参差 且分辨率为 72pt 背景设为通明并且格局要为 png 格局

滑动门技术

为了使各种非凡形态的背景可能适应文本内容的多少 便呈现了滑动门技术

核心技术：利用 css 精灵和 padding 内边距

留神的几点

  1. a 负责左侧背景 span 负责右侧背景 有 padding 撑开适合宽度
  2. a 蕴含着 span 因为整个导航栏都是链接 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            display: inline-block;
            height: 33px;
            line-height: 33px;
            padding-left: 15px;
            color: white;
            text-decoration: none;
            background: url(image/ao.png) no-repeat left center;
        }
        
        a span {
            display: inline-block;
            height: 33px;
            background: url(image/ao.png) no-repeat right center;
            padding-right: 15px;
        }
    </style>
</head>

<body>
    <a href="#">
        <span> 首页 </span>
    </a>

</body>

</html>

微信导航栏案例

留神用到滑动门技术 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {background: url(./image/wx.jpg) repeat-x;
        }
        
        .nav {margin-top: 20px;}
        
        .nav li {
            list-style: none;
            float: left;
            margin: 0px 20px;
        }
        
        .nav a {
            display: inline-block;
            height: 33px;
            color: white;
            line-height: 33px;
            padding-left: 15px;
            background: url(./image/to.png) no-repeat left;
        }
        
        .nav a span {
            display: inline-block;
            height: 33px;
            padding-right: 15px;
            background: url(./image/to.png) no-repeat right;
        }
        
        .nav a:hover {background-image: url(./image/ao.png);
        }
        
        .nav a:hover span {background-image: url(./image/ao.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span> 首页 </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span> 帮忙与反馈 </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span> 公众平台 </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span> 首页 </span>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

注意事项

margin 负值之美

利用 margin 负值能够合并边框

没合并之前 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            div {
                float: left;
                height: 400px;
                width: 400px;
                border: 1px solid red;
                /* 利用 margin 负值能够合并边框 */
                margin-left: -1px;
                margin-top: -1px;
                
            }
            
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

合并之后的边框

margin 负值能够突出显示某个盒子之美

  • 定位能够将盒子晋升到最高处
  • 通过 z -index 能够显示 margin 负值的盒子 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            div {
                /* 定位能够将盒子晋升到最高处 */
                position: relative;
                float: left;
                height: 400px;
                width: 400px;
                border: 1px solid red;
                /* 利用 margin 负值能够合并边框 */
                margin-left: -1px;
                margin-top: -1px;
                
            }
            div:hover {
                border: 1px solid blue;
                /* 通过 z -index 能够显示 margin 负值的盒子 */
                z-index: 1;
            }
            
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

css 三角之美

案例

步骤如下

  1. 宽高全为 0
  2. 须要的三角形要保留色彩，不须要的三角形能够色彩设为通明即可
  3. 关照兼容性，line-height：0 font-size:0
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 0;
                height: 0;
                border: 10px solid transparent;
                border-left: 10px solid #000000;
                /* 关照兼容性 */
                line-height: 0;
                font-size: 0;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

三角形案例 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        
            div {
                position: relative;
                width: 600px;
                height: 600px;
                background-color: #0000FF;
                margin: 200px  auto;
            }
            p {
                position: absolute;
                left: 50%;
                /* 两个三角的间隔的一半 所以 -50px */
                margin-left: -50px;
                /* 两个三角的间隔 所以 -100px */
                margin-top: -100px;
                width: 0px;
                height: 0px;
                border:50px solid transparent;
                border-bottom:50px solid black;
                
                
            }
            
        </style>
    </head>
    <body>
        <div>
            <p></p>
        </div>
    </body>
</html>

正文完
css
发表至： css
2020-08-03
 0
关于css:横向滚动的flex布局-最右侧marginright-失效
关于css:TypeError-thisgetOptions-is-not-a-function
关于css:css盒模型的一些知识
关于css:Service-Workers-JavaScript-API-简介