CSS的一些高级技巧

一、精灵图

1.为什么需要精灵图？

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

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

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

2.精灵图（sprites）的使用

使用精灵图的核心内容：

（1）精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。

（2）这个大图片也成为了精灵图或者雪碧图。

（3）移动背景图片位置，此时可以使用background-position。

（4）移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。x坐标轴向右为正，y坐标轴向下为正。

（5）因为一般情况下都是往上往左移动，所以数值是负值。

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

<style>.box1 {width: 60px;height: 60px;margin: 100px auto;background: url(images/sprites.png) no-repeat -182px 0;/* background-position: -182px 0; */}.box2 {width: 27px;height: 25px;margin: 200px auto;background: url(images/sprites.png) no-repeat -155px -106px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>

总结：

1.精灵图主要针对于小的背景图片使用。

2.主要借助于背景位置来实现--background-position。

3.一般情况下精灵图都是负值。（千万注意网页中的坐标：x轴右边走是正，y轴向下为正。

二、字体图标

1.字体图标的产生

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

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

（1）图片文件还是比较大的；

（2）图片本身放大和缩小会失真。

（3）一旦图片制作完毕想要更换非常复杂。

因此，字体图标iconfont的出现解决了这一问题。

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

2.字体图标的优点

轻量级:一个图标字体要比一系列的图标要小.一旦字体加载了,图标就会马上渲染出来,减少了服务器的请求.

灵活性:本质其实是文字,可以很随意的改变颜色,产生阴影、透明效果、旋转等。

兼容性：几乎支持所有的浏览器，请放心使用。

*注意：

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

3.推荐下载网站：

（1）icomoon字库 http://icomoon.io

IcoMoon成立于2011年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使他们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开较慢。

（2）阿里iconfont字库 http://iconfont.cn/

这个是阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图表上传生成。重点是，

4.字体图标的引入：

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

（2）在css样式中全局声明字体：简单理解就是把这些字体文件通过CSS引入到页面中。一定注意字体文件路径的问题。

*方式：

@font-face {

font-family: 'icomoon';

src: url('fonts/icomoon.eot?p4ssmb');

src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),

url('fonts/icomoon.ttf?p4ssmb') format('truetype'),

url('fonts/icomoon.woff?p4ssmb') format('woff'),

url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');

font-weight: normal;

font-style: normal;

}

以icomoon字库为例：

1.进入主页

2.进入网站后选取自己想要的文字图标

3.我们选中的图标就都在这里了，点击下载

4.下载解压后，将fonts文件夹复制到页面根目录下：

5.引入图标

回到图标库，复制自己想要的图标，到自己写的页面上，通过下面的代码引入。

