第六天divcss常見布局、ie6兼容性公共層代碼優(yōu)化核心

DIV+CSS一、CSS基礎(chǔ)知識(shí)二、選擇器三、常見元素屬性1.高寬尺寸2.邊框3.鏈接顏色4.字體和文本5.表格6.背景7.列表8.外間距、內(nèi)間距9.布局四、DIV+CSS常見布局課程提要DIV+CSS常見布局一列固定寬度一列寬度自適應(yīng)二列固定寬度二列寬度自適應(yīng)兩列：左側(cè)寬度固定，右列寬度自適應(yīng)兩列：左側(cè)寬度自適應(yīng)，右列寬度固定兩列：寬度固定居中三列：左右欄寬度固定，中間列寬度自適應(yīng)高度自適應(yīng)水平列表導(dǎo)航欄一列固定寬度DIV+CSS常見布局<style>div{width:300px;height:300px;background:blue;}</style><div></div>一列寬度自適應(yīng)DIV+CSS常見布局<style>div{width:90%;height:300px;background:blue;}</style><div></div>/*居中效果，再加上以下CSS代碼*/div{margin:0pxauto;}@mediaonlyscreenand(max-width:767px){}響應(yīng)式布局div{ width:100%; height:150px; background:#03F;}@media(max-width:414px){ div{ width:80%; height:100px; background:#0C0; }}自適應(yīng)導(dǎo)航條DIV+CSS常見布局<style>*{margin:0px;padding:0px;}ul,li{list-style:none;}ul{overflow:hidden;_zoom:1;min-width:500px;}ulli{float:left;width:9%;background:#0F0;height:30px;line-height:30px;text-align:center;border-right:1pxsolid#000;}ullia{text-decoration:none;color:#333;}</style><ul> <li><ahref="###">首頁</a></li> <li><ahref="###">首頁</a></li> <li><ahref="###">首頁</a></li> <li><ahref="###">首頁</a></li> <li><ahref="###">首頁</a></li> <li><ahref="###">首頁</a></li> <li><ahref="###">首頁</a></li> <li><ahref="###">首頁</a></li> <li><ahref="###">首頁</a></li> <li><ahref="###">首頁</a></li></ul>二列固定寬度DIV+CSS常見布局<style>#left{width:300px;height:300px;background:red;float:left;}#right{width:300px;height:300px;background:blue;float:left;}</style><divid="left"></div><divid="right"></div>二列寬度自適應(yīng)DIV+CSS常見布局<style>#left{width:25%;height:300px;float:left;background:red;}#right{width:75%;height:300px;float:left;background:blue;}</style><divid="left"></div><divid="right"></div>兩列：左側(cè)寬度固定，右列寬度自適應(yīng)DIV+CSS常見布局<style>*{margin:0px;padding:0px;color:#fff;font-size:20px;}.left{background:red;float:left;width:200px;height:500px;}.right{background:blue;width:100%;height:600px;}p{margin-left:200px;}</style><divclass="left">ddddddddddddddddddddddddddddddd</div><divclass="right"> <p>是否薩芬撒發(fā)生發(fā)生大幅度撒ssssssssssssssssssssssssssssssss</p></div><style>*{margin:0px;padding:0px;color:#fff;font-size:20px;}.left{background:red;width:200px;height:500px;position:absolute;left:0px;top:0px;}.right{background:blue;width:100%;height:500px;}p{margin-left:200px;}</style><divclass="left">ddddddddddddddddddddddddddddddd</div><divclass="right"> <p>是否薩芬撒發(fā)生發(fā)生大幅度撒ssssssssssssssssssssssssssssssss</p></div>兩列：寬度固定居中DIV+CSS常見布局<style>body{text-align:center;}div{text-align:left;}#center{margin:0pxauto;background:yellow;width:400px;height:100%;}#left{float:left;width:100px;height:200px;background:red;}#right{float:left;width:300px;height:300px;background:blue;}</style><divid="center"><divid="left"></div><divid="right"></div></div>三列自適應(yīng)DIV+CSS常見布局<style>#left,#right,#center{width:10%;height:100px;float:left;background:blue;}#right{background:red;}#center{width:80%;background:purple}</style><divid="left"></div><divid="center"></div><divid="right"></div>高度自適應(yīng)DIV+CSS常見布局<style>*{margin:0px;padding:0px;color:#fff;font-size:20px;}.left{background:red;width:200px;height:80%;position:fixed;top:0;left:0;}</style><divclass="left">dddddd</div>如果沒有給限制，容器fixed之后，再給100%，可以實(shí)現(xiàn)占整屏幕(absolute也可以，完美兼容IE7+)水平列表導(dǎo)航欄DIV+CSS常見布局<style>ul{list-style:square;}#ul{margin:0px;padding:0px;width:400px;overflow:auto;*zoom:1;}#ulli{float:left;list-style:none;padding:0px10px;}</style>常用csshackCSS的不同瀏覽器兼容性問題<!doctypehtml><style>a{color:blue;/*所有瀏覽器*/color:brown\9\0;/*IE9*/background-color:red\0;/*IE8/IE9/IE10*/background-color:red\9;/*IE8、IE7、IE6*/*color:red;/*IE7、IE6*/_color:green;/*IE6*/}@-moz-documenturl-prefix(){/*火狐*/ a{color:yellow;}}</style><ahref="#">link</a>下課，自己搜索谷歌以及IE11的hack怎么寫。IE條件注釋IE條件注釋作為課后閱讀：

CSS常見問題解決辦法1、表格內(nèi)容垂直居中：vertical-align:middle2、文字和圖片垂直對其，給圖片加vertical-align:middle3、input輸入框和按鈕垂直居中：給兩個(gè)都加vertical-align:middle注意： 1、vertical-align除了middle比較好用之外，還可以寫像素、百分比，微調(diào) 2、vertical-align可以應(yīng)用在內(nèi)嵌的標(biāo)簽上，實(shí)現(xiàn)內(nèi)嵌標(biāo)簽和文字垂直對齊CSS的不同瀏覽器兼容性問題1、重置內(nèi)外間距*{margin:0;padding:0;}字體縮寫font:bolditalic14px/40px"宋體";font-weight,font-style,font-size,line-height,font-familyCSS的不同瀏覽器兼容性問題2、MARGIN加倍(雙邊距)的問題置為float的div在IE下設(shè)置的margin會(huì)加倍。這是一個(gè)ie6都存在的bug。解決方案是在這個(gè)div里面加上display:inline；例如：<divid="imfloat"></div>相應(yīng)的CSS為#imfloat{float:left;margin:5px;/*IE6下理解為10px*/display:inline;/*IE6下再理解為5px*/}CSS的不同瀏覽器兼容性問題3、IE63像素BUG<style>*{margin:0px;padding:0px;}#div1{ width:200px; height:100px; float:left; background-color:blue;}#div2{ background-color:red; height:100px; /*float:left;*/}</style><divid="div1">left</div><divid="div2">right</div>CSS的不同瀏覽器兼容性問題4、居中問題/*居中效果，再加上以下CSS代碼*/div{margin:0pxauto;/*其他瀏覽*/}body{

text-align:center;/*IE5-*/}CSS的不同瀏覽器兼容性問題5、input光標(biāo)垂直居中、IE8select內(nèi)容垂直居中，用padding，不要用line-height6、正常狀況下，如果外面的容器浮動(dòng)了，變成了內(nèi)嵌的整行標(biāo)簽，那么，他里面如果有整行標(biāo)簽，是不需要加寬度的。例如，導(dǎo)航欄的li里面的a標(biāo)簽用了display:block。但是，在IE6下面，必須給a加寬度，否則會(huì)占一整行?；蛘呓oa變成display:inline-block;7、偽類正常情況下，除了a標(biāo)簽，其他標(biāo)簽也可以用。但是，在IE6，不支持。例如：div:hover{}。8、內(nèi)嵌標(biāo)簽的inline-block支持IE6、IE7，整行標(biāo)簽的inline-block不支持IE6、IE79、position:fixed{瀏覽器定位}，不兼容IE610、p最好加上寬度，免得不換行CSS的不同瀏覽器兼容性問題11、IE6如果內(nèi)容過多，會(huì)把容器撐開，就算容器設(shè)置了寬高，但是其他瀏覽器表現(xiàn)為溢出。12、強(qiáng)制360使用webkit渲染：<metaname="renderer"content="webkit">13、讓IE使用最高版本的內(nèi)核：推薦：<metahttp-equiv="patible"content="IE=edge"/>14、子容器margin-top影響父容器：15、浮動(dòng)后，文字掉下來了：1）li加寬度2）overflow:hidden;text-overflow:ellipsis;white-space:nowrap;15、圖片和整行標(biāo)簽中間有間隙，可以給圖片display:block，或者讓圖片浮動(dòng)16、多個(gè)圖片在一行，中間有間隙，是因?yàn)閳D片還行被當(dāng)成了空格。CSS的不同瀏覽器兼容性問題16、tab選項(xiàng)卡布局：<scriptsrc=""></script><style>*{margin:0px;padding:0px;}ul,li{list-style:none;}ul{height:36px;border-bottom:1pxsolid#900;}li{float:left;width:58px;height:34px;border:1pxsolid#fff;border-top-width:2px;border-bottom:none;text-align:center;line-height:34px;}li.current{border-color:#900;border-bottom:1pxsolid#fff}</style><ul> <liclass="current"><ahref="###">大牌</a></li> <li><ahref="###">男裝</a></li> <li><ahref="###">女裝</a></li></ul><script>$(function(){ $("li").mouseover(function(){ $(this).addClass("current").siblings().removeClass("current"); })})</script>17、div等容器內(nèi)長文本的不換行問題（了解。在html中，如果英文單詞沒有空格，而且非常長，html認(rèn)為它是一個(gè)單詞，不會(huì)換行）(針對英文，中文不存在)*{word-wrap:break-word;word-break:break-all;}word-wrap：內(nèi)容是否可以word-break：詞間換行CSS的不同瀏覽器兼容性問題17、IE6最小高度（IE6不識(shí)別小于12px的高度的解決辦法）當(dāng)你要設(shè)置一個(gè)容器，高度小于12px的時(shí)候，加上這句話_height:5px;_font:0px/0pxArial;要解決這個(gè)問題，可以強(qiáng)制定義該DIV的字體尺寸，或者定義overflow屬性來限制DIV高度的自動(dòng)調(diào)整。比如:

<divstyle="height:5px;font:0pxArial;line-height:0;"></div>

或者

<divstyle="height:5px;overflow:hidden;"></div>

值得注意的是，設(shè)置font-size:0時(shí)這個(gè)容器的高度最小為2px，如果要設(shè)置DIV高度為0或1px，則需要使用overflow:hidden;來實(shí)現(xiàn)。18、a標(biāo)簽套圖片，會(huì)在底部產(chǎn)生空白<ahref=“#”><imgsrc=“1.jpg”/></a>原因：a標(biāo)簽?zāi)J(rèn)的line-height起作用解決辦法：1、將a變成塊狀

2、將a的line-height變成019、IE6的塊狀標(biāo)簽的inline-block問題inline-block在IE6僅支持內(nèi)嵌元素，如a、span、i等等，不支持塊狀的，如div、p等等，解決辦法是：display:inline-block;*zoom:1;*display:inline;CSS的不同瀏覽器兼容性問題20、內(nèi)嵌標(biāo)簽使用padding，不能把外面的容器擠下去，除非把它變成塊狀。把display:block去掉看看區(qū)別<style>*{margin:0px;padding:0px;}a{border:1pxsolidred;padding:50px;display:block;}div{border:1pxsolidblue;}</style><ahref="###">我a鏈接</a><div>我是div</div>上面的代碼，把padding改成margin，把display:block去掉，試試。CSS的不同瀏覽器兼容性問題21、容器的垂直居中方法一、給父容器position：relative，需要居中的容器position：absolute，top:50%，margin-top:自身高度的一半的負(fù)值，這個(gè)時(shí)候，水平方向上的margin:0auto不起作用，同樣，給left:50%，margin-left:自身高度的一半的負(fù)值此方法完美兼容IE6方法二、讓容器里面的內(nèi)容，無論是什么標(biāo)簽或者內(nèi)容，都在垂直居中1、給父容器display:table2、給子容器display:table-cell;vertical-align:middle;3、無論在子容器里面放置任何內(nèi)容，都會(huì)垂直居中。CSS編寫和命名規(guī)范在任何一個(gè)項(xiàng)目或者系統(tǒng)開發(fā)之前都需要定制一個(gè)開發(fā)約定和規(guī)則，這樣有利于項(xiàng)目的整體風(fēng)格統(tǒng)一、代碼維護(hù)和擴(kuò)展。由于Web項(xiàng)目開發(fā)的分散性、獨(dú)立性、整合的交互性等，所以定制一套完整的約定和規(guī)則顯得尤為重要。CSS選擇符的命名所有選擇符必須有英文字母或“_”下劃線開頭；樣式名必須是表示該樣式的大概含義；參考后面的“樣式命名參考”。當(dāng)定義的樣式名比較復(fù)雜時(shí)用下劃線把層次分開；比如：dcrm_logo{...}dcrm_logo_ico{...}Html不區(qū)分大小寫，按照w3c規(guī)范，應(yīng)該所有的標(biāo)簽都小寫CSS不區(qū)分大小寫，按照w3c規(guī)范，應(yīng)該所有的樣式都小寫CSS命名(class、ID)，區(qū)分大小寫常用CSS選擇符命名參考圖片的命名與書寫圖片的命名原則小寫英文字母名稱放在頭尾兩部分，用“_”下劃線隔開，頭部表示此圖片的大類性質(zhì)例如廣告、標(biāo)志、菜單、按鈕等等；尾部表示圖片的概念。css代碼優(yōu)化高效CSS屬性的簡寫div{border:1pxsolidred;background:redurl('demo.jpg');}?避免使用Hack?css每個(gè)屬性之間需換行,為了保持良好的可讀性和維護(hù)性?移除多余的結(jié)構(gòu)(framewo