css高级技巧

精灵图

为什么需要精灵图

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

核心原理：将网页中一些小背景图像整合到一张大图中，这样只需要一次请求即可

使用精灵图：使用background-position属性，移动的是这个目标图片的x和y坐标

精灵图使用：

1. 使用ps切片选择需要的切片
2. 找到w、h、x、y属性，用css实现

缺点

1. 图片文件比较大
2. 图片本身放大缩小会失真
3. 一旦图片制作完毕想要更换比较复杂

字体图标

字体图标iconfont，展示的是图片，本质是文字

优点

1. 轻量级：比图像小，随字体加载出来，减少了服务器请求
2. 灵活性：可以改变颜色、阴影、透明效果、旋转等
3. 兼容性：几乎支持所有浏览器

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

字体图标的下载

http://icomoon.io

http://www.iconfont.cn/

使用

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

使用的元素中声明font-family: "icomoon"

字体图标的追加

1. 把压缩包里的selection.json在网页里打开
2. 选择新的图标
3. 重新下载

CSS三角

让盒子的长宽为0，四个边框不为0，则会生成一个正方形其中四个三角形

-->将其中一个边框设定颜色，其他位transparant，就会出现单独的三角形

        div{
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 50px solid transparent;
            border-left-color: pink;
        }

行高和字体大小是为了兼容性

CSS用户界面样式

鼠标样式

li {cursor: pointer}

• default: 小白箭头 默认
• pointer：小手
• move：移动
• text：文字
• not-allowed：禁止

轮廓线

默认选中输入（input/textarea标签）框的时候，会有个蓝色的外框线

给表单添加outline:0/none

input{outline:0 ;}

防止拖拽文本域

默认文本框（textarea）拖动右下角是可以拉大的，会影响布局

textarea{resize: none;}

文本框的前标签和后标签应放在同一行，使光标在左上角，可以通过加padding改变位置

vertical-align使用

经常用于设置图片或者表单和文字垂直对齐

vertical-align :baseline |top |middle |bottom

• baseline：默认，元素放置在父元素的基线上
• top： 元素的顶端和行中最高元素的顶端对齐
• middle：把元素放置在父元素中部
• bottom： 把元素的顶端与行中最低的元素顶端对齐

块级元素无法使用veritcal-align，有时需要先把块级元素转化为行内块元素

图片底部空白缝隙

原因是行内块元素会和文字基线对齐

1. 给图片添加vertial-align: middle |top |bottom（推荐）
2. 把图片转换成块级元素display:block

溢出的文字省略号

1. 单行文本溢出

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

强制一行显示-->超出的部分隐藏-->文字用省略号替代超出的部分

1. 多行文本溢出

有较大兼容性问题，适合于WebKit浏览器（谷歌）或移动端（移动端大多数是webkit内核）

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

常见布局技巧

margin负值：

可以用于解决相邻盒子边框重叠后变粗的问题

float要放在margin：-1前面

当鼠标经过时改变边框颜色，会出现边框被其他边框压住的问题

-->如果没有定位，加相对定位，如果有定位，则加z-index提高层级

文字围绕浮动元素

浮动元素周围的文字会自动围绕该元素，可以用于实现左图右文字的模块或者新闻中图片样式

行内块元素巧妙应用

页码的布局

行内块默认有大小，且自带距离，使用text-align：center即可水平居中对齐

<!-- 给父亲添加text-align:center即可实现所有子元素水平居中 -->
.box {
    text-align: center
}
.box a{
    display: inline-block;
    width: 36px;
    height:36px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 36px;
    text-decoration: 36px;
    color: #333;   
}

三角的巧妙应用

实现某些价格标签中的斜三角

.box {
    width: 0;
    height: 0;
    /* 只保留右边边框 */
    border-color: transparent red transparent transparent;
    border-style: solid;
    /* 上大右小 */
    border-width: 22px 8px 0 0;
}

CSS初始化

不同浏览器对某些标签的默认值是不同的，为了清除不同浏览器对html文本呈现的差异，照顾浏览器的兼容性，需要初始化

Unicode编码字体：

把中文字体的名称用相应的unicode编码代替，有效的避免浏览器解释css代码时出现乱码

"5B8B\4F53"表示宋体/黑体

京东初始化代码：

/* 把我们所有标签的内外边距清零 */
* {
    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;
}