HTML+CSS基礎小筆記再整理
阿新 • • 發佈：2017-07-22
abs 其中 寬度 書寫 html5 font pla 之間 footer 1、
font的兩個必須要寫的：font-size 和 font-family
text-indent 首行縮進（em）1em=一個文字大小
text-algin 對齊方式：left、center、right
text-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 用來在頁面中表示一套結構完整且獨立的內容部分.可以用來呈現論壇的一個帖子，
5、文件路徑： 絕對路徑：完整的固定的路徑地址、網站地址 相對路徑：以當前頁面的地址為對象來表示路徑地址
6、搜索引擎通過標簽來判斷用戶搜索內容---標簽語義化 SEM 搜索引擎營銷 SEO 搜索引擎優化
7、css選擇器的優先級 選擇器的優先級一致的情況下，後面的會覆蓋前面相同的屬性 !import > 行間樣式style > id選擇器 > class選擇器 > 類型tag選擇器 > 通配符* > 默認 包含（父子）選擇器 > 單個選擇器 = 群組選擇器 內聯樣式表（標簽內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）
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-rl b、-ms-writing-mode:tb-rl c、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: red background-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]-->
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。
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 用來在頁面中表示一套結構完整且獨立的內容部分.可以用來呈現論壇的一個帖子，
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-rl b、-ms-writing-mode:tb-rl c、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: red background-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基礎小筆記再整理