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

3次阅读

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

显示与暗藏

    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: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: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>

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

精灵图呈现的目标

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

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

名字为 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 内边距

留神的几点

a 负责左侧背景 span 负责右侧背景有 padding 撑开适合宽度
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>

注意事项

没合并之前

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

合并之后的边框

定位能够将盒子晋升到最高处
通过 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>

步骤如下

宽高全为 0
须要的三角形要保留色彩，不须要的三角形能够色彩设为通明即可
关照兼容性，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:学习CSS行内样式

关于css:横向滚动的flex布局-最右侧marginright-失效

关于前端:前端基础面试题HtmlcssJavascript1

关于css:巧用-webkitboxreflect-倒影实现各类动效

关于flutter:flutter安装过程中的问题

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

元素的显示与暗藏

display 显示（暗藏）

visibility(显示与暗藏)

overflow(元素的显示与暗藏)

显示与暗藏的总结

显示与暗藏案例

CSS 用户界面款式

鼠标款式

轮廓线

避免文本域拖拽

用户界面款式总结

垂直居中

去除图片缝隙的两种办法

文字省略形式

精灵技术

如何制作精灵图内呢

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

如何制作本人的精灵图

滑动门技术

微信导航栏案例

margin 负值之美

利用 margin 负值能够合并边框

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

css 三角之美

案例

三角形案例

站内搜索