目录

一、精灵图

1.为什么需要精灵图

2.精灵图使用

二、字体图标

1、字体图标的下载

2、字体图标的引入

 3、字体图标的追加

四、CSS用户界面样式

1.鼠标样式

2.表单轮廓线outline

3.防止拖拽文本域

五、vertical-align属性应用

六、溢出的文字省略号显示

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

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

七、常见布局技巧

1.margin负值的运用

2.文字围绕浮动元素

 3.行内块巧妙运用

4.CSS三角强化

 八、CSS初始化

一、精灵图

1.为什么需要精灵图

  • 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术

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

2.精灵图使用

使用精灵图的核心：

  1. 精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中
  2. 这个大图片也称为 sprites 精灵图 或者 雪碧图
  3. 移动背景图片的位置，此时可以使用 background-position
  4. 移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同（x轴右边走是正值，左边走是负值，y轴下边走是正值，上边走是负值）
  5. 一般情况下都是往上往左移动，所以数值是负值
  6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
<!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>Document</title>
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            margin: 100px auto;
            /*background: url(img/sprites.png);
            background-position: -182px 0;*/
            background: url(img/sprites.png) no-repeat -182px 0;
        }

        .box2 {
            width: 27px;
            height: 27px;
            margin: 200px;
            background: url(img/sprites.png) no-repeat -155px -106px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

精灵图的优点很多，但是缺点也很明显

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

此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont

二、字体图标

字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。展示的是图标，本质属于字体

  • 优点：

轻量级：一个图标字体比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求
灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等
兼容性：几乎支持所有的浏览器

📢：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化

总结：

如果遇到简单的结构和样式简单小图标，用字体图标

如果遇到结构和样式复杂的小图片，用精灵图

  • 步骤：

字体图标的下载
字体图标的引入(引入到我们html页面中)
字体图标的追加(以后添加新的小图标)


1、字体图标的下载

  1. icomoon字库

    外网，不需要登录即可下载 http://icomoon.io

    • 点击 IcoMoon App
    • 选择需要的图标
    • 点击Generate Font
    • 点击 下载

  2. 阿里iconfont字库

    免费，但是需要登录 iconfont-阿里巴巴矢量图标库

2、字体图标的引入

我们以 icomoon 字库网为例，将下载包解压，解压之后的文件如图：

Icon Font & SVG Icon Sets ❍ IcoMoon

 生成之后点击download

1.把下载包里面的 fonts 文件夹放入页面根目录下

 2.在CSS样式中全局声明字体：简单理解把这些字体通过css引入到我们页面中

右键打开 style.css，复制如图代码引入我们自己的CSS文件中

 3.html标签内添加小图标

我们打开解压文件中的 demo.html ，复制想要的图标，粘贴进 <span></span>标签中

 mac不显示小框框，直接复制即可

 4.给标签定义字体

span {
            font-family: 'icomoon';
            font-size: 100px;
            color: pink;
        }

注意：标签中的 font-family 的值和我们之前引入字体图标的font-family 必须一样，这里均为 icomoon（如果上面改为pink,下面也是pink）

<!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>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?aoa0ns');
            src: url('fonts/icomoon.eot?aoa0ns#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?aoa0ns') format('truetype'),
                url('fonts/icomoon.woff?aoa0ns') format('woff'),
                url('fonts/icomoon.svg?aoa0ns#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>
</body>
</html>

效果

 3、字体图标的追加


如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
以 icomoon字库 网为例，点击网站内import icons

 

 


把压缩包里面的 selection.json 重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可。

 三、CSS三角

盒子宽高是0，指定边框，边框实际为三角形

div{

width：0；

height:0;

/*下面两句为了兼容问题*/

line-height:0;

font-size：0；

border: 50px solid transparent;

border-left-color: green;

}

<!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>Document</title>
</head>
<style>
    .box1 {
        width: 0;
        height: 0;
        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: 50px solid transparent;
        border-left-color: green;
        margin: 100px 0;
    }

    .jd {
        position: relative;
        width: 120px;
        height: 249px;
        background-color: pink;
    }

    .jd span {
        position: absolute;
        right: 15px;
        top: -10px;
        /*boder是5*/
        width: 0;
        height: 0;
        /*照顾兼容性*/
        line-height: 0;
        font-size: 0;
        border: 5px solid transparent;
        border-bottom-color: pink;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="jd">
        <span></span>
    </div>
</body>
</html>

四、CSS用户界面样式

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

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

1.鼠标样式

  • 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
li {
    cursor: pointer; 
}

2.表单轮廓线outline

轮廓线outline：

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

input { outline: none; }

3.防止拖拽文本域

防止拖拽文本域resize

textarea { resize: none; }

五、vertical-align属性应用

vertical-align:

  • 使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
  • 官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效
vertical-align: baseline | top | middle | bottom

让图片和文字垂直居中，修改的是img或者textarea属性,行内块元素都可以

图片底侧空白缝隙解决

  • bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐（给图片加边框就可以看见）

 

主要解决办法有两种：

  1. 给图片添加 vertical-align : middle | top |bottom 等（推荐）

  2. 把图片转换为块级元素 display:block;，因为块级元素不会有vertical-align 属性

六、溢出的文字省略号显示

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

必须满足三个条件：

/* 1.先强制一行内显示文本 */
white-space: nowrap; 		/*默认 normal 是自动换行，nowrap是强制一行显示文本*/

/* 2.超出的部分隐藏 */
overflow: hidden;

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

<!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>Document</title>
</head>
<style>
    div {
        width: 150px;
        height: 80px;
        background-color: pink;
        margin: 100px auto;
        /*换行*/
        /*white-space: normal;*/
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<body>
    <div>
        啥也不说，此处省略一万字
    </div>
</body>
</html>

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

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

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

第2行就可以展示省略号

七、常见布局技巧

1.margin负值的运用

  • 两个盒子加边框1px，浮动，贴紧会出现 1 + 1 = 2px
  • 给右边盒子添加margin-left: -1px
  • 正数向右边走，负数向左边走
  1. 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框
  2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可
    • 如果没有定位，则加相对定位(保留位置)
    • 如果有定位，则加 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>Document</title>
</head>
<style>
    ul li {
        position: relative;
        float: left;
        list-style: none;
        width: 150px;
        height: 200px;
        border: 1px solid red;
        margin-left: -1px;
    }

    /*ul li:hover{
        1.如果li没有定位,鼠标经过添加相对定位
        position: relative;
        border: 1px solid blue;
    }*/
    ul li:hover {
        /*2.如果li有定位，则利用z-index提高层级*/
        z-index: 1;
        border: 1px solid blue;
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

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>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

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

    .pic {
        /*左边盒子浮动*/
        float: left;
        height: 157px;
        width: 226px;
        margin-right: 5px;
    }

    .pic img {
        width: 100%;
    }
</style>
<body>
    <div class="box">
        <div class="pic">
            <img src="img/图层2.png" alt="">
        </div>
        <p>比较快不愉快VB采用无多擦VB我饿预测误差不饿完不成</p>
    </div>
</body>
</html>

 3.行内块巧妙运用

页码在页面中间显示：

  1. 把这些链接盒子转换为行内块，之后给父级指定 text-align: center.给父元素添加后，子所有行内元素和行内块元素都会水平居中

  2. 利用行内块元素中间有缝隙，并且给父级添加 text-align: center ，行内块元素会水平居中

<!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>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        text-align: center;
    }

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

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

4.CSS三角强化

width:0
height:0
border-color:transparent red transparent transparent
border-style:solid
border-width:22px 8px 0 0

直角三角效果

<!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>Document</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /*把上边框宽度调大*/
            border-top: 100px solid transparent;
            border-right: 50px solid red;
            /*左边和下边边框宽度设置为0*/
            border-bottom: 0px solid blue;
            border-left: 0px solid green;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

 八、CSS初始化

中文字体名称哟个unicode编码代替

黑体 \9ED1\4F53

宋体 \5B8B\4F53

微软雅黑 \5FAE\8F6F\96C5\9ED1

更多推荐

【CSS】笔记6-精灵图、字体图标、界面样式、vertical-align、溢出显示、布局技巧