CSS高级本事
目录一、精灵图
二、字体图标
三、CSS制作三角形
四、CSS用户界面样式
1、鼠标样式 cursor
2、表面线 outline
3、防止拖拽文本域 resize
五、vertical-align 属性
六、溢出的笔墨省略号表现
1、单行文本溢出表现省略号
2、多行文本溢出表现省略号
七、常见布局本事
1、margin负值应用
2、笔墨围绕浮动元素
3、巧用行内块
4、CSS三角形扩展
八、CSS初始化
一、精灵图
1、使用原因
为了有效淘汰服务器接受和发送哀求的次数，提高页面的加载速度
2、核心原理
将网页中的一些小配景图像合到一张大图中，这样服务器只需要哀求一次就可以了
3、使用方法
（1）精灵技术主要针对于配景图片使用。就是把多个小配景图片整合到一张大图片中。（这个大图片也称为 sprites 精灵图 / 雪碧图）
（2）移动配景图片位置，此时可以使用 background-position
（3）移动的间隔就是这个目标图片的x和y坐标。（注意网页中的坐标有所不同：x轴右边为正，y轴下边为正）
（4）由于一般情况下都是往上往左移动，所以数值是负值。
（5）使用精灵图的时候需要精确丈量每个小配景图片的大小和位置。
二、字体图标
1、产生原因
字体图标使用场景: 主要用于表现网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显：
（1）图片文件还是比力大的。
（2）图片本身放大和缩小会失真。
（3）一旦图片制作完毕想要更换非常复杂。
而字体图标iconfont可以很好的解决以上问题
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体
2、字体图标的优点
（1）轻量级：
一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，淘汰了服务器哀求
（2）机动性：
本质是笔墨，可以很随意的改变颜色、产生阴影、透明效果、旋转等
（3）兼容性：
险些支持全部的欣赏器，可放心使用
注意：
字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
总结：
（1） 如果遇到一些布局和样式比力简朴的小图标，就用字体图标。
（2） 如果遇到一些布局和样式复杂一点的小图片，就用精灵图。
三、CSS制作三角形
方法：
div{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #ff8500;
} 运行效果：
https://i-blog.csdnimg.cn/direct/a619f0656c86430ea1329410f38b71f5.png
注：三角形大小取决于边框的粗细
四、CSS用户界面样式
界面样式：就是更改一些用户操纵样式，以便提供更好的用户体验
1、鼠标样式 cursor
li {
cursor: pointer;/* 鼠标过去呈现小手样式*/
} 常用属性值有：default（默认）、pointer（小手）、move（移动）、text（文本）、not-allowed（禁止）
2、表面线 outline
input {
outline: none; /* 鼠标点击输入框时没有文本框的轮廓线*/
} 3、防止拖拽文本域 resize
着实开发中文本域右下角是不可以拖拽改变文本域的大小的
textarea{
resize: none;
} 五、vertical-align 属性
1、使用场景
用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效（ 即：用于设置图片或表单（行内块元素）和笔墨垂直对齐 ）
2、语法
vertical-align : middle;
/* middle为垂直居中对齐 */
/* 属性值还可以是 top（顶线对齐） 、baseline（默认：基线对齐）、 bottom（底线对齐）*/ 3、应用
解决图片底部默认空缺缝隙问题
（1）问题形貌：
图片底部会有一个空缺缝隙，原因是行内块元素会和笔墨的基线对齐
（2）主要解决办法
① 给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
② 把图片转换为块级元素 display: block;
六、溢出的笔墨省略号表现
1、单行文本溢出表现省略号
/* 1. 先强制一行内显示文本 */
white-space: nowrap; （ 默认 normal 自动换行）
/* 2. 超出的部分隐藏*/
overflow: hidden;
/* 3. 文字用省略号替代超出的部分 */
text-overflow: ellipsis; 2、多行文本溢出表现省略号
多行文本溢出表现省略号有较大兼容性问题，适合于webkit欣赏器或移动端（移动端大部分是webkit内核）
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical; 注：建议让后台职员做这个效果，由于后台职员可以设置表现多少个字，操纵更简朴
七、常见布局本事
1、margin负值应用
（1）应用场景：
使两个盒子边框重叠，使其重叠地方不变粗（如果两个盒子边框是紧挨着的，那么挨着的线条会变为两个盒子边框线像素值相加，就会变粗）
（2）方法：
让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框（-1为边框的像素，边框几像素就写几）
ul li{
list-style: none;
float: left;
width: 30px;
height: 60px;
background-color: pink;
border: 1px solid skyblue;
margin-left: -1px;
} <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul> 效果：https://i-blog.csdnimg.cn/direct/45ab7ab0de424810935a264d85e88032.png
注：若想实现鼠标经过哪个盒子，哪个盒子的边框就表现出来，可用如下方法：
鼠标经过某个盒子的时候，提高当前盒子的层级即可
① 如果 li 没有定位，则加相对定位（生存位置）
ul li{
list-style: none;
float: left;
width: 30px;
height: 60px;
background-color: pink;
border: 1px solid skyblue;
margin-left: -1px;
} ul li:hover{ position: relative; border: 1px solid orange; } 效果：
https://i-blog.csdnimg.cn/direct/42efab5eee2243d28441e63e8884c355.png
② 如果 li 有定位，则加z-index
ul li{
position: relative;/* li 有定位 */
list-style: none;
float: left;
width: 30px;
height: 60px;
background-color: pink;
border: 1px solid skyblue;
margin-left: -1px;
}
ul li:hover{
z-index: 1;/* 通过提高 z-index层级,使其在鼠标经过时边框在最上面显示 */
border: 1px solid yellow;
} 效果：
https://i-blog.csdnimg.cn/direct/1fb0f7c8522e427285315447c955a9de.png
2、笔墨围绕浮动元素
比方制作如下样式时，奇妙运用浮动元素不会压住笔墨的特性
https://i-blog.csdnimg.cn/direct/08dd12083343423a93a6ca1ab7ebd707.png3、巧用行内块
页码在页面中间表现：
（1）把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;
（2）使用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会程度会居中
4、CSS三角形扩展
直角三角形：
width: 0;
height: 0;
border-color: transparent pink transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;效果：
https://i-blog.csdnimg.cn/direct/53a294267a394caca0b4bc454b0c041f.png
八、CSS初始化
1、CSS初始化原因
不同欣赏器对有些标签的默认值是不同的，为了消除不同欣赏器对HTML文本出现的差异，照顾欣赏器的兼容，我们需要对CSS 初始化
简朴理解：
CSS初始化是指重设欣赏器的样式（也称为CSS reset）
每个网页都必须首先辈行 CSS初始化
Unicode编码字体：
把中笔墨体的名称用相应的 Unicode 编码来取代，这样就可以有效避免欣赏器解释CSS代码时候出现乱码的问题。
例：
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]