一、精灵图
1、为什么要使用精灵图
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS的精灵技术。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
2、精灵图的使用核心
- 精灵技术主要针对背景图片使用，就是把多个小背景整合到一张大图片中。
- 这个大图片也称为 sprites 精灵图或者雪碧图。
- 移动背景图片位置，此时可以使用 background-position 。
- 移动的距离就是这个目标图片的x 和 y 坐标。注意网页中的坐标有所不同。x越往右越大，y越往下越大。
- 因为一般是往上往左移动，所以坐标数值是负值。
- 使用精灵图时需要精确测量，每个小背景图片的大小和位置。
<style>
.box1 {
width: 56px;
height: 56px;
background-image: url(images/sprites.png);
background-position: -184px 0;
}
</style>二、字体图标
1、为什么使用字体图标
使用场景：主要使用显示网页中通用、常用的一些小图标。
精灵图缺点很明显：
- 图片文件还是比较大的。
- 图片本身放大和缩小会失真。
- 一旦图片做完，更换非常困难。
字体图标 iconfont 很好地解决了以上问题。字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
优点：
- 轻量级：一个图标字体要比一系列的图像要小。图标会马上渲染出来，减少服务器请求。
- 灵活性：本质其实是文字，可以随意地改变颜色、产生阴影、透明效果、旋转等。
- 兼容性：几乎支持所有浏览器。
注意，字体图标并不能替代精灵技术，只是对工作中图标部分的技术提升和优化。
总结：
- 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
- 如果遇到一些结构和样式比较复杂的小图片，就用精灵图。
2、字体图标的使用
a.下载
下载网址：icomoon.io（谷歌） 或者 www.iconfont.cn（阿里巴巴）
注意，要把下载包里的 fonts文件夹 放在页面根目录下。
b.引入
字体声明 + 复制对应的特殊字体符号 + 指定字体icomoon（与字体声明中一致）
<style>
/* 字体声明 */
@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;
font-display: block;
}
span {
font-family: 'icomoon';
font-size: 40px;
color: pink;
}
</style>
<body>
/* ：特殊字体符号 */
<span></span>
</body>c.添加新的字体图标
网址点击导入selection.json + 添加新的字体图标 + 生成新的icomoon.zip文件替换
三、CSS三角
1、等腰三角形
- 宽高必须为0
- 指定某一边框的像素（三角大小）和颜色，其余透明。例如，左边框有颜色，则生成尖角往右的三角。
<style>
.box2 {
/* 宽高必须为0 */
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
/* border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent; */
/* 用覆盖简洁代码 */
border: 100px solid transparent;
border-left: 100px solid pink;
}
</style>2、直角三角形
<style>
.miaosha i {
position: absolute;
right: 0;
/* 宽高为0 */
width: 0;
height: 0;
/* 只保留右边框有颜色 */
border-color: transparent #fff transparent transparent;
/* 边框样式 */
border-style: solid;
/* 上边框要大，右边框宽度稍小，其余边框为0 */
border-width: 24px 10px 0 0;
}
</style>四、CSS用户界面样式
1、鼠标样式
cursor(4种属性值): default / pointer / move / text / not-allowed
<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、轮廓线
为了美观，取消表单的轮廓线，在样式中设置 outline：none;
<style>
input,
textarea {
outline: none;
}
</style>3、防止拖拽文本框
取消文本框的拖拽功能，在样式中设置 resize ： none；
<style>
textarea {
resize: none;
}
</style>五、vertical-align属性应用
1、图片文字对齐
经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
<style>
img {
/* 底线对齐 */
vertical-align: bottom;
/* 中线对齐 */
vertical-align: middle;
/* 顶部对齐 */
vertical-align: top;
}
</style>2、图片底部有缝隙
行内块元素和文字默认以基线对齐，所以底侧会有空白缝隙。
解决方案：
- vertical-align：middle/bottom（推荐）
- 转换为块级元素
<style>
img {
/* 方法一：设置vertical-align */
vertical-align: bottom;
vertical-align: middle;
/* 方法2：转换为块元素 */
display: block;
}
</style>六、溢出文字省略号显示
1、单行
步骤：
- 如果文字显示溢出，强制在此行显示
- 溢出部分隐藏
- 溢出文字用省略号代替
<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>2、多行（了解）
多行溢出文字用省略号显示有较大兼容问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）。
步骤：
- 弹性伸缩盒子显示
- 限制在一个块元素显示的文本的行数
- 设置或检索伸缩盒子对象的子元素的排列方式
<style>
div {
width: 150px;
height: 45px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
/* 1、弹性伸缩盒子显示 */
display: -webkit-box;
/* 2、限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 3、设置或检索伸缩盒子对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>七、常用布局技巧
1、margin负值
使用场景：一行上并列浮动的盒子都有四个边框，此时重叠的边框会显示两倍像素，不美观。
此时运用margin负值，使右边盒子的左边框压在左边盒子的右边框，使最终呈现出只有一条边框的效果。
加上鼠标经过边框变色的效果，则将盒子布局方式变为定位，因为定位的盒子会压在所有其他盒子之上；如果盒子已经设置有定位，那么设置 定位堆叠次序z-index 即可。
<style>
ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover {
/* 方法1、如果盒子没有定位，则添加相对定位即可 */
position: relative;
/* 方法2、如果盒子有定位，则提高z-index */
z-index: 1;
border-color: orange;
}
</style>2、文字围绕图片浮动
当一个盒子内左边是图片，右边是一段文字时，不用再在盒子中设置两个浮动的盒子一个装图片一个装文字。只需要将图片设置为浮动布局，浮动的图片不会压住文字。
八、CSS初始化
1、为什么要进行初始化
不同浏览器对有些标签的默认值是不同的，为了消除浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。
2、京东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 {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-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
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
