資訊專欄INFORMATION COLUMN
摘要：的中指向一個，而中不需要，是因為不是基于標準通用標記語言。不占空間占空間是繼承的，所以如何子孫節(jié)點修改可以顯示但不可以。意識是先顯示了無樣式的文檔內容，后又加載了樣式文件，導致重新渲染，出現閃爍的現象。中的偽類與偽元素偽類偽元素
優(yōu)雅升級 vs 漸進增強
優(yōu)雅升級：先滿足所有功能，再想盡辦法去兼容所有瀏覽器。
漸進增強：先滿足基本功能，保證網頁的可訪問性，注重標簽的語言化；然后再為高級瀏覽器和高帶寬用戶提供高級功能與效果。
不是HTML標簽，是用來告訴瀏覽器用怎樣的規(guī)范去解析當前文檔。
HTML4.01的中指向一個DTD（Document Type Definition），而HTM5中不需要，是因為HTMTL5不是基于SGML(Standard Generalized Markup Language) 標準通用標記語言。
HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。
title：是globale attributes之一，當鼠標劃上去時顯示的內容；
alt：是img的特有屬性，是圖片的等價內容描述，有三重意思：
1.當圖片無法加載時就顯示alt的內容;
2.屏幕閱讀器“閱讀”圖片時,讀的就是這個alt值;
3.對搜索引擎友好。
1.display:none; 不占空間；visibility:hidden;占空間；
2.visibility:hidden;是繼承的，所以如何子孫節(jié)點修改visibility:visible
;可以顯示；但display:none;不可以。
3.修改display屬性會導致整個文檔重排，但修改visibility屬性只會導致元素重繪。
4.讀屏器不會讀display:none的元素，但會讀visibility:hidden的元素。
block：
1.在常規(guī)流中，如果沒有設置width，會填充滿父容器；
2.margin，padding有效；
3.忽略vertical-align;
inline:
1.在水平方向，根據direction依次布局；
2.margin和padding在垂直方向無效，水平方向有效；
3.浮動或絕對定位時會轉換成block；
4.vertical-align屬性生效；
FOUC：Flash Of Unstyled Content。意識是先顯示了無樣式的文檔內容，后又加載了樣式文件，導致重新渲染，出現閃爍的現象。
解決方法：1.樣式文件放在文檔的head標簽中；2.盡可能避免用@import來引入css文件，因為這樣會沒法同步加載樣式文件，可能導致FOUC現象。
浮動元素脫離文檔流，不占據空間，浮動元素碰到包含它的邊框或者浮動元素的邊框才停留。
清除方法：
1.使用空標簽清除浮動：在所有浮動標簽后面加一個空標簽，定義樣式clear:both;弊端就是增加了無意義的標簽。
2.使用after偽對象清除浮動，注意要設置height:0;否則該元素會比實際多出若干像素。
3.使用oveflow：給包含浮動元素的父元素增加樣式：overfow:auto;zoom:1;（兼容IE6）。
transition:過渡。
意思是允許CSS的屬性在一定時間內平滑地過渡。
語法：transition:[<"transition-property">||<"transition-duration">||<"transition-timing-function">||<"transition-delay">,~~]
transition-property: none|all|color|width|...
transition-duration: 持續(xù)時間
transition-timing-function: linear(勻速)|ease(逐漸慢)|ease-in(加速)|ease-out(減速)|ease-in-out(先加速后減速)|cubic-bezier(x1,y1,x2,y2)這里的兩對坐標其實是貝塞爾曲線的那兩個杠桿點。
transition-delay: 動畫的延遲執(zhí)行事件
transform：改變。
意思是：讓元素執(zhí)行什么變化，如旋轉/縮放/移動/傾斜等
none 定義不進行轉換。
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y) 定義 2D 轉換。
translate3d(x,y,z) 定義 3D 轉換。
translateX(x) 定義轉換，只是用 X 軸的值。
translateY(y) 定義轉換，只是用 Y 軸的值。
translateZ(z) 定義 3D 轉換，只是用 Z 軸的值。
scale(x[,y]?) 定義 2D 縮放轉換。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 通過設置 X 軸的值來定義縮放轉換。
scaleY(y) 通過設置 Y 軸的值來定義縮放轉換。
scaleZ(z) 通過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle) 定義 2D 旋轉，在參數中規(guī)定角度。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿著 X 軸的 3D 旋轉。 測試
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。
skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。
skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。
perspective(n) 為 3D 轉換元素定義透視視圖。
比較有意思的是matrix這個屬性，基本上其他屬性的效果都能通過這個matrix實現。
CSS中的偽類與偽元素偽類：
偽元素：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115014.html
摘要：的中指向一個，而中不需要，是因為不是基于標準通用標記語言。不占空間占空間是繼承的，所以如何子孫節(jié)點修改可以顯示但不可以。意識是先顯示了無樣式的文檔內容，后又加載了樣式文件，導致重新渲染，出現閃爍的現象。中的偽類與偽元素偽類偽元素 優(yōu)雅升級 vs 漸進增強 優(yōu)雅升級：先滿足所有功能，再想盡辦法去兼容所有瀏覽器。漸進增強：先滿足基本功能，保證網頁的可訪問性，注重標簽的語言化；然后再為高級瀏...
摘要：半路出家的前端程序員應該不在少數，我也是其中之一。年，馮馮同事兼師兄看我寫太費勁，跟我說對面樓在找，問我要不要學，說出來可能有點丟人，但是在那之前，我真得不知道什么是，什么是。 半路出家的前端程序員應該不在少數，我也是其中之一。 為何會走向前端 非計算機專業(yè)的我，畢業(yè)之后，就職于一家電力行業(yè)公司，做過設備調試、部門助理、測試，也寫過一段時間的QT，那三年的時間，最難過的不是工作忙不忙，...
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業(yè)務工作時也會不定期更...
摘要：目前只有和有這個概率。是快速開發(fā)應用程序的前端工具包。調試工具前端的調試工具很多，比如，核心的的。前端流程部署，和現在幾乎是前端最流行的自動化的項目構建工具正則表達式瀏覽器插件開發(fā)瀏覽器原理溝通能力優(yōu)秀 下圖是前端工程師圖解：showImg(http://upload-images.jianshu.io/upload_images/1807893-de7c7404345922b6.jp...
閱讀 1014·2021-10-19 11:42
閱讀 2971·2021-09-10 10:51
閱讀 677·2021-09-09 09:33
閱讀 1760·2021-09-01 10:43
閱讀 2768·2019-08-30 12:43
閱讀 3515·2019-08-30 11:24
閱讀 2113·2019-08-30 10:56
閱讀 2776·2019-08-29 11:00
