CSS高级技巧

1.精灵图

• 对于小图标

• 借助background-position实现

• x轴向右为正，y轴向下为正

.box {
    width: 60px;
    height: 60px;
    margin: 100px auto;
    background: url(images/sprites.png) no-repeat -155px -106px;
}

2.字体图标

网页常用小图标，本质是文字

• icomoon字体库 http://icomoon.io

• 阿里iconfont字库 iconfont-阿里巴巴矢量图标库

3.CSS三角做法

.box {
    /*宽高为0*/
    width: 0;
    height: 0;
    /*照顾兼容性，*/
    line-height: 0;
    font-size: 0;
    border: 10px solid transparent;
    border-top-color: pink;
}

eg.京东案例：准备两个盒子，利用定位，子绝父相，让小三角在盒子上方，注意三角盒子的高度是border的2倍

4.CSS用户界面样式

• 鼠标样式 cursor

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

  <li style="cursor: default;">默认</li>

• 表单轮廓 outline

  input {
      outline: none;
  }

• 防止表单域拖拽 resize

  textarea {
      resize: none;
  }

  文本域尽量写在一行里面，不要有空格

5.vertical-align

默认和基线对齐，图片表单等行内块元素都可以添加

img {
    vertical-align: middle;
}

图片底侧空白缝隙问题：1.给图片添加vertical-align（推荐使用）；2.将图片转换为块级元素（会影响布局）

6.溢出文字省略号显示

1.单行文本

div {
    width: 150px;
    weight: 80px;
    /*1.强制一行显示*/
    white-space: nowrap;
    /*2.超出部分隐藏*/
    overflow: hidden;
    /*3.文字用省略号代替超出部分*/
    text-overflow: ellipsis;
}

2.多行文本

兼容性问题，后台解决

7.常见布局技巧

1.margin负值做细线边框，鼠标经过边框变换颜色

eg.ul>li{$}*5

ul li {
    position: relative;
    /*1.没有设置定位的话在hover中设置*/
    float: left;
    list-style: none;
    width: 150px;
    height: 200px;
    border: 1px solid red;
    margin-left: -1px;
}
ul li:hover {
    /*2.设置过定位的话，利用z-index提高层级*/
    z-index: 1;
    border: 1px solid blue
}

2.文字围绕浮动元素

利用浮动元素不会压住文字的特性，浮动一开始的目的是做文字环绕效果

图片+文字布局：图片设置浮动即可，文字自动环绕

3.行内块巧妙运用

页面跳转模块：行内块元素之间有小空隙，而且text-align可以居中

4.css三角巧妙运用

做一个高一点的直角三角形

.box {
    width: 0;
    height: 0;
    /*上右下左 只保留右边三角形*/
    border-color: transparent red transparent transparent;
    /*样式都为solid*/
    border-style: none;
    /*上边框稍大，有边框宽度较小*/
    border-width: 100px 50px 0 0;
}

8.css初始化

* {
    margin: 0;
    padding: 0;
}
​
li {
    font-style: none;
}