1. 清除浮動解決高度塌陷
? ? ? 1.? 給父元素設(shè)置高度
? ? ? 2.? 在結(jié)尾處添加新的div標(biāo)簽clear：both
? ? ? 3.? 父級div定義偽類：after和zoom
? ? ? 4.? 給父元素設(shè)置overflow：hidden;
? ? ? 5.? 父級div定義overflow：auto
2.? clearfix解決高度塌陷
? ? ? 主要解決：1、高度塌陷問題；2父子元素邊界重合問題
? ? ? .clearfix:after,
? ? ? .clearfix:before
? ? ? {
? ? ? content: " ";
? ? ? display:table;
? ? ? }
? ? ? .clearfix:after
? ? ? {
? ? ? clear:both;
? ? ? }
? ? ? IE6一下不支持，所以i在后面新建一個clearfix，定zoom: 1
3.? ps
? ? ? Adobe Photoshop是Adobe Systems開發(fā)和發(fā)行的圖像處理軟件，主要處理以像素所構(gòu)成的數(shù)字圖像。
? ? ? 可進(jìn)行平面處理,廣告攝影,設(shè)想創(chuàng)意,專業(yè)評測,網(wǎng)頁制作,后期修飾,視覺創(chuàng)意,界面設(shè)計。
? ? ? 功能上看，該軟件可分為圖像編輯、圖像合成、校色調(diào)色及功能色效制作部分等。
4.? 相對定位
? ? ? 定位：
? ? ? - 定位指的就是將指定的元素擺放到頁面的任意位置
? ? ? 通過定位可以任意的擺放元素
? ? ? - 通過position屬性來設(shè)置元素的定位
? ? ? - 可選值：
? ? ? static：默認(rèn)值，元素沒有開啟定位
? ? ? relative：開啟元素的相對定位
? ? ? absolute：開啟元素的絕對定位
? ? ? fixed：開啟元素的固定定位（也是絕對定位的一種）
? ? ? 當(dāng)元素的position屬性設(shè)置為relative時，則開啟了元素的相對定位
? ? ? 1.當(dāng)開啟了元素的相對定位以后，而不設(shè)置偏移量時，元素不會發(fā)生任何變化
? ? ? 2.相對定位是相對于元素在文檔流中原來的位置進(jìn)行定位
? ? ? 3.相對定位的元素不會脫離文檔流
? ? ? 4.相對定位會使元素提升一個層級
? ? ? 5.相對定位不會改變元素的性質(zhì)，塊還是塊，內(nèi)聯(lián)還是內(nèi)聯(lián)
? ? ? 當(dāng)開啟了元素的定位（position屬性值是一個非static的值）時，可以通過left right top bottom四個屬性來設(shè)置元素的偏移量
? ? ? left：元素相對于其定位位置的左側(cè)偏移量
? ? ? right：元素相對于其定位位置的右側(cè)偏移量
? ? ? top：元素相對于其定位位置的上邊的偏移量
? ? ? bottom：元素相對于其定位位置下邊的偏移量
? ? ? 通常偏移量只需要使用兩個就可以對一個元素進(jìn)行定位，
? ? ? 一般選擇水平方向的一個偏移量和垂直方向的偏移量來為一個元素進(jìn)行定位
5.? 絕對定位
? ? ? 當(dāng)position屬性值設(shè)置為absolute時，則開啟了元素的絕對定位
? ? ? 絕對定位：
? ? ? ? ? 1.開啟絕對定位，會使元素脫離文檔流
? ? ? ? ? 2.開啟絕對定位以后，如果不設(shè)置偏移量，則元素的位置不會發(fā)生變化
? ? ? ? ? 3.絕對定位是相對于離他最近的、開啟了定位的祖先元素進(jìn)行定位的（一般情況，開啟了子元素的絕對定位，都會同時開啟父元素的相對定位）
? ? ? ? ? 如果所有的祖先元素都沒有開啟定位，則會相對于瀏覽器窗口進(jìn)行定位
? ? ? ? ? 4.絕對定位會使元素提升一個層級
? ? ? ? ? 5.絕對定位會改變元素的性質(zhì)：
? ? ? ? ? 內(nèi)聯(lián)元素變成塊元素，
? ? ? ? ? 塊元素的寬度和高度默認(rèn)都被內(nèi)容撐開
6.? 固定定位
? ? ? 當(dāng)元素的position屬性設(shè)置fixed時，則開啟了元素的固定定位
? ? ? ? 固定定位也是一種絕對定位，它的大部分特點(diǎn)都和絕對定位一樣
? ? ? 不同的是：
? ? ? 固定定位永遠(yuǎn)都會相對于瀏覽器窗口進(jìn)行定位
? ? ? 固定定位會固定在瀏覽器窗口某個位置，不會隨滾動條滾動
? ? ? IE6不支持固定定位
7.? 元素的頂級
? ? ? 如果定位元素的層級是一樣，則下邊的元素會蓋住上邊的
? ? ? ? 通過z-index屬性可以用來設(shè)置元素的層級
? ? ? 可以為z-index指定一個正整數(shù)作為值，該值將會作為當(dāng)前元素的層級，層級越高，越優(yōu)先顯示
? ? ? 對于沒有開啟定位的元素不能使用z-index
8.? 透明度
? ? ? 設(shè)置元素的透明背景
? ? ? opacity可以用來設(shè)置元素背景的透明，它需要一個0-1之間的值
? ? ? 0 表示完全透明
? ? ?1 表示完全不透明
? ? ? 0.5 表示半透明
? ? opacity屬性在IE8及以下的瀏覽器中不支持
? ? IE8及以下的瀏覽器需要使用如下屬性代替
? ? alpha(opacity=透明度)
? ? 透明度，需要一個0-100之間的值
? ? 0 表示完全透明
? ? 100 表示完全不透明
? ? 50 半透明
? ? 這種方式支持IE6，但是這種效果在IE Tester中無法測試
9.? 背景
? ? ? 使用background-image來設(shè)置背景圖片
? ? ? 語法：background-image:url(相對路徑);
? ? ? - 如果背景圖片大于元素，默認(rèn)會顯示圖片的左上角
? ? ? - 如果背景圖片和元素一樣大，則會將背景圖片全部顯示
? ? ? - 如果背景圖片小于元素大小，則會默認(rèn)將背景圖片平鋪以充滿元素
? ? ? 可以同時為一個元素指定背景顏色和背景圖片，這樣背景顏色將會作為背景圖片的底色
? ? ? 一般情況下設(shè)置背景圖片時都會同時指定一個背景顏色
? ? ? background-repeat用于設(shè)置背景圖片的重復(fù)方式
可選值：
? ? ? repeat，默認(rèn)值，背景圖片會雙方向重復(fù)（平鋪）
? ? ? no-repeat，背景圖片不會重復(fù)，有多大就顯示多大
? ? ? repeat-x， 背景圖片沿水平方向重復(fù)
? ? ? repeat-y，背景圖片沿垂直方向重復(fù)
10.? 電驢導(dǎo)航條
? ? <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電驢導(dǎo)航</title>
<style type="text/css">
.box{
width: 990px;
height: 32px;
background: #000;
margin: 50px auto;
/* 設(shè)置背景圖片 /
background-image: url(./img/BG.png);
/ 設(shè)置水平方式重復(fù) */
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
11.? 背景偏移定位
? ? ? 背景圖片默認(rèn)是貼著元素的左上角顯示
? ? ? 通過background-position可以調(diào)整背景圖片在元素中的位置
? ? ? 可選值：
? ? ? 該屬性可以使用 top right left bottom center中的兩個值來指定一個背景圖片的位置
? ? ? top left 左上
? ? ? bottom right 右下
? ? ? 如果只給出一個值，則第二個值默認(rèn)是? ? ? ? ? ? ? center
? ? ? 也可以直接指定兩個偏移量
? ? ? 第一個值是水平偏移量
? ? ? - 如果指定的是一個正值，則圖片會向右移動指定的像素
? ? ? - 如果指定的是一個負(fù)值，則圖片會向左? ? 移動指定的像素
? ? ? 第二個是垂直偏移量
? ? ? - 如果指定的是一個正值，則圖片會向下移動指定的像素
? ? ? - 如果指定的是一個負(fù)值，則圖片會向上移動指定的像素
