DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 編寫高質量代碼 Web前端開發修煉之道 書摘精要
編寫高質量代碼 Web前端開發修煉之道 書摘精要
編輯:前端技巧     
(P4)
Web標准由一系列標准組合而成,其核心理念是將網頁的結構、樣式和行為分離開來,所以它可以分為三大部分:結構標准、樣式標准和行為標准。
樣式標准 —— XML標准、XHTML標准、HTML標准;
樣式標准 —— CSS標准;
行為標准 —— DOM標准和 ECMAscript 標准;

(P23)CSS布局也就是俗稱的 Div + CSS 布局,或者是 (X)HTML + CSS 布局。其核心思想就是用 CSS 來控制網頁中元素的樣式,包括位置、大小、顏色等;

(P26)
CSS布局只是Web標准的一部分。在HTML、CSS、Javascript 這三大元素中,HTML才是最重要的,結構才是重點,樣式是用來修飾結構的;

先確定 HTML ,確定語義的標准,再來選用合適的 CSS;

(P27) 浏覽器會根據標簽的語義給定一個默認的樣式;

(P29) Web Developer —— 網頁調試插件

(P43) 在語義不明顯,既可以用 <P> 也可以用 <div> 的地方,盡量用 <P> ,因為 <P> 默認情況下有上下間隔,去樣式後的可讀性更好,對兼容特殊終端有利;

(P46)
如果漏寫 DTD 聲明, Firefox 仍然會按照標准樣式來解析網頁,但在 IE 中(包括 IE6、IE7、IE8)就會觸發怪異模式;

一種組織 CSS 的方法 —— base.css + common.css + page.css

(P58) 模塊與模塊之間盡量不要包含相同的部分,如果有相同部分,應將它們提取出來,拆成一個獨立的模塊;

(P60) 模塊應在保證數量盡可能少的原則下,做到盡可能簡單,以提高重用性;

(P71) HTML 標准的 class 屬性和 id 屬性不同,id 只能掛一個,而 class 可以掛多個,用空格分隔;

(P81) 如果不確定模塊的上下 margin 特別穩定,最好不要將它寫到模塊的類裡,而是使用類的組合,單獨為上下 margin 掛用於邊框的原子類;

(P81) 權重的規則是這樣的 —— HTML標簽的權重是1,class 的權重是10,id 權重是100;

(P82) 如果 CSS 選擇符權重相同,那麼樣式會遵循就近原則,哪個選擇符最後定義,就采用哪個選擇符的樣式 —— “就近原則”指的是選擇符定義的先後順序,而不是 class 名的先後順序;

(P84) 為了保證樣式容易被覆蓋,提高可維護性,CSS選擇符需保證權重盡可能低;

(P85) 少使用子選擇器,就需要多添加 class ;

(P87) CSS Sprite “圖片翻轉技術” —— 將多張圖片合並為一張,然後利用 background-position 屬性來展示需要的部分;

(P88) 是否使用 CSS Sprite 主要取決於網站流量;

(P89) 一般情況下,建議盡量使用 class ,少用 id ;

(P93)
CSS hack ——
1. IE條件注釋法 <!-- [if IE]> ...... <![endif]>
2. 選擇符前綴法 *html *+html
3. 樣式屬性前綴法 "_" "*"

(P94) <a> 標簽的四種狀態排序問題 —— Love Hate 原則 —— L(link)ov(Visible)e, H(Hover)a(Active)te;

(P95)
塊級元素: div、p、form、ul、ol、li

行內元素: span、strong、em

塊級元素會獨占一行,默認情況下,其寬度自動填滿其父元素寬度;

行內元素不會獨占一行,相鄰的行內元素會排列在同一行裡,直到一行排不下,才會換行,其寬度隨元素的內容而變化;

(P95)
塊級元素可以設置 width、height 屬性;
行內元素設置 width、height 屬性無效;

(P96) 塊級元素可以設置 margin 和 padding 屬性。行內元素只有水平方向的 margin 和 padding 產生邊距效果;

(P97) 塊級元素和行內元素的 CSS 相關屬性是 display ,其中塊級元素對應於 display : block ,行內元素對應於 display : inline。 可以通過修改 display 屬性來切換塊級元素和行內元素;

(P103)
position : relate 和 position : absolute 都可以改變元素在文檔中的位置。設置 position : relative 和 position : absolute 都可以讓元素激活 left、top、right、bottom 和 z-index 屬性(默認情況下,這些屬性未激活,設置了也無效);

默認情況下,所有元素都是在 z-index : 0 這一層;

設置 position : relative 或 position : absolute 會讓元素“浮”起來;

position : relative —— 會保留自己在 z-index : 0 層的占位;

position : absolute —— 會完全脫離文檔流,不再在 z-index : 0 層保持占位符,其 left、top、right、bottom 值是相對於自己最近的一個設置了 position : relative 或 position : absolute 的祖先元素的,如果祖先元素全部沒有設置 position : realtive 或 position : absolute ,那麼就相對於 body 元素;

