css高级技巧

一元素的显示与隐藏

1）display实现

display:none;  //隐藏元素
display:block; //显示元素

display:block; 不光有转换块元素的功能，还有显示的功能

特点：隐藏元素 不保留位置

2）visibility实现

visibility  [ˌvɪzəˈbɪləti] 可见性
visible  [ˈvɪzəbl]  adj.看得见的;可见的;明显的;能注意到的

visibility: hidden;  // 1 隐藏
visibility: visible; // 2 显示

特点：隐藏元素 保留位置

3）overflow 溢出

4）三种溢出总结

5）小案例练手

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*1 父盒子里面原来就有一个黑色半透明的盒子 刚开始隐藏起来了*/
        .box {
            position: relative;
            height: 222px;
            width: 220px;
            margin: 50px auto;
        }
        .mask {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 222px;
            height: 220px;
            background: rgba(0,0,0,.3) url(image/arr.png) no-repeat center center;
        }
        /*2 当鼠标经过的时候 让黑色半透明盒子显示*/
        .box a:hover .mask {
            display: block;
        }
    </style>
</head>
<body>
<div class="box">
    <a href="">
        <div class="mask"></div>
        <img src="image/3.jpg">
    </a>
</div>
</body>
</html>

效果: 鼠标滑动的时候显示遮罩层和播放按钮

二更改用户样式

1）改变光标样式 cursor

<ul>
    <li style="cursor: default">默认 小白箭头样式</li>
    <li style="cursor: pointer">小手样式</li>
    <li style="cursor: move">四个箭头移动样式</li>
    <li style="cursor: text">表单输入焦点样式</li>
    <li style="cursor: not-allowed">禁止输入样式</li>
</ul>

2）input的轮廓线

<input style="outline: none|0" type="text"/> //去除轮廓线

3）防止拖拽文本域

<textarea style="resize: none" rows="5" cols="5">

4）用户样式总结

三垂直居中 vertical-algin

块元素水平居中：margin: 0 auto;

文字水平居中：text-algin: center;

行内元素和行内块元素垂直居中 vertical-align: middle [ 对块元素不起作用 ]

参数值

baseline  //1 基线对齐 [ 默认值 ]
top       //2 顶线对齐
middle    //3 中线对齐
bottom    //4 底线对齐

<div>
    <!--让图片的顶线 和 文字的顶线对齐  -->
    <img src="image/3.jpg" style="vertical-align: top">woshiggegedkjgfdj
</div>
<div>
    <!--让图片的中线 和 文字的中线对齐  -->
    <img src="image/3.jpg" style="vertical-align: middle">woshiggegedkjgfdj
</div>
<div>
    <!--让图片的底线 和 文字的底线对齐  -->
    <img src="image/3.jpg" style="vertical-align: bottom">woshiggegedkjgfdj
</div>

<div style="border: #00A3FA solid 1px;">
    <img src="image/3.jpg" style="vertical-align: middle">
</div>

四溢出文本省略号

white-space
normal 一行显示不开的时候，自动换行 [ 默认 ]
pre    用等宽字体显示预先格式化的文本。
nowrap 强制在一行显示文本 直到文本结束 或 遇到 br 才换行

三部曲

//1 先强制在一行内显示文本
white-space: nowrap;

//2 超出部分隐藏
overflow: hidden

//3 文字用省略号替代超出的部分
text-overflow: ellipsis;

代码实现

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 30px;
            background: pink;
            white-space: nowrap;//第一步
            overflow: hidden;//第二步
            text-overflow: ellipsis;//第二步
        }
    </style>
</head>
<body>
<div class="box">你好 世界，我将保持初心，保持善良</div>
</body>
</html>

五精灵技术 [ 重要 ]

网页中的 X轴向右向左是负值

网页中的Y轴向下向上是负值

六滑动门

七负值的应用

1）margin负值 + 定位实现定位盒子垂直或水平居中

2）压住盒子相邻边框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>压住盒子相邻边框</title>
    <style>
        div {
            float: left;
            margin-left: -1px;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

原理：
1 所有的盒子必须有浮动属性,因为浮动的盒子是紧贴在一起的
2 第一个盒子向左移动-1像素后，后面的盒子因为有浮动属性，赶紧贴了过了
3 后面的盒子又执行了向左-1px，所有才能压住左边盒子的右边框

2）鼠标滑过显示一个有颜色的边框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标经过显示有颜色的边框</title>
    <style>
        div {
            float: left;
            margin-left: -1px;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
        div:hover {
            position: relative;
            border: #00A3FA 1px solid;
            /*当我们鼠标经过的时候 右侧的边框被-1压住了*/
            /*解决思路：我们让当前盒子升上来 压住右侧的盒子*/
            /*定位>浮动>标准流 所以我们添加浮动属性*/
            /*浮动只能添加相对定位 因为需要保留盒子的位置*/
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

都是浮动的盒子，我们给想突出显示的盒子添加定位，它的层级就比浮动的高

都是有定位的盒子，我们给想突出显示的盒子设置 Z轴数值 z-index

八三角

p {
/*宽度高度必须填写*/
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color:  transparent transparent transparent red;
/*为了照顾兼容性 添加一下两条*/
font-size: 0;
line-height: 0;
}

<p></p>

京东三角

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 200px;
            height: 50px;
            background: pink;
            margin: 100px auto;
        }
        p {
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -10px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px;
            border-color: transparent transparent brown transparent;
            font-size: 0;
            line-height: 0;
        }
    </style>
</head>
<body>
<div>
    <p></p>
</div>
</body>
</html>

posted @ 2021-01-28 10:42 棉花糖88 阅读(76) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

棉花糖88

css高级技巧

公告