border-radius：圓角

• 1個參數(shù)：四個角都應(yīng)用

• 2個參數(shù)：第一個參數(shù)應(yīng)用于 左上、右下；第二個參數(shù)應(yīng)用于 左下、右上

• 3個參數(shù)：第一個參數(shù)應(yīng)用于 左上；第二個參數(shù)應(yīng)用于 左下、右上；第三個參數(shù)應(yīng)用于右下

• 4個參數(shù)：左上、右上、右下、左下（順時針）

border: 簡寫

• border: 2px yellow solid; 

box-shadow：邊框陰影

• 第一個參數(shù)是左右位置

• 第二個參數(shù)是上下位置

• 第三個參數(shù)是虛化效果

• 第四個參數(shù)是顏色

• box-shadow: 10px 10px 5px #888;

圓角應(yīng)用-demo1

圓角應(yīng)用-demo2

邊框應(yīng)用-demo3

邊框應(yīng)用-demo4

6  列表屬性

list-style-type: 列表項標(biāo)志的類型

• none 去除標(biāo)志

• decimal-leading-zero;  02.

• square;  方框

• circle;  空心圓

• upper-alph;  大寫字母

• disc;   實心圓

list-style-image：將圖象設(shè)置為列表項標(biāo)志

list-style-position：列表項標(biāo)志的位置

• inside

• outside

list-style：縮寫

• list-style:square inside url('/i/arrow.gif');

ul,ol{ list-style: decimal-leading-zero;    # 數(shù)字01,02,
　　list-style: none;    # 不顯示
　　list-style: circle;    # 空心圓
　　list-style: upper-alpha;    # 字母A,B,
　　list-style: disc; 　　# 實心圓(默認(rèn))
}    

7  dispaly屬性

8  盒子模型

　　padding:用于控制內(nèi)容與邊框之間的距離；

　　margin: 用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達(dá)到相互隔開的目的。

我們通過設(shè)置width 和 height 只是設(shè)置了content的寬度與高度!

盒子的寬度(高度)=content+padding+border+margin

實例： 300px*300px的盒子裝著100px*100px的盒子，分別通過margin和padding設(shè)置將小盒子移到大盒子的中間

注意1：邊框在默認(rèn)情況下會定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框。

　　這是因為body本身也是一個盒子（外層還有html），在默認(rèn)情況下，body距離html會有若干像素的margin，具體數(shù)值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器窗口的邊框了。

注意2：margin collapse（邊界塌陷或者說邊界重疊）

　　外邊距的重疊只產(chǎn)生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規(guī)則，其實有其現(xiàn)實意義。

　　設(shè)想，當(dāng)我們上下排列一系列規(guī)則的塊級元素（如段落P）時，那么塊元素之間因為外邊距重疊的存在，段落之間就不會產(chǎn)生雙倍的距離。

　　1.兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值

　　2.父子div：如果 父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標(biāo)簽包括border，padding，inline content 中的其中一個，然后按此div 進(jìn)行margin !!!

View Code

9  float

首先要知道，div是塊級元素，在頁面中獨占一行，自上而下排列，也就是傳說中的流。

　　可以看出，即使div1的寬度很小，頁面中一行可以容下div1和div2，div2也不會排在div1后邊，因為div元素是獨占一行的。注意，以上這些理論，是指標(biāo)準(zhǔn)流中的div。

　　無論多么復(fù)雜的布局，其基本出發(fā)點均是：“如何在一行顯示多個div元素”。

　　浮動可以理解為讓某個div元素脫離標(biāo)準(zhǔn)流，漂浮在標(biāo)準(zhǔn)流之上，和標(biāo)準(zhǔn)流不是一個層次。

例如，假設(shè)上圖中的綠色div2浮動，那么它將脫離標(biāo)準(zhǔn)流，但div1、div3、div4仍然在標(biāo)準(zhǔn)流當(dāng)中，所以div3會自動向上移動，占據(jù)div2的位置，重新組成一個流。如圖：

　　從圖中可以看出，由于對div2設(shè)置浮動，因此它不再屬于標(biāo)準(zhǔn)流，div3自動上移頂替div2的位置，div1、div3、div4依次排列，成為一個新的流。

　　又因為浮動是漂浮在標(biāo)準(zhǔn)流之上的，因此div2擋住了一部分div3，div3看起來變“矮”了

　　這里div2用的是左浮動( float:left;)，可以理解為漂浮起來后靠左排列，右浮動(float:right;)當(dāng)然就是靠右排列。 這里的靠左、靠右是說頁面的左、右邊緣。

