CSS高级技巧

1.元素的显示与隐藏

（1）display（常用）

        display : none隐藏对象。与它相反的是display:block除了转换为块级元素之外，同时还有显示元素的意思。

        特点：隐藏之后，不再保留位置。

（2）visibility

        visible : 对象可视

        hidden : 对象隐藏

        特点：隐藏之后，继续保留原有位置。（停职留薪）

（3）overflow

        检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

        visible : 不剪切内容也不添加滚动条。

        auto : 超出自动显示滚动条，不超出不显示滚动条

        hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉

        scroll : 不管超出内容否，总是显示滚动条

（4）opacity

        opacity可以改变元素的透明度，透明度的取值范围在0-1之间，0是完全透明，1是完全不透明。

2.CSS用户界面样式

（1）鼠标样式

        cursor :  default  箭头 | pointer  小手  | move  移动  |  text  文本

（2）轮廓

        是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

        outline : outline-color ||outline-style || outline-width

        去掉轮廓最直接的写法是 ：outline: 0;或者outline: none;

        Input:focus{outline:1px solid red;}  /*选中时聚焦*/

（3）防止拖拽文本域resize

        resize：none 这个单词可以防止浏览器随意的拖动 文本域。

        右下角可以拖拽： <textarea></textarea>

        右下角不可以拖拽： <textarea  style="resize: none;"></textarea>

（4）垂直对齐（不可继承——子元素中需要写此属性）

        vertical-align : baseline |top |middle |bottom

        vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

        默认的图片会和文字基线对齐

（5）去除图片底侧空白缝隙

1、两者之间有默认外边距的解决方法：修改父级元素字体尺寸：font-size:0;

但是会带来一个问题：如果内容中有文字，文字会不显示。

        2、给img 添加 display：block; 转换为块级元素就不会存在问题了。（但是图片会独占一行，要想图片不独占一行，需要添加浮动，添加浮动之后display：block;就没有用处了）

        因此在实际中直接转为浮动即可（记得清除浮动）

（6）两个相邻的行内块其中一个设置外边距另一个也受影响的原因和解决办法

        行内块元素设置外边距后父元素也会受影响解决办法：给父元素添加边框；

        一个盒子里有两个行内块，其中一个设置了margin，另一个不设置，也会下沉：（浮动没有此现象）

        外边距受影响的解决办法：修改内联元素对齐属性：vertical-align：top;（给子元素设置）

3.溢出的文字隐藏

（1）word-break

        normal：使用浏览器默认的换行规则。

        break-all：允许在被设置的宽度内换行。

        keep-all：只能在半角空格或连字符处换行。主要处理英文单词

（2）white-space(通常使用于强制一行显示内容)

        normal : 默认处理方式

        nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

        可以处理中文

（3）text-overflow

        text-overflow : clip | ellipsis  设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

        clip : 不显示省略标记（...），而是简单的裁切

        ellipsis : 当对象内文本溢出时显示省略标记（...）

        注意一定要首先强制一行内显示，再次和overflow属性搭配使用。

（4）多行省略号

        -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

        display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

        -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

                display: -webkit-box;

                -webkit-box-orient: vertical;  

                -webkit-line-clamp: 3;

                overflow: hidden;

4.CSS精灵技术

        制作精灵图

        先设置背景图

        再分别设置背景图的位置

5.字体图标

（1）上传生成字体包

        1.推荐网站：Icon Font & SVG Icon Sets ❍ IcoMoon

icomoon字库：种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

        2.推荐网站：iconfont-阿里巴巴矢量图标库

阿里icon font字库：可以使用AI制作图标上传生成，免费！！！

        3.fontello：在线定制你自己的icon font字体图标字库，项目开源。

Fontello - icon fonts generator

        4.Font-Awesome：更新比较快

http://fortawesome.github.io/Font-Awesome/

（3）下载兼容字体包

        网站会给我们把UI做的svg图片转换为我们的字体格式，然后下载下来就好了。

（4）字体引入到HTML