你不可不知的几个CSS高级小技巧

文章目录

  • 精灵图
  • 字体图标
    • 字体图标的产生
    • 字体图标的优点
    • 使用
      • 字体图标下载
      • 第一步:引入项目下面生成的 fontclass 代码:
      • 第二步:挑选相应图标并获取类名,应用于页面:
  • CSS三角
  • CSS用户界面样式
    • 什么是界面样式?
  • vertical-align属性应用
    • 解决图片底部默认空白缝隙问题
  • 溢出的文字省略号显示
  • 常见布局技巧
    • margin负值的巧妙应用
    • 巧妙运用行内块元素
    • CSS三角强化
    • CSS初始化

精灵图

  • 为什么要使用精灵图(雪碧图)?

一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁的接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,为了有效的减少服务器接收和发送请求的次数,出现了CSS精灵技术(也成CSS Sprites 、CSS 雪碧)。

  • 核心原理:将网页中的一些小背景图像整合到一张大的图片中,这样服务器只需要一次请求就可以了。

  • 使用核心:

    • 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
    • 这个大图片也称为sprites 精灵图或雪碧图。

我们来看一下王者荣耀官网的精灵图是什么样子的。

首先打开王者荣耀官网。你不可不知的几个CSS高级小技巧_第1张图片

F12打开源代码,选中右边的“下载游戏”然后在Style中看到图片的url,右键在新的页面中打开。

你不可不知的几个CSS高级小技巧_第2张图片

我们就看到王者荣耀官网的雪碧图是什么样子的了。

使用的时候主要通过移动背景图片的位置,此时可以使用background-position

移动的距离就是这个目标图片的x和y坐标。

一般情况下,往上往左移动都是负值。

使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。

  • 总结:
    • 精灵图主要针对于背景图片使用。
    • 主要借助于背景位置使用:background-position
    • 注意网页中的x轴向左y轴向下,要想向上向左移动,坐标是负值。

当我们要显示一个小的背景图片时,只需要测量出它的坐标就可以使用了。

你不可不知的几个CSS高级小技巧_第3张图片


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图使用title>
    <style>
        .box {
            width: 60px;
            height: 60px;
            margin: 50px auto;
            background: url(images/index.png);
            background-position: -182px 0;

        }
    style>
head>

<body>
    <div class="box">

    div>
body>

html>

你不可不知的几个CSS高级小技巧_第4张图片

字体图标

字体图标的产生

  • 字体图标使用场景:主要用于显示网页中通用、常用的一些小图标。
  • 精灵图是有诸多优点的,但是缺点也很明显:
    • 图片文件还是比较大的
    • 图片本身放大和缩小会失真
    • 一旦图片制作完毕想要更换非常复杂
  • 此时,有一种技术的出现很好的解决了以上问题,就是字体图标iconfont

字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体

字体图标的优点

  • 轻量级:一个图标字体要比一些列的图像小。一旦字体加载了,图标就会马上渲染出来,减少了服务器的请求。
  • 灵活性:本质是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等。
  • 兼容性:几乎支持所有浏览器,请放心使用。
  • 注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化。

总结

  1. 如果遇到一些结构和样式比较简单的小图标,就用字体图标。
  2. 如果遇到一些结构样式比较复杂的小图片,就用精灵图。

使用

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

  1. 字体图标的下载。
  2. 字体图标的引入(引入到html页面中)
  3. 字体图标的追加(以后添加新的小图标)

字体图标下载

推荐网站:

icomoon字库

阿里iconfont字库

使用阿里妈妈下载需要拥有github账号或者新浪微博账号,然后就可以免费使用了。

你不可不知的几个CSS高级小技巧_第5张图片

选择好对应的字体图标添加到收藏,然后一起下载下来。

你不可不知的几个CSS高级小技巧_第6张图片

将下载好的文件夹导入根目录下,用link标签引入CSS文件,然后输入指定的类名就可以使用了。

第一步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="./iconfont.css">

第二步:挑选相应图标并获取类名,应用于页面:

<span class="iconfont icon-xxx">span>

你不可不知的几个CSS高级小技巧_第7张图片

CSS三角

网页中我们经常看到盒子旁边有一个小三角,像小米官网首页这个这样:

你不可不知的几个CSS高级小技巧_第8张图片

我们来看看这是如何制作的呢?

.box1 {
  width: 0;
  height: 0;
  border-top: 10px solid pink;
  border-right: 10px solid purple;
  border-bottom: 10px solid blue;
  border-left: 10px solid burlywood;
}

当我们给一个盒子设置宽度高度都是0,然后设置四个边框。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hQzm7DS6-1593576240026)(/Users/mac/Desktop/MarkDown /CSS高级技巧/10.jpg)]

我们再将三个边框设置成透明的试试。

.box2 {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: skyblue;
  margin: 100px auto;
}

你不可不知的几个CSS高级小技巧_第9张图片

看到了中间一个蓝色的小三角,方向也可以将border-top更改成其他的来控制。


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css三角title>
    <style>
        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }

        .jd span {
            position: absolute;
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;

            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: red;
        }
    style>
head>

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

html>

你不可不知的几个CSS高级小技巧_第10张图片

我们只需要再用定位来确定一下小三角的位置就可以了。

CSS用户界面样式

什么是界面样式?

  • 所谓界面样式,就是更改一些用户操作样式,以便提高用户体验。
    • 更改用户的鼠标样式
    • 表单轮廓
    • 防止表单域拖拽
  • 鼠标样式cursor
属性值 描述
default 小白 默认
pointer 小手
move 移动
text 文本
not-allowed 进制

<html lang="en">

<head>
    <meta charset="UTF-8">
    <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>

你不可不知的几个CSS高级小技巧_第11张图片

  • 轮廓线 outline

