2020-11-02

精灵图的使用

精灵图核心  （复杂图标使用）

1精灵技术主要针对于背景图片使用。把多个小背景图片整合到一张大图片中

2这个大图片称为spriites 精灵图或则雪碧图

3移动背景图片位置，此时可以使用background-position

4移动的距离就是这个目标图片的X和Y坐标 

5因为一般情况下都是往上往做移动 所以数值是负值  X轴右边走是正值 左边是负值 y轴同理

6使用精灵图需要精确测量 每个小背景图片的大小和位置

字体图标

轻量灵活兼容  （小图标使用）

下载 引入 追加

三角形

            width: 0;

            height: 0;

            border-top: 10px solid red;

            border-right: 10px solid transparent;

            border-left: 10px solid transparent;

            border-bottom: 10px solid transparent;

给盒子不加宽和高 只加边框

其他     

        /* 去出表单轮廓线 */

        input,textarea{

            outline: none;

        }

        /* 防止拖拽文本域 */

        textarea{

            resize: none;

        }

     

 图片和文字对齐代码  只适用行内块 解决图片底部默认空白缝隙

vertical-align:

 

溢出的文字省略

 

1单行文本溢出显示省略号 必须满足三个条件

先强制一行内显示问题

white-space：nowrap

超出的部分隐藏

overflow：hidden

文字用省略号替代超出的部分

text-overflow：ellipsis

 

2多行文本溢出显示省略号

多行文本溢出显示省略号 有较大兼容性问题 适合webkit浏览器或移动端

overflow：hidden

text-overflow：ellipsis

弹性伸缩盒子模型显示

display:-webkit-box

限制在一个块元素显示的文本的行数

-webkit-line-clamp：2

设置或检索伸缩盒对象的子元素排列方式

-webkit-box-orient：vertical

常见布局技巧

 

margin 负值 避免盒子边框重叠叠加

鼠标经过某个盒子的时候。提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置））如果有定位，则加z-index）

文字围绕浮动元素 盒子加浮动 文字不加 形成环绕

行内块巧妙运用 ：跳转页列表框