　　如果我們把div2采用右浮動，會是如下效果：

　　此時div2靠頁面右邊緣排列，不再遮擋div3，讀者可以清晰的看到上面所講的div1、div3、div4組成的流。

　　目前為止我們只浮動了一個div元素，多個呢？

　　下面我們把div2和div3都加上左浮動，效果如圖：

　　同理，由于div2、div3浮動，它們不再屬于標(biāo)準(zhǔn)流，因此div4會自動上移，與div1組成一個“新”標(biāo)準(zhǔn)流，而浮動是漂浮在標(biāo)準(zhǔn)流之上，因此div2又擋住了div4。

　　當(dāng)同時對div2、div3設(shè)置浮動之后，div3會跟隨在div2之后，不知道讀者有沒有發(fā)現(xiàn)，一直到現(xiàn)在，div2在每個例子中都是浮動的，但并沒有跟隨到div1之后。

　　因此，我們可以得出一個重要結(jié)論：

　　1.假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標(biāo)準(zhǔn)流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。

　　2.div的順序是HTML代碼中div的順序決定的。

　　3.靠近頁面邊緣的一端是前，遠(yuǎn)離頁面邊緣的一端是后。

為了幫助讀者理解，再舉幾個例子。

假如我們把div2、div3、div4都設(shè)置成左浮動，效果如下：

　　先從div4開始分析，它發(fā)現(xiàn)上邊的元素div3是浮動的，所以div4會跟隨在div3之后；div3發(fā)現(xiàn)上邊的元素div2也是浮動的，所以div3會跟隨在div2之后；而div2發(fā)現(xiàn)上邊的元素div1是標(biāo)準(zhǔn)流中的元素，因此div2的相對垂直位置不變，頂部仍然和div1元素的底部對齊。由于是左浮動，左邊靠近頁面邊緣，所以左邊是前，因此div2在最左邊。

假如把div2、div3、div4都設(shè)置成右浮動，效果如下：

　　道理和左浮動基本一樣，只不過需要注意一下前后對應(yīng)關(guān)系。由于是右浮動，因此右邊靠近頁面邊緣，所以右邊是前，因此div2在最右邊。

假如我們把div2、div4左浮動，效果圖如下：

　　依然是根據(jù)結(jié)論，div2、div4浮動，脫離了標(biāo)準(zhǔn)流，因此div3將會自動上移，與div1組成標(biāo)準(zhǔn)流。div2發(fā)現(xiàn)上一個元素div1是標(biāo)準(zhǔn)流中的元素，因此div2相對垂直位置不變，與div1底部對齊。div4發(fā)現(xiàn)上一個元素div3是標(biāo)準(zhǔn)流中的元素，因此div4的頂部和div3的底部對齊，并且總是成立的，因為從圖中可以看出，div3上移后，div4也跟著上移，div4總是保證自己的頂部和上一個元素div3(標(biāo)準(zhǔn)流中的元素)的底部對齊。

至此，恭喜讀者已經(jīng)掌握了添加浮動，但還有清除浮動，有上邊的基礎(chǔ)清除浮動非常容易理解。

經(jīng)過上邊的學(xué)習(xí)，可以看出：元素浮動之前，也就是在標(biāo)準(zhǔn)流中，是豎向排列的，而浮動之后可以理解為橫向排列。

清除浮動可以理解為打破橫向排列。

清除浮動的關(guān)鍵字是clear，官方定義如下：

語法：

clear : none | left | right | both

取值：

none  :  默認(rèn)值。允許兩邊都可以有浮動對象
left   :  不允許左邊有浮動對象
right  :  不允許右邊有浮動對象
both  :  不允許有浮動對象

定義非常容易理解，但是讀者實際使用時可能會發(fā)現(xiàn)不是這么回事。

定義沒有錯，只不過它描述的太模糊，讓我們不知所措。

根據(jù)上邊的基礎(chǔ)，假如頁面中只有兩個元素div1、div2，它們都是左浮動，場景如下：

　　此時div1、div2都浮動，根據(jù)規(guī)則，div2會跟隨在div1后邊，但我們?nèi)匀幌Ｍ鹍iv2能排列在div1下邊，就像div1沒有浮動，div2左浮動那樣。

