越少的浮動(dòng)，就會(huì)越少的代碼，會(huì)有更靈活的頁面，會(huì)有擴(kuò)展性更強(qiáng)的頁面。這不多說，歸結(jié)為到一定水平了，浮動(dòng)會(huì)用的較少。另外，您也會(huì)避免使用浮動(dòng)+margin的用法。所以，越后來越不易遇到這種bug。
技巧二：padding，marign，height，width
注意是技巧，不是方法： 寫好標(biāo)準(zhǔn)頭”>”>盡量用padding，慎用margin，height盡量補(bǔ)上100%，父級(jí)height有定值子級(jí)height不用100%，子級(jí)全為浮動(dòng)時(shí)底部補(bǔ)個(gè)空clear:both的div寬盡量用margin，慎用padding，width算準(zhǔn)實(shí)際要的減去padding
技巧三：顯示類（display:block,inline）
display:block,inline兩個(gè)元素
display:block; //可以為內(nèi)嵌元素模擬為塊元素
display:inline; //實(shí)現(xiàn)同一行排列的的效果 display:table; //for FF,模擬table的效果display:block塊元素，元素的特點(diǎn)是： 總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度
display:inline就是將元素顯示為行內(nèi)元素，元素的特點(diǎn)是：和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。span，a，label，input，img，strong和em是 inline 元素的例子
技巧四：怎樣使一個(gè)div層居中于瀏覽器中？
1）
<style type="text/css"> -- div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } --> style>2）div里的內(nèi)容，IE默認(rèn)為居中，而FF默認(rèn)為左對齊，可以嘗試增加代碼margin: 0 auto;
技巧五：float的div閉合;清除浮動(dòng);自適應(yīng)高度
① 例如：＜div>＜div>＜div>
②作為外部 wrapper 的 div 不要定死高度,為了讓高度能自適應(yīng)，要在wrapper里面加上:hidden; 當(dāng)包含float的box的時(shí)候，高度自適應(yīng)在IE下無效，這時(shí)候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達(dá)到了兼容。
例如某一個(gè)wrapper如下定義：
.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}③對于排版,我們用得最多的css描述可能就是float:left.有的時(shí)候我們需要在n欄的float div后面做一個(gè)統(tǒng)一的背景,譬如:
<div id=”page”>
<div id=”left”>＜/div> <div id=”center”>＜/div> <div id=”right”>＜/div> div>比如我們要將page的背景設(shè)置成藍(lán)色,以達(dá)到所有三欄的背景顏色是藍(lán)色的目的,但是我們會(huì)發(fā)現(xiàn)隨著left 的向下拉長,而page居然保存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設(shè)置成float,所以我們應(yīng)該這樣解決：
<div id=”page”>
<div id=”bg” style=”float:left;width:100%”> <div id=”left”>＜/div> <div id=”center”>＜/div> <div id=”right”>＜/div> div> div>
再嵌入一個(gè)float left而寬度是100%的DIV解決之。
④萬能float 閉合(非常重要!)
關(guān)于 clear float 的原理可參見 [How To Without Markup],將以下代碼加入Global CSS 中,給需要閉合的div加上class=””即可,屢試不爽。
/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */或者這樣設(shè)置：.hackbox{display:table; //將對象作為塊元素級(jí)的表格顯示}
技巧六：div嵌套時(shí) y軸上 padding和 marign的問題
web前端開發(fā)過程中，出現(xiàn)瀏覽器兼容問題，一般從什么角度考慮解決：
1、寫代碼的時(shí)候遵循W3C標(biāo)準(zhǔn)，按照最新穩(wěn)定版本的IE或WebKit內(nèi)核瀏覽器進(jìn)行編碼。
2、遇到部分無法全面解決瀏覽器兼容的時(shí)候，采取CSS的hack手段進(jìn)行針對性微調(diào)。
3、遇到特別難解決的，可以用JS強(qiáng)制修改。
border:none與border:0的區(qū)別
體現(xiàn)有兩點(diǎn)：
1、理論上的性能差異；
2、瀏覽器兼容性的差異。
1、性能差異：
【border：0】把border設(shè)為“0“像素雖然在頁面上看不見，但按border默認(rèn)值理解，瀏覽器依然會(huì)對border-width/border-color進(jìn)行渲染，即已經(jīng)占用了內(nèi)存值。
【border：none】把border設(shè)為”none“即沒有，瀏覽器解析”none“時(shí)將不作出渲染動(dòng)作，即不會(huì)消耗內(nèi)存值。
2、兼容性差異：
兼容性差異只針對IE6、IE7與標(biāo)簽button、input而言，在win、win7的XP主題下均會(huì)出現(xiàn)此現(xiàn)象。
當(dāng)border為”none“時(shí)對IE6、IE7無效邊框依然存在，如下圖所示：
當(dāng)border為”0“時(shí)對IE6、IE7，如下圖所示：
當(dāng)border為”0“或者”none“時(shí)Firefox下顯示一致，如下圖所示：
不同瀏覽器margin和padding差異較大
顯示區(qū)別
對于IE,父元素用text-align:center;可實(shí)現(xiàn)父級(jí)元素內(nèi)的子元素居中，
對于FF,子元素需要用margin：0 auto。
在IE6中無法設(shè)置微型高度
顯示區(qū)別
1、居中問題
div里的內(nèi)容，IE默認(rèn)為居中，而FF默認(rèn)為左對齊，可以嘗試增加代碼margin: 0 auto;
2、高度問題
兩上下排列或嵌套的div，上面的div設(shè)置高度(height)，如果div里的實(shí)際內(nèi)容大于所設(shè)高度，在FF中會(huì)出現(xiàn)兩個(gè)div重疊的現(xiàn)象；但在IE中，下面的div會(huì)自動(dòng)給上面的div讓出空間所以為避免出現(xiàn)層的重疊，高度一定要控制恰當(dāng)，或者干脆不寫高度，讓他自動(dòng)調(diào)節(jié)，比較好的方法是 height:100%;但當(dāng)這個(gè)div里面一級(jí)的元素都float了的時(shí)候，則需要在div塊的最后，閉和前加一個(gè)沉底的空div，對應(yīng)CSS是：. {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;:hidden;}
3、clear:both;
不想受到float浮動(dòng)的，就在div中寫入clear:both;
4、IE浮動(dòng) margin產(chǎn)生的雙倍距離
#box {
float:left;
width:100px;
margin:0 0 0 100px; //這種情況之下IE會(huì)產(chǎn)生200px的距離
display:inline; //使浮動(dòng)忽略
5、padding問題
FF設(shè)置 padding 后，div會(huì)增加 height 和 width，但I(xiàn)E不會(huì) （* 標(biāo)準(zhǔn)的 XHTML1.0 定義 dtd 好像一致了）高度控制恰當(dāng)，或嘗試使用 height:100%;寬度減少使用 padding但根據(jù)實(shí)際經(jīng)驗(yàn)，一般FF和IE的 padding 不會(huì)有太大區(qū)別，div 的實(shí)際寬 = width + padding ，所以div寫全 width 和 padding，width 用實(shí)際想要的寬減去 padding 定義。
6、div嵌套時(shí) y軸上 padding和 marign的問題
FF里 y 軸上 子div 到 父div 的距離為 父padding + 子marign
IE里 y 軸上 子div 到 父div 的距離為 父padding 和 子marign 里大的一個(gè)
FF里 y 軸上 父padding=0 且 border=0 時(shí)，子div 到 父div 的距離為0，子marign 作用到 父div 外面
7、padding，marign，height，width的傻瓜式解決技巧
注意是技巧，不是方法：
寫好標(biāo)準(zhǔn)頭
高盡量用padding，慎用margin，height盡量補(bǔ)上100%，父級(jí)height有定值子級(jí)height不用100%，子級(jí)全為浮動(dòng)時(shí)底部補(bǔ)個(gè)空clear:both的div寬盡量用margin，慎用padding，width算準(zhǔn)實(shí)際要的減去padding
8、列表類
1. ul標(biāo)簽在FF中默認(rèn)是有 padding值的，而在IE中只有margin有值
先定義 ul {margin:0;padding:0;}
2. ul和ol列表縮進(jìn)問題消除ul、ol等列表的縮進(jìn)時(shí)，樣式應(yīng)寫成: {list-style:none;margin:0px;padding:0px;}
9、顯示類（display:block,inline）
1. display:block,inline兩個(gè)元素
display:block; //可以為內(nèi)嵌元素模擬為塊元素
display:inline; //實(shí)現(xiàn)同一行排列的的效果
display:table; //for FF,模擬table的效果
display:block 塊元素，元素的特點(diǎn)是：
總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度
，
，，， 和 是塊元素的例子
display:inline 就是將元素顯示為行內(nèi)元素，元素的特點(diǎn)是：和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。，，
請?zhí)顚懠t包祝福語或標(biāo)題
個(gè)
紅包個(gè)數(shù)最小為10個(gè)
元
紅包金額最低5元
當(dāng)前余額3.43元
需支付：10.00元
取消確定