<style>@font-face {font-family: 'icomoon';src:  url('fonts/icomoon.eot?iwkhcf');src:  url('fonts/icomoon.eot?iwkhcf#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?iwkhcf') format('truetype'),url('fonts/icomoon.woff?iwkhcf') format('woff'),url('fonts/icomoon.svg?iwkhcf#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}
span {font-family: 'icomoon';font-size: 100px;color: aqua;
}</style>
</head>
<body><span></span>
</body>

效果如图：

总结：

1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。

2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

字体图标是一些网页常见的小图标，我们可以直接在网上下载。

三、用户界面样式

1.什么是界面样式？

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

2.鼠标样式 cursor

*方法：

li {

cursor：position；

}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

参数:

default 　　小白箭头默认；

pointer 　　小手；

move 　　移动；

text 　　文本；

not-allowed 禁止；

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

3.轮廓线 outline

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

input {

　　outline：none；

　　}

4.防止拖拽文本域

给文本域添加resize：none；就可以防止文本域被拖拽。

<style>input,textarea {outline: none;}textarea {resize: none;}</style>
</head>
<body><input type="text"><textarea name="" id="" cols="30" rows="10"></textarea>
</body>

四、CSS三角制作

利用css制作三角形：

如果一个盒子高度和宽度都是0时，给他添加一个边框，效果如图：

<style>.box1 {width: 0;height: 0;/* border: 10px solid pink; */border-top: 10px solid pink;border-bottom: 10px solid red;border-left: 10px solid blue;border-right: 10px solid green;}
</head>
<body><div class="box1"></div>
</body>

由此我们可以想到利用这个原理来制作三角，原理就是想要那个方向的三角形，就把另外三条边框的颜色设为透明。

<style>.box2 {margin: 100px auto;width: 0;height: 0;border: 10px solid transparent;border-top-color: pink;}</style>
</head>
<body><div class="box2"></div>
</body>

效果如图：

可以通过改变边框线的大小改变三角的大小。

五、vertical-align属性

CSS的 vertical-align属性的使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

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

*语法：

vertical-align：baseline|top|middle|bottom

参数：

baseline 　　默认。元素放置在父元素的基线上。

top 　　把元素的顶端与行中最高元素的顶端对齐。

middle 　　把此元素放置在父元素的中部。

bottom 　　把元素的顶端与行中最低的元素的顶端对齐。

图片和表单都属于行内块元素，默认的vertical-align是基线对齐。

<style>img {vertical-align: top;/* vertical-align: middle; *//* vertical-align: bottom; */}textarea {vertical-align: middle;}</style>
</head>
<body><img src="data:images/ldh.jpg" alt="">刘德华<textarea name="" id="" cols="30" rows="10"></textarea>请您留言
</body>

效果如图：

有这样一个bug：图片底部会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方案：

1.给图片添加vertical-align：middle|top|bottom等。（提倡使用的）

2.把图片转换为块级元素 display：block；

六、溢出文字省略号显示

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

单行文本溢出显示省略号--必须满足三个条件：

（1）先强制一行內显示文本

white-space:nowrap；（默认normal自动换行）

（2）超出的部分隐藏

overflow：hidden；

（3）文字用省略号代替超出的部分、

text-overflow:ellipsis；

<style>div {width: 150px;height: 80px;margin: 100px auto;background-color: skyblue;/* 这个单词的意思是如果文字显示不开，自动换行 *//* white-space: normal;  *//* 1.这个单词的意思是如果文字显示不开也必须强制到一行显示. */white-space: nowrap;/* 2.溢出部分隐藏起来 */overflow: hidden;/* 3.溢出部分用省略号显示 */text-overflow: ellipsis;}</style>
</head>
<body><div>哈哈哈哈哈哈哈哈哈哈或或或或，此处省略一万字</div>
</body>

效果如图：

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

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

主要步骤：

overflow：hidden；

text-overflow：ellipsis；

/*弹性伸缩盒子模型显示*/

display:-webkit-box;

/*限制在一个块元素显示的文本的行数*/

-webkit-line-clamp：2；

/*设置或检索伸缩盒对象的子元素的排列方式*/

-webkit-box-orient：vertical；

<style>div {width: 150px;height: 45px;background-color: skyblue;margin: 100px auto;overflow: hidden;text-overflow: ellipsis;/*弹性伸缩盒子模型显示*/display:-webkit-box;/*限制在一个块元素显示的文本的行数*/-webkit-line-clamp: 2;/*设置或检索伸缩盒对象的子元素的排列方式*/-webkit-box-orient: vertical;}</style>
</head>
<body>
<div>哈哈哈哈哈哈哈哈哈哈或或或或或，此处省略一百万个字，哈哈哈哈哈哈哈哈或
</div>
</body>

效果如图：

这个方法需要严格控制盒子大小。

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

CSS-一些高级技巧随学笔记相关推荐

黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的 ...
JavaScript基础教程速学笔记
JavaScript基础教程速学笔记 JavaScript简介 JavaScript 是 Web 的编程语言.(但是java与JavaScript的区别就是周杰与周杰伦的区别)所有现代的 HTML 页 ...
好程序员web前端分享CSS Bug、CSS Hack和Filter学习笔记
为什么80%的码农都做不了架构师?>>> CSS Bug.CSS Hack和Filter学习笔记 1)CSS Bug:CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在 ...
沈逸老师ubuntu速学笔记（2）-- ubuntu16.04下 apache2.4和php7结合编译安装,并安裝PDOmysql扩展...
1.编译安装apache2.4.20 1 第一步: ./configure --prefix=/usr/local/httpd --enable-so 2 第二步: make 3 第三步: sudo ...
一、css清除浮动方法学习笔记总结（超详细，简单易懂）
** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co ...
css+js+jq实训笔记
css+js+jq实训笔记 css第一天 css第二天 css第三天 css第四天 css第五天 css第六天 js第一天 js第二天 js第三天 js第四天 js第五天 js第六天 jq第一天 jq ...
C语言程序设计A重点,【艾学笔记】复习重点之C语言程序设计
原标题:[艾学笔记]复习重点之C语言程序设计 hello,大家好,欢迎来到小艾学习小组,想想暑假快到了,马上就要迎接期末考试了,大家对本学期新学的c语言程序设计有没有把握呢?面对充满逻辑数字的c语言, ...
Autoware感知瞎学笔记（一）lidar_kf_contour_track
Autoware感知瞎学笔记(一)lidar_kf_contour_track 目录代码分析: 一.雷达目标Kalman滤波器 1. lidar_kf_contour_track.cpp 2. li ...
数字图像学笔记——13. 图像退化与复原（退化函数的评估方法：观察法、实验法、数学建模法与湍流导致的退化）
在对受到多种原因影响的图像进行复原时,我们经常需要先行评估对图像质量产生影响的退化函数,有时甚至需要尝试建模.通过这些手段,能够最大程度上恢复图像上的噪音,并重建高清的图像细节. 文章目录线性位置不 ...

CSS-一些高级技巧随学笔记

CSS的一些高级技巧

一、精灵图

1.为什么需要精灵图？

2.精灵图（sprites）的使用

二、字体图标

1.字体图标的产生

2.字体图标的优点

3.推荐下载网站：

4.字体图标的引入：

三、用户界面样式

1.什么是界面样式？

2.鼠标样式 cursor

3.轮廓线 outline

4.防止拖拽文本域

四、CSS三角制作

五、vertical-align属性

六、溢出文字省略号显示

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

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

CSS-一些高级技巧随学笔记相关推荐

最新文章

热门文章

CSS-一些高级技巧 随学笔记

CSS的一些高级技巧

一、精灵图

1.为什么需要精灵图？

2.精灵图（sprites）的使用

二、字体图标

1.字体图标的产生

2.字体图标的优点

3.推荐下载网站：

4.字体图标的引入：

三、用户界面样式

1.什么是界面样式？

2.鼠标样式 cursor

3.轮廓线 outline

4.防止拖拽文本域

四、CSS三角制作

五、vertical-align属性

六、溢出文字省略号显示

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

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

CSS-一些高级技巧 随学笔记相关推荐

最新文章

热门文章

CSS-一些高级技巧随学笔记

CSS-一些高级技巧随学笔记相关推荐