　　這時候就要用到清除浮動（clear），如果單純根據(jù)官方定義，讀者可能會嘗試這樣寫：在div1的CSS樣式中添加clear:right;，理解為不允許div1的右邊有浮動元素，由于div2是浮動元素，因此會自動下移一行來滿足規(guī)則。

　　其實這種理解是不正確的，這樣做沒有任何效果。

　　對于CSS的清除浮動(clear)，一定要牢記：這個規(guī)則只能影響使用清除的元素本身，不能影響其他元素。

　　怎么理解呢？就拿上邊的例子來說，我們是想讓div2移動，但我們卻是在div1元素的CSS樣式中使用了清除浮動，試圖通過清除div1右邊的浮動元素(clear:right;)來強迫div2下移，這是不可行的，因為這個清除浮動是在div1中調(diào)用的，它只能影響div1，不能影響div2。

　　要想讓div2下移，就必須在div2的CSS樣式中使用浮動。

　　本例中div2的左邊有浮動元素div1，因此只要在div2的CSS樣式中使用 clear:left; 來指定div2元素左邊不允許出現(xiàn)浮動元素，這樣div2就被迫下移一行。

那么假如頁面中只有兩個元素div1、div2，它們都是右浮動呢？讀者此時應(yīng)該已經(jīng)能自己推測場景，如下：

此時如果要讓div2下移到div1下邊，要如何做呢？

　　我們希望移動的是div2，就必須在div2的CSS樣式中調(diào)用浮動，因為浮動只能影響調(diào)用它的元素。

　　可以看出div2的右邊有一個浮動元素div1，那么我們可以在div2的CSS樣式中使用 clear:right; 來指定div2的右邊不允許出現(xiàn)浮動元素，這樣div2就被迫下移一行，排到div1下邊。

總結(jié):

float : 先判斷上一個是不是浮動對象, 如果是 緊跟其后(還要判斷浮動方向), 如果不是,自己浮起來,脫離文檔流! (原來的位置可以被頂替)

clear : both  => 左右都不能有浮動,只針對自己!

清除浮動：

　　在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動（float為left或right）的元素，

　　在這種情況下，容器的高度不能自動伸長以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象。

　　這個現(xiàn)象叫浮動溢出，為了防止這個現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫CSS清除浮動。

方式一：

.clearfix:after {             <----在類名為“clearfix”的元素內(nèi)最后面加入內(nèi)容； 
content: ".";                 <----內(nèi)容為“.”就是一個英文的句號而已。也可以不寫。 
display: block;               <----加入的這個元素轉(zhuǎn)換為塊級元素。 
clear: both;                  <----清除左右兩邊浮動。 
visibility: hidden;           <----可見度設(shè)為隱藏。注意它和display:none;是有區(qū)別的。visibility:hidden;仍然占據(jù)空間，只是看不到而已； 
line-height: 0;               <----行高為0； 
height: 0;                    <----高度為0； 
font-size:0;                  <----字體大小為0； 
} 
.clearfix { *zoom:1;}         <----這是針對于IE6的，因為IE6不支持:after偽類，這個神奇的zoom:1讓IE6的元素可以清除浮動來包裹內(nèi)部元素。

　　整段代碼就相當(dāng)于在浮動元素后面跟了個寬高為0的空div，然后設(shè)定它clear:both來達(dá)到清除浮動的效果。 

　　之所以用它，是因為，你不必在html文件中寫入大量無意義的空標(biāo)簽，又能清除浮動。 

方式二：

overflow:hidden;

overflow：hidden的含義是超出的部分要裁切隱藏

　　float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。

　　如果沒有明確設(shè)定包含容器高度的情況下，它要計算內(nèi)容的全部高度才能確定在什么位置hidden，這樣浮動元素的高度就要被計算進(jìn)去。這樣包含容器就會被撐開，清除浮動。

10 position

1.static，默認(rèn)值 static：無特殊定位，對象遵循正常文檔流。

　　top，right，bottom，left 等屬性不會被應(yīng)用。說到這里我們不得不提一下一個定義——文檔流，文檔流其實就是文檔的輸出順序，也就是我們通?？吹降挠勺蟮接摇⒂缮隙碌妮敵鲂问?，在網(wǎng)頁中每個元素都是按照這個順序進(jìn)行排序和顯示的，而float和position兩個屬性可以將元素從文檔流脫離出來顯示。 默認(rèn)值就是讓元素繼續(xù)按照文檔流顯示，不作出任何改變。

2.position : relative / absolute

　　relative：(相對定位) 對象遵循正常文檔流，僅僅定義對本參無影響. 但將依據(jù)top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。

