DAY 9 | 自学前端第九天

自学一定要连续，记忆点深，知识点也容易串联。

今天学习CSS高级技巧，要求：

能使用精灵图
能使用字体图标
能写出CSS三角
能写出常见的CSS用户界面样式：鼠标样式，表单轮廓去除，文本域防拖拽
vertical-align和溢出文字省略号显示
能够说出常见的布局技巧
CSS初始化

一、精灵图

1.1为什么需要精灵图

一个网页中往往应用很多小背景图作为修饰，当网页中的图像过多时，服务器就会频繁接收和发送请求图片，造成服务器请求压力过大，降低页面加载速度。

因此，为了有效减少服务器接收和发送请求的次数，提高页面加载速度，出现了CSS精灵技术（也叫CSS Sprites、CSS雪碧）。

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

应用如：王者荣耀精灵图，淘宝精灵图

1.2 精灵图（sprites）的使用

精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中；
这个大图片也称为Sprites精灵图或者雪碧图；
移动背景图片位置，此时可以用background-position；
移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同（右x 下y）；
一般情况往上和往左都是负值；
使用精灵图需要精确测量，每个小背景图片呢的大小和位置。

精灵图核心总结：

针对小背景图片
借助背景位置实现background-position
一般情况下精灵图都是负值。

 <title>精灵图使用</title><style>.box1 {width: 60px;height: 60px;background: url(images/index.png) no-repeat -182px 0;margin-left: 182px;/* background-position: -182px 0; */}.box2 {width: 235px;height: 130px;background: url(images/index.png) no-repeat 0 -218px;}.box3 {width: 25px;height: 30px;background: url(images/index.png) no-repeat 0 -104px;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body>

二、字体图标

2.1字体图标的产生

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

精灵图缺点明显：

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

此时，可以解决以上问题的技术出现——字体图标 iconfont

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

2.1字体图标的优点

轻量型：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，较少了服务器请求；
灵活性：随意改颜色，大小，透明效果，阴影；
兼容性：几乎支持所有浏览器，请放心使用；

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

总结：

如果遇到结构样式简单的小图标，就用字体图标；
结构样式复杂小图片，使用精灵图。

如何使用字体图标：

字体图标下载

icomoon字库 http://icomoon.io
阿里iconfont字库 http://www.iconfont.cn/

字体图标引入

把下载包里面的fonts文件夹放入页面根目录下；
在CSS样式中全局声明字体：通过CSS引入字体文件到页面中；
打开字体文件夹中的demo.html，复制右下角小方框放入span标签；
给span设置字体样式为 font-family: 'icomoon'。

@font-face {font-family: 'icomoon';src:  url('fonts/icomoon.eot?gzpfrc');src:  url('fonts/icomoon.eot?gzpfrc#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?gzpfrc') format('truetype'),url('fonts/icomoon.woff?gzpfrc') format('woff'),url('fonts/icomoon.svg?gzpfrc#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}

使用：

 <title>字体图标的使用</title><style>/* 字体声明 */@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?gzpfrc');src: url('fonts/icomoon.eot?gzpfrc#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?gzpfrc') format('truetype'),url('fonts/icomoon.woff?gzpfrc') format('woff'),url('fonts/icomoon.svg?gzpfrc#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span {font-family: 'icomoon';font-size: 18px;color: aqua;}</style>
</head><body><span></span><span></span>
</body>

字体图标追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

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

三、CSS三角

网页中一些简单的三角形，使用CSS可以直接画出来，不用图片或者文字图标。

<title>京东小三角</title><style>.jd {position: relative;width: 120px;height: 249px;background-color: pink;margin: 100px auto;}.jd span {position: absolute;right: 15px;/* 整个盒子有上边框和下边框，一共20px高，上边框透明 */top: -20px;width: 0;height: 0;/* 为了照顾兼容性 */line-height: 0;font-size: 0;border: 10px solid transparent;border-bottom-color: pink;}.xiaomi {position: relative;width: 300px;height: 100px;background-color: blue;}.xiaomi span {position: absolute;right: -20px;top: 40px;width: 0;height: 0;line-height: 0;font-size: 0;border: 10px solid transparent;border-left-color: blue;}</style>
</head><body><div class="jd"><span></span></div><div class="xiaomi"><span></span></div>
</body>

四、CSS用户界面样式

4.1 什么是界面样式

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

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

4.2 鼠标样式 cursor

li {cursor: pointer;}

一些个：

   <title>鼠标样式 cursor</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><li style="cursor: wait;">鼠标等待</li><li style="cursor: help;">鼠标帮助</li></ul>
</body>

4.3 轮廓线 outline

取消表单轮廓线：

input {outline: none;}

4.4 文本域防拖拽

 textarea {resize: none;}

<title>用户界面样式——表单轮廓防拖拽文本域</title><style>/* 去除表单轮廓 */input {outline: none;}/* 防止文本域拖拽 */textarea {resize: none;}</style>
</head><body><input type="text"><!-- 文本域最好写到一行，换行 文本不是顶格 --><textarea name="" id="" cols="30" rows="10"></textarea>
</body>

五、vertical-align 属性应用

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

只对行内元素和行内块元素有效，块元素不行。

选择器 {vertical-align : baseline;}

5.1 图片、表单和文字对齐

让图片和文字垂直居中：

vertical-align: middle;

<title>vertical-align 文字图片垂直居中</title><style>img {/* 让图片和文字垂直居中 */vertical-align: middle;/* vertical-align: bottom; *//* 默认 *//* vertical-align: baseline; *//* vertical-align: top; */}textarea {resize: none;outline: none;vertical-align: middle;}</style>
</head><body><img src="data:images/index.png" alt="">胖胖的葡萄籽<br><textarea name="" id="" cols="30" rows="10"></textarea>去睡觉
</body>

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

行内块元素默认和底下的基线baseline对齐，不是底线bottom对齐。解决方案：

改成除了基线以外其他的属性值都可以 vertical-align: bottom;
转换成块元素 display: block;

 <title>解决图片底部默认空白缝隙问题</title><style>div {border: 2px solid red;}img {/* 解决方案1：除了基线以外其他的属性值都可以 *//* vertical-align: bottom; *//* 解决方案2：转换成块元素 */display: block;}</style>
</head><body><div><img src="data:images/index.png" alt=""></div>
</body>

解决后：

六、溢出文字省略号显示

6.1 单行文本溢出显示省略号

强制一行内显示文本；—— white-space: nowrap; （默认normal 自动换行）
超出的部分隐藏；——overflow:hidden;
文字用省略号代替超出的部分；——text-overflow: ellipsis;

 <title>单行文本溢出显示省略号</title><style>div {width: 150px;height: 80px;background-color: pink;margin: 100px auto;/* 如果文本一行显示不开，自动换行（默认） *//* white-space: normal; *//* 强制一行内显示文本 */white-space: nowrap;/* 超出的部分隐藏； */overflow: hidden;/* 单行文本溢出显示省略号 */text-overflow: ellipsis;}</style>
</head><body><div>啥也不说，此处省略一万字</div>
</body>

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

多行文本溢出显示省略号，有较大兼容性问题，适合webkit浏览器或移动端（移动端大部分是webkit内核）谷歌可以，IE大部分不起效果。

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

 <title>多行文本溢出显示省略号</title><style>div {width: 80px;height: 110px;border: 1px solid red;margin: 100px auto;overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 5; /* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;}</style>
</head><body><div>希望各地疫情快快消失，互联网寒冬快快过去，经济转好吧啊啊</div>
</body>

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

七、常见布局技巧

7.1 margin负值的运用

去除相邻浮动盒子边框重叠：

 <title>去除浮动相邻边框重叠</title><style>ul li {float: left;list-style: none;width: 200px;height: 200px;border: 1px solid black;margin-left: -1px;}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>

解决鼠标经过相邻边框颜色不统一：

如果盒子没有定位，鼠标经过添加相对定位即可
如果盒子都有定位，利用z-index提高层级

 <title>去除浮动相邻边框重叠</title><style>ul li {position: relative;float: left;list-style: none;width: 200px;height: 200px;border: 1px solid black;margin-left: -1px;}/* ul li:hover {1. 如果盒子没有定位，鼠标经过添加相对定位即可相对定位保留原来的位置，并压过其他标准流 position: relative;border-color: orange;} */ul li:hover {/*2. 如果盒子都有定位，利用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>

7.2 文字围绕浮动元素

巧妙运用浮动元素不会压住文字特性。

一个大盒子中里装文字
一个盒子装图片，在加上浮动，文字就会环绕图片

 <title>文字环绕浮动元素的使用</title><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 70px;background-color: pink;margin: auto;padding: 5px;}.pic {float: left;height: 70px;}.pic img {height: 100%;}</style>
</head><body><div class="box"><div class="pic"><img src="data:images/img.png" alt=""></div><p>一个大盒子中装文字一个盒子装图片，加上浮动，文字就会环绕图片</p></div>
</body>

7.3 行内块的巧妙运用

<title>行内块的巧妙运用</title><style>* {margin: 0;padding: 0;}.box {text-align: center;margin: 100px auto;}.box a {display: inline-block;width: 35px;height: 35px;background-color: #f7f7f7;border: 1px solid #ccc;text-align: center;line-height: 35px;text-decoration: none;color: #333;}.box .prev,.box .next {width: 85px;}.box .current,.box .elp {background-color: #fff;border: none;}.box input {width: 35px;height: 35px;border: 1px solid #ccc;outline: none;}.box button {width: 45px;height: 35px;background-color: #f7f7f7;border: 1px solid #ccc;}</style>
</head><body><div class="box"><a href="#" class="prev">&lt; &lt;上一页</a><a href="#">1</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>

7.4 CSS三角强化

直角三角形

.box22 {width: 0;height: 0;/* 简写 */border-style: solid;/* 只显示右边 */border-color: transparent green transparent transparent;/* 上是右的2倍 */border-width: 200px 100px 0 0;}

<title>直角实际运用</title><style>.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 100px auto;}.miaosha {position: relative;float: left;width: 90px;height: 24px;background-color: red;text-align: center;color: #fff;font-weight: 700;margin-right: 8px;}.miaosha i {position: absolute;right: 0;width: 0;height: 0;border-style: solid;border-color: transparent #fff transparent transparent;border-width: 24px 12px 0 0;}.price .older {font-size: 14px;color: gray;text-decoration: line-through;}</style>
</head><body><div class="price"><span class="miaosha">&yen;1650<i></i></span><span class="older">&yen;5650</span></div>
</body>

八、CSS初始化

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

简单理解：CSS reset

每个网页都必须先进行CSS初始化。

Unicode编码字体：

把中文字体名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如：

黑体：\9ED1\4F53

宋体：\5BBB\4F53

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

/* 把所有标签的内外边距清零 */
* {margin: 0;padding: 0;
}/* 斜体文字不倾斜 */
em,
i {font-style: normal;
}/* 去掉li的小圆点 */
li {list-style: none;
}img {/* border 0 照顾低版本浏览器 如果 图片外边包含了链接 会有边框的问题 */border: 0;/* 取消图片底端有空白间隙的问题 */vertical-align: middle;
}button {/* 鼠标经过按钮时变成小手 */cursor: pointer;
}a {color: #666;text-decoration: none;
}a:hover {color: red;
}button,
input {/* \5BBB\4F53是宋体的意思，这样浏览器兼容性比较好 */font-family: Microsoft YaHei, heiti SC, tahoma, arial, hiragino sans gb, "\sbbb\4f53";
}body {/* CSS3属性，抗锯齿性，让文字放大显示更清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;/* 1.5倍行高 */font: 12px/1.5 microsoft yahei, heiti SC, tahoma, arial, hiragino sans gb;color: #666;
}.hide,
none {display: none;
}/* 清除浮动 */
.clearfix:after {/* 溢出隐藏，位置保留 */visibility: hidden;clear: both;display: block;content: ".";height: 0;
}.clearfix {*zoom: 1
}