1.去掉a及input等標籤的虛線框：
input,button{outline:none;}
::-moz-focus-inner{border:none;}
a{blr:expression(this.onFocus=this.blur());}
:focus{outline:0;-moz-outline-style:none;}將其加入common.css公共樣式中去。
2.元素透明度,格式如下：
opacity:0.5;filter:alpha(opacity=50)
其中，filter:alpha(opacity=50)是爲IE瀏覽器做的隱藏，平時只需要像opacity:0.5;這樣寫就可。opacity的值介於0和1之間，0是全透明，1是不透明（關於這個問題一直記不清楚，其實可以這樣記：0本來就代表沒有，1代表有，所以，當爲0時元素“沒有”了，說明opacity爲0是全透明。）
3.百分比寬高和最大最小寬高
max-width
min-width
max-height
min-width
關於百分比在寬、高度的設置上，最有特色是用百分比設置img標籤的寬和高。當img元素的寬度設置爲百分比時，高度要設置爲自適應，這樣頁面的尺寸改變時，圖片可以等比例縮放，例如：
剛開始在頁面中引入一張圖片，圖片和頁面的寬度比例如圖：（按ctrl+shift+m打開火狐瀏覽器的手機瀏覽模式）
在html文件中將該img元素的樣式設置爲：
img{width:100%; height:auto;}
此時再任意改變頁面的尺寸時，照片將等比例縮放，如：
4.背景固定：background-attachment：fixed;設置之後，由於視窗不動，滑動頁面時構成視差。
5.元素隱藏：有兩種方法，但存在區別，
A.visibility:hidden/visible：該方法隱藏元素，同時給隱藏的元素保留住原有的位置;
B.display:none/block：不但隱藏，且元素已“消失”在頁面之中，不會給隱藏的元素保留位置，即後面的元素會取代它之前的位置
6.子元素相對於父元素溢出隱藏，overflow該屬性共有以下幾個常用值：
A.overflow:hidden將子元素超出父元素大小範圍的多餘部分裁掉，可能會比較生硬；
B.overflow:scroll若子元素溢出，則在父元素的溢出方向自動出現一個滾動條。此方法一經設定，無論溢不溢出，都會出現滾動條。這一點有的時候會影響美觀，可能會需要結合隱藏滾動條的知識來解決問題
C.overflow：auto自適應模式。溢出時自動出現滾動條，不溢出時表現正常。
D.overflow:inherit規定應該從父元素繼承 overflow 屬性的值。
7.文本溢出:text-overflow,常用值有以下兩個：
A.clip:修剪文本，就是將超過文本大小的內容直接硬生生地截掉；
B.ellipsis：顯示省略符號來代表被修剪的文本。
使用舉例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
.p1{width:12em; border:1px #000 solid;overflow:hidden; white-space:nowrap;text-overflow:clip;}
.p2{width:12em; border:1px #000 solid;overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}
</style>
</head>
<body>
<p class="p1">這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字</p>
<p class="p2">這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字</p>
</body>
</html>
注：其中.p1 .p2類中用到的white-space:nowrap屬性用於如何設置元素內部的空白。其常用的值爲nowrap,表示文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止。
8.隱藏和禁用滾動條
A.x軸方向overflow-x:hidden;
B.y軸方向overflow-y:hidden;
沒有隱藏滾動條之前，滾動條存在，通過滑動滾動條或鼠標滾輪來實現滾動效果：
設置隱藏滾動條之後，滾動條被隱藏，且失去滾動效果：
9.把a標籤轉換爲按鈕使用，將href裏的值改爲javascript:;即可：
<a href="javascript:;"></a>
10.網頁實體：&，例如，網頁中一般只能解析一個空格，用網頁實體來表示空格時就可以解析多個。
（在某標籤內輸入內容時，按下&，然後選擇實體符）
11.title屬性：規定關於元素的額外信息，這些信息通常會在鼠標移到元素上時顯示一段工具提示文本，注：title 屬性常供form 以及 a 元素這樣可以獲取焦點的元素使用，以提供關於輸入格式和鏈接目標的信息。如：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<a title="點擊這裏跳轉到首頁" href="#">首頁</a>
</body>
</html>
12.<img>標籤的alt屬性：指定了替代文本，用於在圖像無法顯示或者用戶禁用圖像顯示時，代替圖像顯示在瀏覽器中的內容。但是該屬性在IE瀏覽器中時會有一些不一樣，只有當用戶把鼠標移動到 img 元素上時，IE會顯示出 alt 屬性的值。
例如：
<img src="/i/eg_tulip.jpg" alt="上海鮮花港 - 鬱金香" />在標準瀏覽器中，若圖片無法正常加載：
在IE中，若圖片可以正常加載，且鼠標移入時：
並且，W3C網站中是這樣倡導大家的:我們強烈推薦您在文檔的每個圖像中都使用這個屬性。這樣即使圖像無法顯示，用戶還是可以看到關於丟失了什麼東西的一些信息。而且對於殘疾人來說，alt 屬性通常是他們瞭解圖像內容的唯一方式。
並且需要注意的是，alt 屬性的值是一個最多可以包含 1024 個字符的字符串
13.!important屬性及選擇器優先級的問題：
A.選擇器優先級：
一般情況下，在css裏，選擇器的優先級由高到低爲：行間>id>class>標籤選擇器，並且如果同種類型的選擇器對同一屬性的不同描述時，在代碼行中還會出現後寫的覆蓋前面樣式的問題，例如下面這樣一道面試題：（360面試題）
這道題的答案選擇B
對這道題的分析如下：
css中選擇器一般分爲三種，標籤名選擇器，類選擇器和ID選擇器。而其他後代選擇器和羣組選擇器只是對這三種選擇器的一種擴充。關於更多選擇器的詳細介紹請看這一篇博客
一般而言，選擇器越特殊，它的選擇器越高。也就是選擇器指向的越準確，它的優先級就越高。通常我們用1來表示標籤選擇器的優先級，用10表示類選擇器的優先級，用100表示ID選擇器的優先級。那麼在上題中，#content p的優先級是100+1
p的優先級是1
.article的優先級是10
p.article的優先級是10+1
故本題中的答案爲B
B.!impotant屬性。該屬性的應用示例：
<style type="text/css">
p{font-size:12px !important;}
#content p{font-size:13px;}
.article{font-size:14px;}
p.article{font-size:15px;}
</style>
<body>
<div id="content">
<p class="article" style="font-size:16px">test</p>
</div>
</body>上例中字體的大小是12px。很明顯，上例中p的優先級是1最低，但是在設置字體的屬性中加入！important屬性後，該選擇器的優先級變成了最高，可見它能夠幫助開發者和用戶在修改樣式表的時候輕鬆覆蓋原本的權重
14.text-transform:屬性用來控制文本的大小寫，其常用值有以下幾個：
A.none：默認值，定義帶有小寫字母和大寫字母的標準文本；
B.capitalize：文本中的每個單詞用大寫字母開頭；
C.uppercase：定義只有大寫字母；
D.lowercase：定義只有小寫字母；
15.<iframe></iframe>：iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架），通俗地說，就是將另一個頁面引入當前頁面（雖然已經過時，但需要知道且會使用）。一個示例：
<style type="text/css">
p{font-size:26px; text-align:center; margin-bottom:30px;}
</style>
</head>
<body>
<p>這個頁面中即將引入另外一個頁面</p>
<iframe name="smjh" align="center" src="https://www.baidu.com/" frameBorder="0 "width="760" height="300"></iframe>
</body>
下面介紹<iframe></iframe>標籤內的常用屬性：
A.width:<iframe>標籤的寬
B.height:<iframe>標籤的高
C.scrolling是否有滾動條，yes（有）no（無），默認爲auto（需要的時候出現）
D.frameBorder是否有邊框，正整數，默認爲1，0爲無邊框
E.name規定iframe的名字
注：可以用<a href="這裏換成你要修改網站的網址" target="smjh"></a>來讓smjh這個iframe切換到你要修改的頁面
························································································································································
iframe的優缺點：
A.優點：
a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題
b. iframe無刷新文件上傳
c. iframe跨域通信
B.缺點：
a. iframe會阻塞主頁面的Onload事件
b. 無法被一些搜索引擎索引到
c. 頁面會增加服務器的http請求
d. 會產生很多頁面，不容易管理。
··················································································································································
16.table在佈局時的缺點：
A.太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗餘代碼量。
B.靈活性差，比如要將tr設置border等屬性，是不行的，得通過td.
C.代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂
D. 混亂的colspan與rowspan，用來佈局時，頻繁使用他們會造成整個文檔順序混亂。
E.table需要多次計算才能確定好其在渲染樹中節點的屬性，通常要花3倍於同等元素的時間。
F.不夠語義
17.標籤語義化的好處：
a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
b. 有利於SEO（搜索引擎優化）：和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；
c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
d. 便於團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
18.前端頁面的三層結構：
a. 結構層：由 HTML 或 XHTML 之類的標記語言負責創建，僅負責語義的表達。解決了頁面“內容是什麼”的問題。
b. 表示層：由CSS負責創建，解決了頁面“如何顯示內容”的問題。
c. 行爲層：由腳本負責。解決了頁面上“內容應該如何對事件作出反應”的問題。
19.sprites（雪碧圖）
A.原理：CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的background-image，background- repeat，background-position的組合進行背景定位。background-position可以精確地定位出背景圖片的位置。
示例：
在製作一個頁面時，需要製作導航部分的效果，正常情況下背景爲淺藍色，而鼠標指上去時背景爲深藍色：
按照正常的處理方法，就是用兩張顏色不同的圖片來做li標籤的背景，然後在鼠標移入和移出時做背景圖片的替換。但是用雪碧圖的思想處理這個問題的步驟如下：
1.在PS中將這兩張圖片合爲同一張圖片：
2.在鼠標移入移出時修改background-position的值即可：
.menu li a{display:block; width:96px; height:35px;background:url(../imgs/button.jpg);color:#001a7d; font-size:16px; text-align:center; line-height:35px;}
.menu li a:hover{color:#fffdf4; font-size:16px;line-height:35px; background-position:0 -35px;}B.優點：
a. 減少網頁的http請求，並防止出現閃白
b. 減少圖片的字節，並解決了圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名
c. 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。
······················································································································································
C.缺點：
a. 在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂
b. CSS Sprites在開發的時候，要通過photoshop或其他工具測量計算每一個背景單元的精確位置
c. 在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合併的圖片
20.經常遇到的瀏覽器兼容性有哪些：
a. 瀏覽器默認的margin和padding不同
b. IE6雙邊距bug
c. 在ie6，ie7中元素高度超出自己設置高度。原因是IE8以前的瀏覽器中會給元素設置默認的行高的高度導致的
d. min-height在IE6下不起作用
e. 透明性IE用filter:Alpha(Opacity=60)，而其他主流瀏覽器用 opacity:0.6
f. input邊框問題，去掉input邊框一般用border:none;就可以，但由於IE6在解析input樣式時的BUG(優先級問題)，在IE6下無效
其他更多的在以後的學習中會不斷地總結
21.外邊距重疊：margin-collapse。
相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，並且因而所結合成的外邊距稱爲摺疊外邊距。摺疊結果遵循下列計算規則：
a. 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。
b. 兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值。
c. 兩個外邊距一正一負時，摺疊結果是兩者的相加的和。