　　元素實際上依然占據(jù)文檔中的原有位置，只是視覺上相對于它在文檔中的原有位置移動了

　　absolute：(絕對定位) 對象脫離正常文檔流，使用top，right，bottom，left等屬性進(jìn)行絕對定位。而其層疊通過z-index屬性定義。 

　　當(dāng)指定 position:absolute 時，元素就脫離了文檔[即在文檔中已經(jīng)不占據(jù)位置了]，可以準(zhǔn)確的按照設(shè)置的 top,bottom,left 和 right 來定位了。

　　如果一個元素絕對定位后，其參照物是以離自身最近元素是否設(shè)置了相對定位，如果有設(shè)置將以離自己最近元素定位，如果沒有將往其祖先元素尋找相對定位元素， 一直找到html為止。

View Code

3.position:fixed

　　在理論上，被設(shè)置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標(biāo)，不論窗口是否滾動，它都會固定在這個位置。

　　fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進(jìn)行定位，當(dāng)出現(xiàn)滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性定義。

　　注意點： 一個元素若設(shè)置了 position:absolute | fixed; 則該元素就不能設(shè)置float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。

　　但是 relative 卻可以。因為它原本所占的空間仍然占據(jù)文檔流。

僅使用margin屬性布局絕對定位元素

　　此情況，margin-bottom 和margin-right的值不再對文檔流中的元素產(chǎn)生影響，因為該元素已經(jīng)脫離了文檔流。

　　另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。  

　　圖9中，使用margin屬性布局相對定位元素。

　　層級關(guān)系為：

　　<div ——————————— position:relative;

　　<div—————————-沒有設(shè)置為定位元素，不是參照物

　　<div———————-沒有設(shè)置為定位元素，不是參照物

　　<div box1

　　<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;

　　<div box3

　　效果圖：

補充:

1.css屬性可以定義給多個class!

2.background-position:　　定位背景圖像

background-position 屬性設(shè)置背景圖像的起始位置。

這個屬性設(shè)置背景原圖像（由 background-image 定義）的位置，背景圖像如果要重復(fù)，將從這一點開始。

實例:

可以通過調(diào)節(jié):background-position 的值,顯示圖像!

   background-position : 0 0px

 　background-position : 0 -58px

通過background-position 實現(xiàn)了從圖片上摳圖的效果!

3.z-index:

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素 總是會處于 堆疊順序較低的元素的前面 !

僅在定位元素上有效（例：position:absolute;）

4.overflow

• visible 默認(rèn)值，內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。

• hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。

• scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。

• auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。

　　　　　　 　　 scroll;　　　　  auto;

5.outline　　邊框輪廓

輪廓不占據(jù)頁面空間，也不一定是矩形。

除了IE以外的瀏覽器都直接支持outline。只有規(guī)定了!DOCUMENT之后的IE8以上版本的瀏覽器才支持outline。

• outline-width 輪廓寬度

• outline-color 輪廓顏色

• outline-style 輪廓樣式

6.zoom　　縮放比例

7.transform、transition 動畫效果

transform 轉(zhuǎn)換，變形

• origin 定義旋轉(zhuǎn)基點（left top center right bottom 坐標(biāo)值）    transform-origin: 50px 50px; transform-origin: left;。

• rotate 旋轉(zhuǎn)            transform:rotate(50deg) 旋轉(zhuǎn)角度可以為負(fù)數(shù)，需要先定義origin。

• skew  扭曲             transform:skew(50deg,50deg)  分別為相對x軸傾斜,相對y軸傾斜。

• scale  縮放             transform:scale(2,3) 橫向放大2倍，縱向放大3倍；transform:scale(2) 橫豎都放大2倍。 

• translate 移動        transform:translate(50px, 50px) 分別為相對x軸移動,相對y軸移動。

demo

Transition 平滑過渡

• transition-property：           變換的屬性（none(沒有屬性改變)、all(所有屬性改變)、具體屬性）

• transition-duration：           變換持續(xù)時間

• transition-timing-function： 變換的速率（ease:(逐漸變慢)、linear:(勻速)、ease-in:(加速)、ease-out:(減速)、ease-in-out:(加速然后減速)、cubic-bezier:(自定義時間曲線））

• transition-delay：               變換延遲時間

• transition：                        縮寫

transition 支持的屬性

property 指定屬性對應(yīng)類型

實例:demo

demo

鼠標(biāo)放在以下圖片上，There will be a miracle：

練習(xí)題:

1.http://dig./

2.http://v.dangdang.com/

3.商城頁面

補充:

1.關(guān)于 line-height 和 height  居中效果

line-height是把多余的高度平分到上面和下面 所以明顯會居中。設(shè)置height就是自然而然的從上到下排列所以貼頂了!

2.float 效果影響背景色

子級div 使用float 效果時,父級div的背景色會失效

原因: 當(dāng)塊元素的高度是默認(rèn)或者auto時，W3C 在可視化格式模型中規(guī)定了高度的計算細(xì)節(jié)，其中有一條就是：如果元素包含浮動元素，那么浮動元素不參與高度計算。所以沒有撐起父級元素顏色失效。

View Code

解決方法:

3.hover

hover 后可以添加選擇器指明需要修改的樣式

4.透明色

5.圖片的使用

如果需要在div里面插入img標(biāo)簽的圖片,div中需要使用  overflow:hidden  來防止圖片超出邊界撐開div

6.position 使用

position 常使用于 div的定位

7.小尖角

8.圖標(biāo)素材

現(xiàn)成的圖標(biāo)網(wǎng)站,  http:///  里面有各種小圖標(biāo), 下載解壓,頁面中,引用css即可

9.a標(biāo)簽中嵌套圖片(默認(rèn)樣式)

　　a 標(biāo)簽中有邊框 (ie瀏覽器下)

10.目錄結(jié)構(gòu)

11.樣式.重復(fù)修改

12.布局,分左右

使用position方法 效果最好!

.pg-left{
    width: 180px;
    position: absolute;
    left: 0;
    background-color: red;
}
.pg-right{
    height: 600px;
    position: absolute;
    left: 184px;
    right: 0;
    overflow: auto;
    background-color: lightcoral;
}

13.設(shè)置滾動條

先設(shè)置一個高度,再使用  overflow:auto   超出大小,出現(xiàn)滾動條!

14.input框插入圖標(biāo)

思路: 利用 absolute 插入圖標(biāo)  ，padding 來設(shè)置內(nèi)邊距，留出空白位置

15.全屏提示框(模態(tài)對話框)

思路：底層 + 遮罩層(position:fixed 透明) + 頂層 (div fixed)居中顯示

1.兩個fixed 在一起. z-index設(shè)置順序

2.居中 top left 可以用百分比!  margin-left 負(fù)值左移

16.加降框

input 默認(rèn)有個padding  需要使用 padding:0 去除

View Code

17.cursor: 鼠標(biāo)的類型形狀

cursor:pointer

請把鼠標(biāo)移動到單詞上，可以看到鼠標(biāo)指針發(fā)生變化：

Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
not-allowed

18. display: inline-block

設(shè)置 inline-block 讓元素剛好占滿一行,卻無法實現(xiàn)

設(shè)置父級 font-size:0  然后子級元素重新設(shè)置font-size 就可以了

產(chǎn)生原因:  標(biāo)簽與標(biāo)簽之間的空白位置,占用了1個字符!

19. 防止縮小瀏覽器寬度,頁面內(nèi)容擠在一起

設(shè)置一個width 固定寬度,不要用百分比!

20.去掉谷歌input記住賬號或密碼時默認(rèn)出現(xiàn)的黃色背景

在谷歌瀏覽器會默認(rèn)記住賬號，而記住賬號之后其input的背景會變成黃色，解決的辦法如下：

方法一：直接用css的內(nèi)陰影來覆蓋黃色，代碼如下：

在form標(biāo)簽上直接關(guān)閉了表單的自動填充功能： autocomplete = ”off” 

21.英文換行顯示,邊界單詞切割成兩部分,顯示

22.垂直對齊

23.上傳表單,美化

Dom結(jié)構(gòu)

樣式一

樣式二

上面美化，把默認(rèn)顯示的文件名也給隱藏掉了，那么如何顯示文件名稱呢？沒關(guān)系，我們可以用jquery來獲取文件的文件名。

我們可以寫個change事件

$(".a-upload").on("change","input[type='file']",function(){
    var filePath=$(this).val();
    if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
        $(".fileerrorTip").html("").hide();
        var arr=filePath.split('\\');
        var fileName=arr[arr.length-1];
        $(".showFileName").html(fileName);
    }else{
        $(".showFileName").html("");
        $(".fileerrorTip").html("您未上傳文件，或者您上傳文件類型有誤！").show();
        return false 
    }
})