元素的隐藏方式

1. 元素隐藏 ：1、display:none

                           a.元素删除掉不在DOM结构中

                           b.不占位置的

                       2、visibility:hidden

                           a.元素并没有删除掉还在DOM结构中

                           b.占位置的

                        3、opacity:0

                           a.元素并没有删除掉还在DOM结构中

                           b.占位置的

1. 换行：（只能运用于英文 ）

   1. 允许拆分单词换行：word-break: break-all;

   2. 在半角空格或连字符处换行：word-break: keep-all;

2. overflow：属性值：hidden:溢出的部分直接隐藏

   1. scroll:产生滚动条

   2. auto:自适应，如果内容溢出产生滚动条，如果不溢出没有滚动条

3. 单行省略号：强制文本在同一行上显示：white-space: nowrap;

   1. 溢出的内容隐藏掉：overflow: hidden;

   2. 添加省略号：text-overflow: ellipsis;

4. 多行省略号

   1. 弹性盒子显示：display: -webkit-box;

   2. 让当前弹性盒子中的子元素或者文本内容垂直排列：-webkit-box-orient: vertical;

   3. 在第几行显示省略号：-webkit-line-clamp: 5;

   4. 多余的内容隐藏掉：overflow: hidden;

   5. 高度自适应：height: auto;

用户界面样式

1. 鼠标的光标样式：默认的小白：cursor: default

                               小手：cursor: pointer

                               文本：cursor: text

                               移动：cursor: move

                               禁用：cursor: not-allowed

2. 轮廓：围绕在表单域标签中的四周的线条，起到了突出的作用，一般只去掉，不设置outline：none或0

3. 防止多行文本框的拖拽：resize: none

4. 垂直对齐：行内块元素左右两侧的行内元素或者文本内容相对于行内块元素的高度对齐

   top 上 middle 中 bottom下

   注意：是给行内块元素添加vertical-align属性！！！！！

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

   添加 vertical-align:top属性

6. 相邻的两个行内块元素之间的默认距离如何解决？

   1、添加浮动

   2、给父元素添加font-size:0

精灵图

1. why精灵图：为了减轻服务器的压力，提高页面的加载速度

2. what精灵图：多张小图拼接在一张大图上，通过背景图的位置属性background-position去移动到指定小图位置上，水平向右、垂直向下都是正方向，背景图往哪个方向移动，就是对应的正负值。

引入字体图标

1. unicode编码引入字体图标

   第一步：引入自动生成的iconfont.css                                                                           

   <link rel="stylesheet" href="./font/iconfont.css" />

   第二步：挑选相应图标并获取字体编码，应用于页面

   <span class="iconfont">&#xe6c2;</span>

2. Font Class引入字体图标

   第一步：引入自动生成的iconfont.css                                                                           

   <link rel="stylesheet" href="./font/iconfont.css" />

   第二步：挑选相应图标并获取类名，应用于页面

   <span class="iconfont icon-phone"></span>

3. symbol引入字体图标

   第一步：引入自动生成的iconfont.css   

   <link rel="stylesheet" href="./font/iconfont.css" />

   第二步：引入自动生成的iconfont.js

   <script src="./font//iconfont.js"></script>

   第三步：挑选相应图标并获取类名，应用于页面

   <svg class="icon" aria-hidden="true">
         <use xlink:href="#icon-phone"></use>
   </svg>