1.利用css在列表靠頭和末尾添加箭頭：
/* 左箭頭*/
ol a[rel="prev"]:before {
content: "\00AB";
padding-left: 0.5em;
}
/* 右箭頭*/
ol a[rel="next"]:after {
content: "00BB";
padding-right: 0.5em;
}
2.讓父元素包含浮動(dòng)的子元素：
- 添加一個(gè)進(jìn)行清理的元素
- 讓父元素浮動(dòng)荤堪，并使用某個(gè)元素進(jìn)行清理
overflow：hidden
3.固定寬度合陵，流式和彈式布局
- 固定寬度：簡(jiǎn)便枢赔，常用，不能充分利用可用空間拥知，不靈活
- 流式布局：尺寸用百分?jǐn)?shù)設(shè)置踏拜。能夠相對(duì)于瀏覽器窗口進(jìn)行伸縮。但是在窗口寬度較小的時(shí)候低剔，行變得非常窄速梗，有必要添加以像素或
em為單位min-width，防止布局變得過窄 - 彈性布局：以
em為單位設(shè)置元素的寬度襟齿。 - 流式和彈性圖像：彈性布局使遇到圖像元素姻锁，可將圖像用作背景，然后容器設(shè)置100%并且將
overflow設(shè)置為hidden
4.常見bug
- 雙邊距浮動(dòng)bug
IE 6和更低版本猜欺，使任何浮動(dòng)元素的外邊距加倍
解決方案：設(shè)置display：inline可修復(fù)bug - 3像素文本偏移bug
IE 5和IE 6中位隶，當(dāng)一個(gè)文本與一個(gè)浮動(dòng)元素相鄰時(shí)，這個(gè)bug就會(huì)表現(xiàn)出來：
例如：
.myFloat {
float: left;
width: 200px;
}
p {
margin-left: 200px;
}
/*
修復(fù)：
*/
p {
/*
* IE 6中开皿，為容器設(shè)置一個(gè)小的高度涧黄，IE 6
* 和更低版本元素會(huì)不正確的擴(kuò)展他們的高度，
* 設(shè)置小的高度不會(huì)影響實(shí)際高度赋荆。
*/
height: 1%;
margin-left: 0;
}
.myFloat {
margin-right: -3px;
}
如果浮動(dòng)元素是圖片的話笋妥，這樣還不夠；
圖片解決方案：
p {
height: 1%;
margin-left: 0;
}
img .myFloat {
margin: 0;
}
IE6的重復(fù)字符bug
當(dāng)一系列浮動(dòng)元素的第一個(gè)和最后一個(gè)元素之間有多個(gè)注釋時(shí)糠睡，就會(huì)出現(xiàn)這個(gè)bug挽鞠。
前倆個(gè)注釋沒有影響，但后續(xù)每個(gè)注釋會(huì)導(dǎo)致倆個(gè)自讀重復(fù)出現(xiàn)狈孔。
解決：刪掉注釋相對(duì)容器中的絕對(duì)定位
IE 5,6的定位不夠準(zhǔn)確信认，需要迫使相對(duì)定位的容器擁有布局
可以用條件注釋為容器設(shè)置一個(gè)小的高度，IE 6和更低版本元素會(huì)不正確的擴(kuò)展他們的高度均抽，設(shè)置小的高度
不會(huì)影響實(shí)際高度嫁赏。
