元素的显示与隐藏：
常见控制元素的显示和隐藏的属性有display、visibility、overflow，需要清楚的理解三者之间的区别。
display显示：
当值为none时为销毁对象，不保留原位置，当值为block时为生成对象。
visibility可见性：
当值为hidden时为隐藏对象，保留原位置，当值为visible时为可见对象。
overflow溢出：
控制当内容超出对象时如何管理内容的显示，其值visible不添加滚动条也不剪切内容、auto内容超出时显示滚动条，不超出时不显示滚动条、hidden超出内容隐藏，scroll无论内容是否超出都显示滚动条。
overflow-x或overflow-y:
此属性是控制溢出元素在水平或垂直方向的显示模式，其值有：visible默认可见 | hidden 不可见| scroll 出现滚动条，区域滚动| auto 自适应，超出会出现滚动条 | no-display 和no-content 两属性谷歌测试无效，可忽略。
opacity透明性：
此属性是改变一个元素半透明，其取值范围0~1，当值为0时为完全透明，占位；当值为1时为不透明。
iconfont字体图标：
图片对于网站开发是有很多的优点，但是图片会增加http请求和文件总大小，及图片不能更好的缩放，此时出现了iconfont字体图标就解决了此问题。
常见字体：
不同浏览器支持的字体格式不同，下面简单介绍一些：
UI设计师设计svg格式图片：
设计师通过illustrator 或 Sketch 等矢量图形软件创建 icon图片。
上传生成字体包：
当UI设计给我们svg文件后，我们需要转换成适合多浏览器兼容页面能够使用的字体文件，图标生成器：icoMoon字体（网站：http://icomoon.io），一个自定义图标生成器，内容种类多，但是服务器是国外的。
icon font字体（网站：http://www.iconfont.cn），阿里字体图标库，可以使用AI制作图标上传生成属于自己的字体图标。
fontello，（网站：http://fontello.com）在线制作属于自己的icon font字体图标，也可以从GitHub下载整个图标集，此项目开源。
Font-Awesome，（网站：http://fortawesome.github.io/Font-Awesome）更新比较快，广受欢迎。
Glyphicon Halflings，（网站：http://glyphicons.com）可在bootstrap下免费使用。
Icons8，（网站：https://icons8.com）提供PNG免费下载，像素可达500px。
下载兼容字体包：
上传完毕后，网站会转换为字体图标，此时下载使用即可，一般我们都是在网站找现成的用就可以，没必要自己设计。
@font-face:自定义字体导入：
使用自定义字体必须导入到网页中并声明，具体如下：
<style>@font-face {/* 1、声明自定义字体 */font-family: "myfont";/* 给自定义的字体起一个名字 */src: url("Fonts/myfont.ttf");/* 引入设计师设计好的字体文件 */}p {/* 2、使用自定义字体 */font-family: myfont;}p::before {/* 可以直接在标签中写自定义字体文本，如p标签 */content: "\e900";}</style><body><p></p></body>
网站图标：
网站ico图标的制作：先把想要的图标设计成图片格式，在利用第三方转换网站比特虫： http://www.bitbug.net转换为ico格式的图标，之后link引入即可
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">/*type="image/x-icon"可以省略*/
追加字体图标：
实际工作中，当原来的字体图标不够用时，我们需要添加新的字体图标，但是之前的不能删掉，此时我们仅需把原文件夹中selection.json文件通过icoMoon的import icons导入到icoMoon继续添加新的图标即可。
CSS代码分析：
在开发中为了验证自己的代码是否规范，通常把代码上传到相关网站进行验证，这里推荐： Unicorn - W3C 统一验证工具： http://validator.w3.org，它支持本地文件、URL、直接写代码到输入框进行验证。
在生产环境，代码一般都是压缩后在上传的，这里推荐代码压缩工具：站长之家：http://tool.chinaz.com
Can I Use：一个可以查看CSS3属性在各浏览器兼容性的网站。
提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海
![[VirtaulBox]网络连接设置](http://pic.xiahunao.cn/[VirtaulBox]网络连接设置)