我们正常写一个表单会有默认的边框,而一般网页都没有这个边框。

你不可不知的几个CSS高级小技巧_第12张图片

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


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式title>
    <style>
        input {
            outline: none;
        }
    style>
head>

<body>
    <ul>
        <input type="text">
    ul>
body>

html>

你不可不知的几个CSS高级小技巧_第13张图片

  • 防止拖拽文本域 resize

我们的正常使用文本框textarea右下角会有一个拖拽按钮,可以进行拖拽。

你不可不知的几个CSS高级小技巧_第14张图片

而一般网页中都要防止这个拖拽。

我们只需要添加resize:none就可以防止拖拽了。


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式title>
    <style>
        textarea {
            resize: none;
        }
    style>
head>

<body>
    <ul>
        <textarea name="" id="" cols="30" rows="10">textarea>
    ul>
body>

html>

你不可不知的几个CSS高级小技巧_第15张图片

vertical-align属性应用

使用场景:经常用于设置图片或者表单(行内元素)和文字垂直对齐。

官方解释:用于设置一个元素的垂直对齐方式,但是它只针对行内元素或者行内块元素有效。

语法:vertical-align: baseline|top|middle|bottom

描述
baseline 默认。元素放在父元素的基线上。
top 把元素的顶端与行中最高元素的顶端对齐。
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。

你不可不知的几个CSS高级小技巧_第16张图片

给图片设置了vertical-align: bottom之后:

你不可不知的几个CSS高级小技巧_第17张图片

设置了vertical-align: middle之后:

你不可不知的几个CSS高级小技巧_第18张图片

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

bug:图片地测会有一个空白的缝隙,原因是行内块元素默认会和文字的基线对齐。

你不可不知的几个CSS高级小技巧_第19张图片

主要的解决方法有两种:

  1. 给图片添加vertical-align: middle | top |bottom(提倡使用)

你不可不知的几个CSS高级小技巧_第20张图片

  1. 把图片转换成块元素display :block

溢出的文字省略号显示

你不可不知的几个CSS高级小技巧_第21张图片

一这是常见一种高级技巧,文字填充不下用省略号代替。

  1. 单行文本溢出省略号。
    • 必须满足三个条件:
    • 先强制一行内显示文本:white-space: nowrap(默认normal自动换行)
    • 超出部分隐藏:overflow: hidden
    • 文字用省略号代替超出部分:text-overflow: ellipsis

<html lang="en">

<head>
    <meta charset="UTF-8">
    <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: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    style>
head>

<body>
    <div>
        啥也不说了,此处省略一万字!
    div>
body>

html>

你不可不知的几个CSS高级小技巧_第22张图片

  1. 多行文本溢出显示省略号

多行文本溢出显示省略号,有较大的兼容问题,适合用于webKit浏览器或移动端(移动端大部分是webkit内核)

overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient: vertical;

你不可不知的几个CSS高级小技巧_第23张图片

常见布局技巧

margin负值的巧妙应用

当我们写边框的时候有重叠问题


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>...title>
    <style>
        ul li {
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;

        }
    style>
head>

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

html>

你不可不知的几个CSS高级小技巧_第24张图片

我们只需要添加一行:margin-left: -1px就可以隐藏掉,只显示1px边框了。

你不可不知的几个CSS高级小技巧_第25张图片

如果需要添加鼠标移入边框变色的效果,可以通过设置相对定位或者添加z-index属性来完成。

ul li:hover {
  position: relative;
  border: 1px solid blue;
}
ul li:hover {
  z-index: 1;
  border: 1px solid blue;
}

你不可不知的几个CSS高级小技巧_第26张图片

巧妙运用行内块元素

给父元素添加text-align: center其中所有的行内块元素都会水平居中对齐。


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>...title>
    <style>
        .box {
            text-align: center;
        }

        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #cccccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333333;
            font-size: 14px;
        }

        .box .prev,
        .box .next {
            width: 85px;
        }

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

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

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

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

html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7siNzqur-1593576240040)(/Users/mac/Desktop/MarkDown /CSS高级技巧/28.jpg)]

CSS三角强化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CzjINgsN-1593576240041)(/Users/mac/Desktop/MarkDown /CSS高级技巧/29.jpg)]

类似京东中的这类的制作用到了CSS三角强化。


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>...title>
    <style>
        .box {
            width: 0;
            height: 0;
            border-top: 100px solid transparent;
            border-right: 50px solid red;
            border-bottom: 0;
            border-left: 0;

        }
    style>
head>

<body>
    <div class="box">

    div>
body>

html>

你不可不知的几个CSS高级小技巧_第27张图片

我们只需要将左边和下面的边框宽度设置为0,将上边框的宽度调大。

简写:

border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;

再设置位置即可。

实例:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>...title>
    <style>
        .price {
            width: 200px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;

        }

        .miaosha {
            position: relative;
            float: left;
            width: 110px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #ffffff;
            font-weight: 700;
            margin-right: 15px;
        }

        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #ffffff 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="price">
        <span class="miaosha">
            ¥2297.00
            <i>i>
        span>
        <span class="origin">
            ¥3999.00
        span>
    div>

body>

html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y5e1VTRC-1593576240042)(/Users/mac/Desktop/MarkDown /CSS高级技巧/31.jpg)]

CSS初始化

不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS进行初始化。

简单理解:CSS初始化是指重设浏览器样式(CSS reset)。

我们打开京东网页的源代码,看看人家的初始化设置:

你不可不知的几个CSS高级小技巧_第28张图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HUixWD0Q-1593576240044)(/Users/mac/Desktop/MarkDown /CSS高级技巧/33.jpg)]

复制粘贴过来,再加点注释:

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

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

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

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

a:hover {
    color: #c81623
}

button,
input {
    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)