CSS高级技巧学习

2022/2/13 23:15:55

编程Tag： 图标 css 技巧 width height 高级 color border Solid

本文主要是介绍CSS高级技巧学习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目录

  • 一、CSS高级技巧
  • 1. 精灵图
    • 1.1 为什么需要精灵图
    • 1.2 精灵图（sprites）的使用
    • 1.3 案例：拼出自己名字
  • 2. 字体图标
    • 2.1 字体图标的产生
    • 2.2 字体图标的优点
    • 2.3 字体图标的使用
      • 2.3.1 字体图标的下载
      • 2.3.2 字体图标的引入
      • 2.3.3 字体图标的追加
  • 3. CSS 三角
    • 3.1 案例：京东、小米三角
  • 4. CSS 用户界面样式
    • 4.1 什么是界面样式
    • 4.2 鼠标样式 cursor
    • 4.2 轮廓线 outline
    • 4.3 防止拖拽文本域 resize
  • 5. vertical-align 属性应用
    • 5.1 图片、表单和文字对齐
    • 5.2 解决图片底部默认空白缝隙问题
  • 6. 溢出的文字省略号显示
    • 6.1 单行文本溢出显示省略号——必须，满足三个条件
    • 6.2 多行文本溢出显示省略号
  • 7. 常见布局技巧
    • 7.1 margin负值的运用——防止边框重叠变粗
    • 7.2 文字浮动元素
    • 7.3 行内块巧妙运用
    • 7.4 CSS三角强化
  • 8. CSS 初始化

一、CSS高级技巧

1. 精灵图

1.1 为什么需要精灵图

请添加图片描述

1.2 精灵图（sprites）的使用

使用精灵图的核心：

  1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
  2. 这个大图片称为精灵图（sprites）
  3. 移动背景位置，此时可以使用background-position
  4. 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
  5. 因为一般情况下都是往上往左移动，所以数值是负值。（Tip： 网页中的坐标：x轴右边走是正值，左边走是负值。y轴下边走是正值，上边走是负值。）
  6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

1.3 案例：拼出自己名字

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼出自己名字案例</title>
    <style>
        span {
            /* 行内元素转换为行内块元素，使其既能在一行显示，又能设置高度宽度 */
            display: inline-block;
            background: url(images/abcd.jpg) no-repeat;
        }

        .s {
            width: 112px;
            height: 112px;
            background-position: -256px -419px;
        }

        .a {
            width: 108px;
            /* height: 120px; 字母A无需移动 */
        }

        .l {
            width: 102px;
            height: 115px;
            background-position: 0 -274px;
        }

        .t {
            width: 103px;
            height: 117px;
            background-position: -368px -413px;
        }
    </style>
</head>

<body>
    <span class="s"></span>
    <span class="a"></span>
    <span class="l"></span>
    <span class="t"></span>
</body>

</html>

在这里插入图片描述

2. 字体图标

2.1 字体图标的产生

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点也很明显。

  1. 图片文件还是比较大的。
  2. 图片本身放大或缩小会失真。
  3. 一旦图片制作完成想要更换会非常复杂。

此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

2.2 字体图标的优点

请添加图片描述

2.3 字体图标的使用

字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用可以分为：

  1. 字体图标的下载
  2. 字体图标的引入（引入到我们html页面中）
  3. 字体图标的追加（以后添加新的小图标）

2.3.1 字体图标的下载

请添加图片描述

2.3.2 字体图标的引入

请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标使用</title>
    <style>
        /* 字体声明 */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?iqepak');
            src: url('fonts/icomoon.eot?iqepak#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?iqepak') format('truetype'),
                url('fonts/icomoon.woff?iqepak') format('woff'),
                url('fonts/icomoon.svg?iqepak#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: 'icomoon';
            font-size: 100px;
            color: pink;
        }
    </style>
</head>

<body>
    <span></span>
    <span></span>
    <span></span>
</body>

</html>

在这里插入图片描述

2.3.3 字体图标的追加

请添加图片描述

3. CSS 三角