(P104)
float 元素屬性不會讓元素“上浮”到另一個 z-index 層,它仍然讓元素在 z-index : 0 層排列, float 不能通過 left、top、right、bottom 屬性精確地控制元素的坐標,它只能通過 float : left 和 float : right 來控制元素在同層裡“左浮”和“右浮”。flaot 會改變正常的文檔流排列,影響到周圍元素;

只要設置了 position : absolute 、float : left 或 float : right 中任意一個,都會讓元素以 display : inline-block 的方式顯示 —— 可以設置長寬、默認寬度並不占滿父元素,就算顯式地設置 display : inline 或者 display : block 也仍然無效;

值得注意的是, position : relative 卻不會隱式改變 display 的類型;

(P104)
行內元素水平居中 —— text-align : center
塊級元素水平居中 (確定寬度) —— margin-left : auto 和 margin-right : auto

(P111)
CSS中有一個用於豎直居中的屬性 vertical-align ,但只有當父元素為 <td> 或 <th> 時,這個 vertial-align 屬性才會生效;

<td> 標簽默認情況下就隱式地設置了 vertical-align 的值為 middle ;

(P114) 注意: main 的內容比起 sidebar 更重要,無論 sidebar 和 main 在樣式上誰左誰右,在HTML標簽上要保證 main 的標簽在 sidebar 之前被加載;

(P136) 用匿名函數將腳本包起來,可以有效地控制全局變量,避免沖突隱患;

(P147)
添加必要的注釋,可以大大提高代碼的可維護性,對於團隊合作來說,更是十分有必要的;

讓JS不產生沖突,需要避免全局變量的泛濫,合理使用命名空間以及為代碼添加必要的注釋;

(P153) window 對象會在網頁內元素全部加載完畢以後出發 onload 事件;

(P153) DOMReady 只判斷頁面內所有的 DOM 節點,是否已經全部生成,至於子節點的內容是否加載完成,它並不關心。 DOMReady 觸發的速度比 window.onload 更快;

(P159) CSS 放在頁頭,Javascript 放在頁尾;

(P174) attachEvent 是 IE 支持的方法,而 addEventListener 是 Firefox 支持的方法,attachEvent 和 addEventListener 方法支持監聽處理函數的疊加,而不是覆蓋;

(P185) 很多開源的 Javascript 庫可以為我們提供強大的 base 層和 common 層,最常見的 Javascript 庫有 jQuery 和 YUI 等;

(P186)
jQuery 本身分成兩大部分: jQuery 核心文件 和 jQuery UI 文件。 jQuery UI 文件依賴 jQuery 核心文件;

jQuery 核心文件提供了 base 層功能,還提供了部分 common 層功能, jQuery UI 文件提供了 common 層功能;

(P194)
因為一個頁面內,相同的 id 只能出現一次,所以它不適合來獲取一組有“相似功能”的 DOM 節點;

用標簽名來獲得 DOM 節點,讓程序和 HTML 結構耦合太緊;

(P196) 同一頁面裡 id 只能出現一次,所以如果你的程序需要被多處復用,就一定不能使用 id 作為 Javascript 獲得 DOM 節點的掛鉤;

(P198) 組件需要指定一個根節點,以保持每個組件之間的獨立性;

(P205) 如果一個函數內某個因素很不穩定,我們可以將它從函數內部分離出來,以參數的形式傳入,從而將不穩定因素和函數解耦;

(P223)
面向對象英文全稱叫做 Object Oriented ,簡稱 OO 。OO 其實包括 OOA (Object Oriented Analysis,面向對象分析)、OOD (Object Oriented Design,面向對象分析) 和 OOP (Object Oriented Programming,面向對象的程序設計)。面向對象的語法只對應 OOP ,只是 OO 的一部分;

OOA 和 OOD 是面向對象編程的思想,和具體語言無關,而 OOP 是面向對象編程工具,和選用語言相關;

OOA 和 OOD 與具體要求語言無關,一般情況下可以輕易跨語言重用;

(P224) 從大局上決定程序品質的,不是 OOP ,而是 OOA 和 OOD;

(P225) 函數在 Javascript 中既可以當做普通函數使用,也可以用作類來使用,在充當類的時候,它本身又擔負著構造函數的責任;

(P228) 用 this xxx 定義的屬性是公有的, 而用 var xxx 定義的屬性是私有的;

(P230) 原型中的行為一定是公有的,而且無法訪問私有屬性;

(P231) 放在構造函數裡的私有行為,實現真正的似有;

(P253) 無論在類的構造函數中還是在原型中,this 都指向實例化的對象;

(P239) 作為函數的 function ,其 this 指向的是 window 對象,而作為類構造函數的 function ,其 this 指向的是實例化對象;

(P259) 對於常規屬性,統一使用 node.xxx 的方式讀取,對於自定義屬性,統一使用 node.getAttribute("xxx")讀取;
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved