CSS层叠样式表高级技巧（一）

CSS高级技巧

一、精灵图

1.为什么要使用精灵图？

​ 1.1为了有效的减少服务器发送和接受请求的次数，提高页面刷新速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）

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

2.精灵图的使用

• 主要针对小的背景图使用

• 借助于background-position

• 一般都是负值（X右边正，左边负）

  background: url(第九天/images/sprites.png) ;
  background-position: -180px 0;
  

二、字体图标

1.优点

• 轻量级
• 灵活性
• 兼容性

2.使用

1. 下载字体文件（Icon Font & SVG Icon Sets ❍ IcoMoon或阿里爸爸
2. fonts文件放到根目录
3. 引入style
4. 粘贴字体代码

三、CSS三角

<style>
        .jj {
            height: 0;
            width: 0;
            设置边框透明
            border: 10px solid transparent;
            border-top-color: violet;
        }
</style>

四、用户界面样式

1.鼠标样式

cursor

属性值	描述
default	小白
pointer	小手
move	移动
text	文本
not-allowed	禁止

2.轮廓线outline

边框线
outline:none;
防止拖拽文本框
resize:none;

3.vertical-align属性文字对齐

3.1让文字相对垂直居中

只对行内元素或者行内块元素生效

值	描述
baseline	基线对齐
top	顶端对齐
middle	垂直居中
bottom	下部

vertical-align:middle;

3.2解决图片底部空隙

• 添加vertical-align属性
• 图片转换为块元素

3.3单行溢出的文字省略号显示

1.文本强制在一行显示
white-space: nowrap;
2.溢出的文字隐藏
overflow: hidden;
3.溢出时用省略号显示
text-overflow: ellipsis;

3.4多行文字溢出

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

五、布局技巧

1.设置盒子紧挨着一起

1.添加margin值
margin-left:-1px;
2. 如果盒子没有定位，则鼠标经过添加相对定位即可
3.如果li都有定位，则利用 z-index提高层级 

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
}