標籤：asi top lan 最佳化 壓縮包 置中 word creat style
1、font的兩個必須要寫的：font-size 和 font-familytext-indent 首行縮排（em）1em=一個文字大小text-algin 對齊：left、center、righttext-decortion 文本修飾： underline（底線）overline（上劃線）line-through（刪除線）none（無）letter-spacing 字間距（為0時字間距本身為1個像素，若為5px則字間距實際為6px）word-spacing 詞間距（先用空格將片語分開，否則沒效果，注意空格也占幾個像素）line-height：行高，字的頂部到下一行字的頂部的像素2、<a> href:超連結 <a href="xxx.html">跳轉頁面</a>壓縮包下載：<a href=“xxx.rar">壓縮包下載</a>錨點(id)：<a href="#div1">跳轉指定id位置</a>eg：<a href="http://sohu.com/#sogou-search">直接跳到搜狐頁面的指定id位置</a>
3、base：寫在<head></head>之間<base target="_blank" href="www.baidu.com"> 指定文檔中所有<a>標籤的預設
4、常用標籤section 版塊 用於劃分頁面上的不同地區,或者劃分文章裡不同的節 header 頁面頭部或者版塊（section）頭 footer 頁面底部或者（section）底部 <header></header><section><header></header><footer></footer></section><footer></footer> nav 導航 （包含連結的的一個列表）<nav></nav> article 用來在頁面中表示一套結構完整且獨立的內容部分.可以用來呈現論壇的一個文章，雜誌或報紙中的一篇文章，一篇部落格，使用者提交的評論內容，可互動的頁面模組掛件等。<article></article> aside 元素標籤可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其他類似的有別與主要內容的部分 <aside></aside> 1）被包含在<article>中作為主要內容的附屬資訊部分，其中的內容 以是與當前文章有關的引用、詞彙列表等2）在<article>之外使用，作為頁面或網站全域的附屬資訊部分；最典型的形式是側邊欄(sidebar)，其中的內容可以是友情連結、附屬導航或廣告單元等。 time 裡面寫時間 <time></time>
5、檔案路徑：絕對路徑：完整的固定的路徑地址、網站地址相對路徑：以當前頁面的地址為對象來表示路徑地址
6、搜尋引擎通過標籤來判斷使用者搜尋內容---標籤語義化SEM 搜尋引擎營銷SEO 搜尋引擎最佳化
7、css選取器的優先順序選取器的優先順序一致的情況下，後面的會覆蓋前面相同的屬性!import > 行間樣式style > id選取器 > class選取器 > 類型tag選取器 > 萬用字元* > 預設包含（父子）選取器 > 單個選取器 = 群組選取器內聯樣式表（標籤內部）> 內建樣式表（當前檔案中）> 外部樣式表（外部檔案中）
8、塊元素和內嵌（內聯、行內）元素：塊：1）預設獨佔一行2）支援所有css樣式3）不設定寬度的時候，寬度預設撐滿整行內嵌：1）同一行上可以顯示同類的標籤2）不支援寬高3）不支援上下的margin和padding樣式4）寬高由內容撐開5）代碼換行會被解析成空格 想讓內嵌元素具備塊元素特徵：display:block;想讓塊元素具備內斂元素特徵：display:inline;想讓元素既支援內斂也支援塊元素特徵：display:inline-block; 內斂塊：1）塊元素能在一行顯示2）行內元素支援寬高3）沒有寬度的時候內容撐開寬度4）標籤之間的換行間隙被解析成空格5）ie6 ie7不支援塊屬性標籤的inline-block
9.浮動:float:left | right | none | inherit; 文檔流是文檔中可顯示對象在排列時所佔用的位置。 浮動的定義：使元素脫離文檔流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停下來。 clear:left | right | both | none | inherit；指定元素的某個方向上不能有浮動元素 clear:both; 在左右兩側均不允許浮動元素。 float特徵： 1）塊在一排顯示2）內聯支援寬高3）預設內容撐開寬度4）脫離文檔流5）提升層級半層
10.清除浮動的方法 1）加高：給父級元素一個高度，缺點是擴充性不好，若高度不固定，加高清除失效2）父級浮動：給各類父級元素設定float，問題是頁面中所有元素都要加浮動，而且margin左右auto置中失效3）inline-block方法：給父級加display:inline-block; 問題是導致margin左右auto失效4）空標籤清除浮動：在浮動元素同級位置加一個空標籤<div class="clearfix"></div> css: .clearfix{clear:both;}問題：IE6 最小高度 19px；（解決後IE6下還有2px偏差） ，每個浮動元素後都要加空標籤5）br清除浮動：浮動元素後加 <br clear="all"/> 問題：不符合工作中結構、樣式、行為，三者分離的要求。每個浮動元素後都要加6）after偽類清浮動方法（現在主流方法） ：給浮動元素的父級添加一個clear類，並設定css樣式為：.clear:after{content:‘‘;display:block;clear:both;} .clear{zoom:1;} （zoom相容ie6、ie7）after偽類： 元素內部末尾新增內容；:after{content"添加的內容";} IE6，7下不相容zoom 縮放a、觸發 IE下 haslayout，使元素根據自身內容計算寬高。b、FF 不支援7）overflow:hidden; 清除浮動：給父級元素加。 問題：需要配合 寬度 或者 zoom 相容IE6 IE7；overflow: scroll | auto | hidden；overflow:hidden;溢出隱藏
11、定位position:relative | absolute | fixed | static | inherit; 1）relative相對定位/定位位移量position:relative; 特徵a、不影響元素本身的特性；b、不使元素脫離文檔流（元素移動之後原始位置會被保留）；c、如果沒有定位位移量，對元素本身沒有任何影響；d、提升層級 定位元素位置控制 top/right/bottom/left 定位元素位移量。 2）absolute絕對位置/定位層級position:absolute; 特徵a、使元素完全脫離文檔流；(原始位置消失，元素相當於隱形了)b、使內嵌支援寬高；c、塊屬性標籤內容撐開寬度；d、如果有定位父級相對於定位父級發生位移，沒有定位父級相對於document發生位移；e、相對定位一般都是配合絕對位置元素使用；f、提升層級 z-index:[number]； 定位層級a、定位元素預設後者層級高於前者；b、建議在兄弟標籤之間比較層級eg：z-index：1; 向前提升一個層級,z-index:[number]； 定位層級 3）fixed 固定定位： 與絕對位置的特性基本一致，的差別是始終相對整個文檔進行定位； 問題：IE6不支援固定定位；
12、透明度標準瀏覽器：opacity：0-1；IE6、7下：filter：alpha（opacity=0-100）
13、表格樣式重設table{border-collapse:collapse;} 儲存格間隙合并th,td{padding:0;}重設儲存格預設填充合併儲存格colspan 屬性規定儲存格可橫跨的列數。 <td colspan="2"></td>rowspan 屬性規定儲存格可橫跨的行數。 <td rowspan="2"></td>
14、相容（標準瀏覽器一般都相容，主要看IE6、7）1）H5相容 IE6、IE7不支援H5標籤，解決方案：需將h5標籤變成block元素，後用js建立標籤 （document.createElement("section")）若含有很多h5標籤，引用 html5shiv.js 檔案解決。2）元素浮動之後,能設定寬度的話就給元素加寬度.如果需要寬度是內容撐開,就給它裡邊的塊元素加上浮動;3）第一塊元素浮動,第二塊元素加margin值等於第一塊元素,在IE6下會有一條空隙問題; 解決方案：第二塊元素要用浮動float。4）IE6下子項目超出父級寬高，會把父級的寬高撐開 。解決方案：子項目寬高不要超過父級元素寬高！5）<p><h1-6><td>包含塊元素嵌套規則,塊元素在所有瀏覽器中不被這三個標籤包含，直接變成同級關係。6）margin相容性問題，上下margin疊壓問題，解決方案是避免多個元素上下margin同時存在，只使用一個方向的margin。在瀏覽器中子項目margin-top會傳遞給父級元素，解決方案是觸發BFC和haslayout給父元素加overflow:hidden;觸發BFC 。 給父元素加zoom:1；觸發haslayout BFC (block formatting context) 標準瀏覽器 ：a、float的值不為none。b、overflow的值不為visible。c、display的值為table-cell, table-caption, inline-block中的任何一個。d、position的值不為relative和static。e、width|height|min-width|min-height:(!aotu)haslayout IE瀏覽器 ：a、writing-mode:tb-rlb、-ms-writing-mode:tb-rlc、zoom:(!normal)7）display:inline-block相容 IE6下不支援。解決方案：使用css hack(*)。在display：inline-block;後加上*display:inline; *zoom:1;8）IE6最小高度問題。height:1px;在IE6下最小高度不是1px是19px; 解決方案：*overflow:hidden;9）IE6雙邊距。在設定了float:left後設定margin-left會導致雙邊距現象；比如float:left;margin-left:50px;在IE6下會距離左邊100px。解決方案：針對IE6,添加 *display：inline；10）li子項目都浮動的情況下，li下方會產生4px間隙。解決方案：給li添加 *vertical-align:top;11）兩個浮動元素中間有注釋或者內嵌元素並且和父級寬度相差不超過3px時會出現溢出文字的情況解決方案：兩個浮動元素中間避免出現內嵌元素或者注釋 或者 與父級寬度相差3px或以上12）IE6\7下父元素overflow：hidden；包不住子項目的relative相對定位解決方案：針對ie6、7給父級元素添加相對定位 *position：relative；13）IE6下絕對位置元素的父級元素寬高是奇數,絕對位置元素設定的right和bottom值會有1px的偏差 。解決方案：避免父級寬高出現奇數14）IE6下絕對位置元素和浮動元素並列絕對位置元素消失 。解決方案：避免在同一級，可以用<p>包住內斂元素。15）IE6下input會有上下1px空隙問題 。解決方案：給input添加 *float：left；16）IE6下輸入類型表單控制項隨輸入內容增加，背景圖片不固定的問題。解決：設定background-attachment：fixed； CSS hack：針對不同的瀏覽器寫不同的CSS 樣式的過程，就叫CSS hack! div{width: 200px;height: 200px;background-color: redbackground-color: blue\9;*background-color: green;_background-color: yellow;}書寫順序，從上到下範圍依次減小。\9 IE10以及IE10以下版本的* IE7以及IE7以下版本的_ IE6以及IE6以下版本的 17）PNG24 相容性問題：IE6不支援PNG24，出現背景。解決方案：使用PNG8或者:JS外掛程式:DD_belatedPNG_0.0.8a.js(問題:不能處理body之上png24) ；執行js外掛程式中的函數：DD_belatedPNG.fix(‘xxx‘);原生濾鏡：在body樣式添加這兩句：_background-image:none;_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop"); 相容IE代碼： <!--[if !IE 7]> <style type="text/css"> #wrap {display:table;height:100%} </style> < ![endif]-->
零散知識點 background-position:-70px -40px;圖片以容器左上方為參考向左位移70px，向上位移 40px，即圖片的左邊70px和上邊的40px都在容器之外，容器內只顯示剩下的部分。為負數是向右下。
css盒模型： 標準 w3c 盒子模型的範圍包括 margin、border、padding、content，並且 content 部分不包含其他部分。 ie 盒子模型的範圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 padding。 例：一個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px。用標準 w3c 盒子模型（也包括ie7以上）解釋：那麼這個盒子需要佔據的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px。盒子的實際大小(有背景顏色的地區)為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px。 用ie 6及其以下盒子模型：那麼這個盒子需要佔據的位置為：寬 20*2+200=240px、高 20*2+50=70px盒子的實際大小為：寬 200px、高 50px。
HTML+CSS基礎小筆記再整理
