CSS

在使用CSS實現表現的時候，會經常接觸到display:inline-block這一屬性，無論是初接觸Web標準還是接觸標準已久的朋友，大都會對這一屬性感覺很迷惑和模糊。display:inline-block將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。但對於這個屬性不是所有瀏覽器都識別。支援的瀏覽器有：Opera、Safari但很遺憾，最流行的IE和Firefox卻不支援這個屬性（據說下一版本的Firefox將會支援display:inlin

CSS的背景屬性“background”提供了眾多屬性值，如顏色、映像、定位等，為網頁背景映像的定義提供了極大的便利。看看background提供的屬性值：　　background : background-color | background-image | background-repeat | background-attachment |

* .TTF或.OTF，適用於Firefox 3.5、Safari、Opera * .EOT，適用於Internet Explorer 4.0+ * .SVG，適用於Chrome、IPhone 比如:@font-face {    font-family: 'HansHandItalic';    src: url('fonts/hanshand-webfont.eot');    src: url('fonts/hanshand-webfont.eot?#iefix')

基本樣式以及使用：Css單位：1、元素定位的屬性值：Position：一個比較基礎的屬性。用法：XML元素名{position:[absolute | relative | static

在前面例子中，為了達到瀏覽器安全色性，我們分別在紅色藍色方塊CSS 代碼中分別加了“Float:left;”，這樣IE 和FF 中顯示效果一樣，如果此時我們還想放一個寬度400 像素，高度100 的綠色方塊，並讓其處於第二行，效果如：可是這時候不管怎麼放，在IE 中的效果始終是：導致綠色拍到藍色的後面這種情況就是因為藍色方塊CSS

代碼Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->頭：header內容：content/container尾：footer導航：nav側欄：sidebar欄目：column頁面外圍控制整體布局寬度：wrapper左右中：left right

內容簡述：display:block 內嵌元素定義高和寬(轉為塊元素)float:left 塊元素位於同一行Firefox地區浮動，在第2個塊元素加float:leftIE6的一個BUG（距離瀏覽器的左邊距並不是CSS 代碼中定義的20像素，而是40像素），display:inline怎樣才能讓紅色地區水平定位於瀏覽器的正中間，無論瀏覽器視窗的大小，顯示器解析度的大小。margin:0 auto; Code highlighting produced by Actipro

一、使用垂直置中屬性存在的問題在CSS中垂直置中定義屬性vertical-align，但是只能用作內嵌元素。二、使用邊界屬性定義垂直置中存在的問題使用margin:auto 0;無法使快元素中的內容垂直置中。（無效）三、容器和內容大小固定的垂直置中1.父元素的補白屬性定義垂直置中.div1{margin:50px 0 0;width:500px;height:150px;background:#666666;border:4px solid #000000;}.div2{width:200px;

以下內容摘自 http://mingelz.com/2009/08/dawn-css-reset/之前在做頁面時，一直使用YUI的CSS Reset，後來還跟著它升級到了3.0beta1 版。當然，我每次都會在YUI的基礎上適當精簡，以方便自己在項目中的使用。後來陸續看到了Shawphy的《打造自己的 reset.css》和射鵰的《Reset CSS 研究（技術篇）》，然後便想到既然巨人們就在眼前，我何不站在他們肩膀上總結一套自己的CSS

CSS file 收藏  /* CSS file *//* Global{color: #FFFFFF;themeColor: #000000;} */Application{color: #FFFFFF;backgroundColor: #000000;backgroundImage:

如何組織CSS-分層應用 css 的能力分兩部分：一部分是css的API，重點是如何用css控制頁面內元素的樣式；另一部分是css架構，重點是如何對 css 進行組織。如何組織 css 可以有多種角度，例如按功能劃分，或者按區塊劃分。這裡講一下 base.css + common.css + page.css 的組織方法。將網站內的所有樣式，按照職能分成三大類：base、common、page，這三者是層疊結構。1、base 層-精簡通用位於三者的最底層，提供 css reset

<script type="text/javascript">            function addStyle(stylePath) {                var container = document.getElementsByTagName("head")[0];                var addStyle = document.createElement("link");                addStyle.rel =

一、一些常用的全域Css 1 /** 清除內外邊距 **/ 2 body, h1, h2, h3, h4, h5, h6, hr, p, 3 blockquote, /* structural elements 結構元素 */ 4 dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 5 pre, /* text formatting elements 文字格式設定元素 */ 6 form, fieldset, legend, button,

文章目錄 後話 Google 今日發布 HTML/CSS 代碼風格指南 (Google HTML/CSS Style Guide), 事實上這不是一套完整的開發規範, 我們可以認為是一份簡單的開發建議. 與我在《使用 Google Closure Linter 校正 JavaScript 代碼》中提到的 Google JavaScript Style Guide 一樣, 這份只能內容很少, 我用了不到一個小時就看完了,

box {2        /*非IE的主流瀏覽器識別的垂直置中的方法*/3        display: table-cell;4        vertical-align:middle;56        /*設定水平置中*/7        text-align:center;89        /* 針對IE的Hack */10        *display: block;11        *font-size: 175px;/*約為高度的0.873，200*0.873 約為17

看了一下google的html、css代碼規範,簡單的作下記錄。一、省略ur地址中的 http: 或 https: 的部分  , 在引用樣式表檔案、指令檔、圖片以及其它媒體檔案時，都可以這樣做，除非使用這兩種協議都無法擷取到資源，也就是說必須使用其它協議才能擷取到資源的，就不能省略啦，只有http:和https:是可以省略的。這樣做的好處是能減少檔案的體積，而且還能避免一些相對url中混亂問題的產生。<!-- 不推薦 --><script

什麼是等高布局?先來看一個案例： 中的頁面的主體內容是兩列結構，左列是用來導航的，右列是用來顯示內容的。我們看到它們有一個共同的邊框，中間還有一條分隔線，左右兩列的高度都是不固定的。這種情況下就需要兩列的高度保持一致了，左邊高度增加，右邊也跟著增加，右邊高度增加，左邊同樣也要增加，否則就會出現“斷層”的效果。在這裡，等高布局是為了維護邊框線條的完整性，在有些地方則可能是為了維護背景的完整性，達到整體一致不缺失的效果。布局方案等高布局有幾種不同的方法，但目前為止我認為瀏覽器安全色最好最簡便的應該是

css這個東西，說難不難，說容易也不容易。我覺得最重要的還是經驗的積累，正所謂的不積矽步，無以至千裡。這一系列文章講述幾種css特殊布局的實現，也當作為自己做個備忘吧。首先講的是三列布局，左右兩列寬度固定，中間一列寬度自適應這個很好實現，左右兩列分別左浮動和右浮動並給一個固定寬度，中間不浮動，也不設定寬度。這樣基本就可以了。但為了相容IE還必須做些工作。看下代碼結構： 效果為： 中間列要不要設定margin-left和margin-right

css中的負邊距(negative margin)是布局中的一個常用技巧，只要運用得合理常常會有意想不到的效果。很多特殊的css布局方法都依賴於負邊距，所以掌握它的用法對於前端的同學來說，那是必須的。本文非常基礎，老鳥可以略過。 負邊距在普通文檔流中的作用和效果那些沒有脫離文檔流的元素（指不是浮動元素也不是絕對位置、固定定位的元素等），其在頁面中的位置是跟隨者文檔流的變化而變化的。看下面這幅圖：

昨天做一個導航條，為了節省代碼，CSS屬性使用了一個Line-height，結果每次點擊導航，滑鼠過後，慘不忍睹啊。一個紮眼的虛線框，他沒包住圖片，也沒平均包住，虛線框錯位很嚴重，其他一切正常。總之，本來很酷了，有這個虛線就一切白費。 在藍色搜尋啊搜尋，看到了不少代碼，不少代碼還是很好用的，可就是有點太長了，有用純CSS的(寫了很長)，也有用JS的（能用CSS的話我就不去用JS了） 最後，無意中看了一個屬性。 結果是，兩個CSS屬性就一切OK了。