HTML与CSS学习 day11

• 精灵图的使用
  主要借助于背景位置来实现 background-position: x y ; 里面分别填入x轴 和y轴坐标
• 字体图标
  主要适用场景小图标 简单的图标
  
• 字体图标的使用

先打开下载的字体文件里面的 demo.html 复制字体后边的小框 

字体声明 
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?lck2wb');
            src: url('fonts/icomoon.eot?lck2wb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?lck2wb') format('truetype'), url('fonts/icomoon.woff?lck2wb') format('woff'), url('fonts/icomoon.svg?lck2wb#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
       }
        span {
            font-family: 'icomoon';
            font-size: 100px;
        }

• css三角
  首先盒子宽高设置为0 给盒子添加边框以及透明色
  哪个方向需要三角 就给哪个方向添加颜色

 border-right-color: rgb(47, 0, 255);

• 鼠标样式

<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>

• 取消表单轮廓

outline: none;

• 取消文本域拖拽

  resize: none;

• 图片或者表单与文字对齐
  只对行内元素或行内块元素有效
  vertical-align: baseline; 默认基线对齐方式
  vertical-align: middle; 居中对齐
  vertical-align: bottom; 与底线对齐
  vertical-align: top; 与顶线对齐
  
• 解决图片底部留白问题

1.使用vertical-align

vertical-align: middle;  居中对齐
vertical-align: bottom;  与底线对齐
vertical-align: top; 与顶线对齐

2.转化为行内元素或行内块元素

• 单行文字显示不开省略号显示

强制一行显示

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

• 多行文字省略号显示

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

• margin负值应用