網頁設計公司工具分享
要做好SEO，當然對於網頁設計、製作過程中，就要開始注重用戶體驗。畢竟，用戶體驗也是搜尋引擎在設計排序邏輯時一個很重要的指標。所以，作為Web設計師，你的網站在各種瀏覽器中有完全一樣的表現是很多人的目標，然而這是一個永遠無法真正實現的目標，很多人認為，完美的跨瀏覽器相容並不必要，這樣說雖然沒錯，但在很多情形，一種近似的相容還是很容易實現的。
理解CSS盒子模型
如果你想實現不需要很多奇巧淫技的跨瀏覽器相容的 CSS 代碼，透徹地理解 CSS 盒子模型是首要事情，CSS 盒子模型並不難，且基本支持所有流覽器，除了某些特定條件下的 IE 流覽器。CSS 盒子模型負責處理以下事情:
◆一個blcok（區塊）級物件佔據多大的空間
◆該對象的邊界，留白
◆盒子的尺寸
◆盒子與頁面其它元素的相對位置
CSS 盒子模型有以下準則：
◆Block （區塊）物件都是矩形 （事實上所有物件都如此）
◆其尺寸由 width, height, padding, borders, 以及margins決定
◆如果不設置高度，該盒子的高度將自動適應其包含的內容，加上留白等（除非使用了 float）
◆如果不設置寬度，一個非 float 型盒子水準上將充滿其父容器（扣除父容器的留白）
◆處理 block 級物件時，必須注意以下事項：
◆如果一個盒子的寬度設置為 100%，它就不能再設置 margins, padding, 和 borders，否則會撐破其父容器
◆垂直毗鄰的 margin 會引起複雜的坍塌問題，導致佈局問題
◆擁有相對位置和絕對位置的物件，擁有不同的行為
SEO網頁跨瀏覽器開發：在 Firefox 的 Firebug 中顯示的盒子模型
在 Firefox 的 Firebug 中顯示的盒子模型
理解 block 級和 inline 級 物件的區別。這個看似簡單的問題事如果能透徹地理解，會受益匪淺。
下圖講解了 block 級物件和 inline 級物件的區別:
SEO網頁跨瀏覽器開發：block級物件和inline級物件的區別
下面是 block 級物件和 inline 級物件的基本區別:
◆Block 級物件會自然地水準充滿其父容器，因此沒有必要為之設置 100% 寬度屬性。
◆Block 級物件的起始擺放位置是其父容器的左上邊界，並順排在其前面的兄弟 Block 物件的下方（除非設置 float 或絕對位置）。
◆Inline 級對象會忽略其寬度和高度設置。
◆Inline 級物件會隨著文字排版，並受排版屬性的影響（如 white-space, font-size, letter-spacing）。
◆Inline 級物件可以使用 vertical-align 屬性控制其垂直對齊，block 級物件不可以。
◆Inline 級物件的下方會保留一些自然的空間，以適應字母 g 一類的會向下探出的筆劃。
◆一個設置為 float 的 inline 物件將變成 block 物件理解Floating和Clearing屬性。
SEO網頁跨瀏覽器開發：CSS代碼的金科玉律
實現多欄排版的最好方法是使用float屬性，float也是一個將使你受益匪淺的屬性。一個 float 物件可以居左或居右，一個設置為 float 的物件，將根據設置的方向，左移或右移到其父容器的邊界，或其前面的 float 物件的邊界，而緊隨其後的非 float 物件或內容，則包圍在其相反的方向。
留言列表