请添加图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三角制作</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green; /* 三角形朝右 */
        }

        .box2 {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

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

</html>

在这里插入图片描述

3.1 案例：京东、小米三角

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东、小米三角制作</title>
    <style>
        div {
            display: inline-block;
        }

        .jd {
            /* 子绝父相 */
            position: relative;
            width: 120px;
            height: 200px;
            background-color: pink;
            margin: 100px 200px;
        }

        .jd span {
            /* 绝对定位 */
            position: absolute;
            /* 边框的高度是 7px*2=14px */
            right: 15px;
            top: -14px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 7px solid transparent;
            border-bottom-color: pink;
        }

        .xm {
            /* 子绝父相 */
            position: relative;
            width: 150px;
            height: 200px;
            background-color: skyblue;
            margin: 100px auto;
        }

        .xm span {
            /* 绝对定位 */
            position: absolute;
            /* 边框的高度是 7px*2=14px */
            right: -13px;
            top: 14px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 7px solid transparent;
            border-left-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="jd">
        <span></span>
    </div>
    <div class="xm">
        <span></span>
    </div>
</body>

</html>

在这里插入图片描述

4. CSS 用户界面样式

4.1 什么是界面样式

所谓界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

  • 更改用户的鼠标样式
  • 表单轮廓
  • 防止表单域拖拽

4.2 鼠标样式 cursor

请添加图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户界面样式-鼠标样式</title>

</head>

<body>
    <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>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.2 轮廓线 outline

给表单添加 outline：0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

input { outline: none; }

4.3 防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的。

textarea {resize: none; }

5. vertical-align 属性应用

请添加图片描述
请添加图片描述

5.1 图片、表单和文字对齐

请添加图片描述

5.2 解决图片底部默认空白缝隙问题

请添加图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片底部默认空白缝隙解决方案</title>
    <style>
        div {
            border: 2px solid red;
        }

        .next {
            vertical-align: bottom;
        }
    </style>
</head>

<body>
    <div>
        <img src="images/yy.jpg" alt="">喻言yu_yan是我家大宝贝
    </div>
    <div>
        <img src="images/yy.jpg" alt="" class="next">喻言yu_yan是我家大宝贝
    </div>
</body>

</html>

在这里插入图片描述

6. 溢出的文字省略号显示

请添加图片描述

6.1 单行文本溢出显示省略号——必须，满足三个条件

请添加图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单行溢出文字显示省略号</title>
    <style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 下面这行代码意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1. 下面这行代码意思是如果文字显示不开也强制一行内显示 */
            white-space: nowrap;
            /* 2. 溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号显示 */
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div>
        啥也不说，此处省略一万字
    </div>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

6.2 多行文本溢出显示省略号

因兼容性的问题，很少使用，了解一下就好
请添加图片描述
Tip： 要严格控制盒子的大小，如果只显示两行文字则盒子的高度要设置成恰好只能显示两行的文字
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

7. 常见布局技巧

巧妙利用一个技术更快更好的布局：

  1. margin负值的运用
  2. 文字围绕浮动元素
  3. 行内块的巧妙运用
  4. css三角强化

7.1 margin负值的运用——防止边框重叠变粗

请添加图片描述

  • 让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
  • 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin负值的巧妙运用</title>
    <style>
        ul li {
            position: relative;
            /* 小li是依次浮动的 */
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        /* ul li:hover {
            1. 如果盒子没有定位，则鼠标经过添加相对定位 占有位置
            position: relative;
            border: 1px solid blue;
        } */
        ul li:hover {
            /* 2. 如果li都有定位，则利用z-index提高层级 */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

请添加图片描述

7.2 文字浮动元素

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字围绕浮动元素的妙用</title>
    <style>
        /* 清除盒子默认的内外边距 */
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 70px;
            background-color: pink;
            margin: 100px auto;
            padding: 5px;
        }

        .pic {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;
        }

        .pic img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 用个盒子装着图片是为了后期更易找到位置更换图片 -->
        <div class="pic">
            <img src="images/img.png" alt="">
        </div>
        <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
    </div>
</body>

</html>

在这里插入图片描述

7.3 行内块巧妙运用

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内块巧妙运用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            text-align: center;
        }

        .box a {
            /* 转换为行内块元素 */
            display: inline-block;
            width: 36px;
            height: 36px;
            background: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

        /* 要注意权重问题 */
        .box .prev,
        .box .next {
            width: 85px;
        }

        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }

        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }

        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

</html>

在这里插入图片描述

7.4 CSS三角强化

请添加图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三角强化的巧妙运用</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* 把上边框宽度调大 */
            /* border-top: 100px solid transparent;
            border-right: 50px solid red; */
            /* 左边和下边的边框宽度设置为0 */
            /* border-bottom: 0 solid blue;
            border-left: 0 solid green; */
            /* 1.只保留右边的边框有颜色 */
            border-color: transparent red transparent transparent;
            /* 2. 样式都是solid */
            border-style: solid;
            /* 3. 上边框宽度调大，右边框宽度稍小，其余边框为0 */
            border-width: 100px 50px 0 0;
        }

        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .miaosha {
            /* 子绝父相 */
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }

        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;

        }

        .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="price">
        <span class="miaosha">
            ￥1650
            <i></i>
        </span>
        <span class="origin">￥5088</span>
    </div>
</body>

</html>

在这里插入图片描述

8. CSS 初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化
简单理解：CSS初始化是指重设浏览器的样式。（也称CSS reset）
每个网页都必须首先进行CSS初始化。
这里我们以 京东CSS初始化代码为例。
请添加图片描述

/* 所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉 li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当鼠标经过button 按钮的时候,鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}


这篇关于CSS高级技巧学习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程