控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析
元素的顯示與隱藏：
常見控制元素的顯示和隱藏的屬性有display、visibility、overflow，需要清楚的理解三者之間的區(qū)別。
display顯示：
當值為none時為銷毀對象，不保留原位置，當值為block時為生成對象。
visibility可見性：
當值為hidden時為隱藏對象，保留原位置，當值為visible時為可見對象。
overflow溢出：
控制當內容超出對象時如何管理內容的顯示，其值visible不添加滾動條也不剪切內容、auto內容超出時顯示滾動條，不超出時不顯示滾動條、hidden超出內容隱藏，scroll無論內容是否超出都顯示滾動條。
overflow-x或overflow-y:
此屬性是控制溢出元素在水平或垂直方向的顯示模式，其值有：visible默認可見 | hidden 不可見| scroll 出現(xiàn)滾動條，區(qū)域滾動| auto 自適應，超出會出現(xiàn)滾動條 | no-display 和no-content 兩屬性谷歌測試無效，可忽略。
opacity透明性：
此屬性是改變一個元素半透明，其取值范圍0~1，當值為0時為完全透明，占位；當值為1時為不透明。
iconfont字體圖標：
圖片對于網(wǎng)站開發(fā)是有很多的優(yōu)點，但是圖片會增加http請求和文件總大小，及圖片不能更好的縮放，此時出現(xiàn)了iconfont字體圖標就解決了此問題。
常見字體：
不同瀏覽器支持的字體格式不同，下面簡單介紹一些：
UI設計師設計svg格式圖片：
設計師通過illustrator 或 Sketch 等矢量圖形軟件創(chuàng)建 icon圖片。
上傳生成字體包：
當UI設計給我們svg文件后，我們需要轉換成適合多瀏覽器兼容頁面能夠使用的字體文件，圖標生成器：icoMoon字體（網(wǎng)站：http://icomoon.io），一個自定義圖標生成器，內容種類多，但是服務器是國外的。
icon font字體（網(wǎng)站：http://www.iconfont.cn），阿里字體圖標庫，可以使用AI制作圖標上傳生成屬于自己的字體圖標。
fontello，（網(wǎng)站：http://fontello.com）在線制作屬于自己的icon font字體圖標，也可以從GitHub下載整個圖標集，此項目開源。
Font-Awesome，（網(wǎng)站：http://fortawesome.github.io/Font-Awesome）更新比較快，廣受歡迎。
Glyphicon Halflings，（網(wǎng)站：http://glyphicons.com）可在bootstrap下免費使用。
Icons8，（網(wǎng)站：https://icons8.com）提供PNG免費下載，像素可達500px。
下載兼容字體包：
上傳完畢后，網(wǎng)站會轉換為字體圖標，此時下載使用即可，一般我們都是在網(wǎng)站找現(xiàn)成的用就可以，沒必要自己設計。
@font-face:自定義字體導入：
使用自定義字體必須導入到網(wǎng)頁中并聲明，具體如下：
<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>網(wǎng)站圖標：
網(wǎng)站ico圖標的制作：先把想要的圖標設計成圖片格式，在利用第三方轉換網(wǎng)站比特蟲： 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繼續(xù)添加新的圖標即可。
CSS代碼分析：
在開發(fā)中為了驗證自己的代碼是否規(guī)范，通常把代碼上傳到相關網(wǎng)站進行驗證，這里推薦： Unicorn - W3C 統(tǒng)一驗證工具： http://validator.w3.org，它支持本地文件、URL、直接寫代碼到輸入框進行驗證。
在生產(chǎn)環(huán)境，代碼一般都是壓縮后在上傳的，這里推薦代碼壓縮工具：站長之家：http://tool.chinaz.com
Can I Use：一個可以查看CSS3屬性在各瀏覽器兼容性的網(wǎng)站。
提示：本文圖片等素材來源于網(wǎng)絡，若有侵權，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者 刪除。
筆者：苦海
總結
以上是生活随笔為你收集整理的控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 解扰matlab,数据序列扰乱与解扰MA
- 下一篇： CSS中文档流之普通流，浮动及定位、浮动