浮動
1 什麼是浮動
浮動就是CSS屬性當中的一個屬性
2 浮動的作用
用浮動將多個塊級元素並排
3 浮動的性質
- 1 浮動具有脫標性
浮動的元素會脫離標準文檔流，意味着它在標準文檔流中不在佔有位置，如果一個盒子沒有設置高度，本來它的高度是由他裏面的幾個盒子撐開的。如果我們讓這幾個盒子全部浮動，那麼外部的盒子將沒有高度。
原因：外部盒子還是停留在標準文檔流中，而內部的幾個盒子全部都已經脫離標準文檔流，無法再去撐開外部的盒子。
- 2 浮動具有字圍性
浮動的字圍性，當一個盒子浮動，它的弟弟如果不浮動，那麼弟弟會鑽到哥哥下面，但是弟弟盒子中的文字不會鑽到哥哥下面去，而是會圍繞着哥哥去排列。
- 3 浮動具有緊貼性
一個家族內，所有的兒子都浮動，那麼這幾個兄弟會按照浮動的方向依次緊貼。如果爹的寬度不夠，最後的一個兄弟容不下，那麼它會換行，但是也是會按照規律去找人緊貼。最後一個兄弟會從它的小哥的底部往浮動的方向去看，看到誰就貼誰。如果是兄弟就貼兄弟，如果兄弟都看不到再貼爹。
在我們初玩浮動的時候，記住，浮動描述的是一個悲慘的家族史。爹不浮動，兒子要浮動全浮動，要不浮動，乾脆都別浮動。
4 浮動的元素的特性
- 1 浮動的元素不在有行塊之分
脫離了標準文檔流，在標準文檔流中才有行塊之分。不在標準文檔流中是不會有行塊之分，所有的元素都同等對待，都可以設置寬高。如果不設置寬高，都是由內容撐開的高度。
- 2 浮動的元素不再有margin塌陷
浮動的元素因爲不在標準文檔流中，所以不會再有垂直方向上的塌陷現象。
而且不會再有標準文檔流中的踹爹問題。
5 浮動的負面效果
浮動描述的是一個家族，父親不浮動，待在標準文檔流中，兒子全浮動，脫離標準文檔流。
- 當父親設置了高度，就算兒子全部脫離，父親的高度還是存在，在標準文檔流中還是佔據位置。
- 當父親不設置高度，那麼兒子如果全部脫離，父親的高度全爲零，在標準文檔裏流面相當於不佔位置。
- 1 當父親設置了高度，那麼兒子浮動，不管怎麼浮動，都不會帶來毀滅性的效果，因爲有父親存在。
- 2 當父親沒有設置高度，如果兒子浮動，那麼會帶來很嚴重的後果；假設，這個家族下面又來了另外一個家族，而另外一個家族沒有浮動，那麼這個家族將會整體鑽到上面家族那幾個浮動元素的下面。這樣的效果是我們不願意看到的。造成這樣後果的就是父親沒有了高度，所以我們需要去想辦法把這個問題解決掉。
6 清除浮動帶來的負面影響的方式
現在我們知道浮動的負面影響是因爲父親沒有高度，所以要想清除它帶來的影響，我們最終的目的是要讓父親找到自己的高度。
- 1 給父親設置高度
- 2 家裏建牆法
在浮動的家族最後，放一個空的div，然後對這個空的div設置clear：both；清除浮動。
- 3 文本溢出隱藏法
這個方法也很簡單，但是沒有原因。文本溢出本來是CSS一個屬性，overflow：hidden；文本溢出隱藏。它們真正的作用是讓一個溢出的文本隱藏掉。但是這幫老油條發現這個屬性，可以用來清除浮動，並且效果很好。
- 4 隔山打牛法
這個方法是在兩個家族之間放一個空的div，然後對這個空的div添加clear：both；清除浮動。這個方法可以不讓第二個家族鑽到第一個家族的下面。但是，用這個方法也不會讓第一個家族的父親，找到高度。還有隱藏。
a標籤的美化
div li a:link{
color: white;
}
div li a:visited{
color: yellow;
}
div li a:hover{
color: red;
background-color: green;
}
div li a:active{
color: pink;
}
- a 標籤和其他標籤不同，他存在多種狀態，每個狀態都可以去設置a標籤的樣式。一般我們在設置a標籤的時候，如果是和盒子有關的全部在a裏面去設置。如果設置的是盒子的一些文本的樣式和背景的樣式，要在僞類中去設置；
- a標籤存在4個僞類，a:link a:visited a:hover a:active
這4個僞類在設置的時候有先後順序，遵循愛恨原則，先愛了再恨；設置順序：a:link a:visited a:hover a:active
(第四個狀態因爲時間太短所以基本不用。)
border-radius
- border-radius:50%
設置邊框的弧度，這個弧度可以是一個值，代表四個角的弧度所組成的圓，橫向和縱向半徑都是對應邊框的50%。
- border-radius:50% 30%
如果是兩個值
第一個值代表左上和右下兩個角的弧度所組成的圓，橫向和縱向半徑都是對應邊框的50%；
第二個值代表右上和左下兩個角的弧度所組成的圓，橫向和縱向半徑都是對應邊框的30%。
- border-radius:50% 30% 20%
第一個值代表左上角的弧度所組成的圓，橫向和縱向半徑都是對應邊框的50%；
第二個值代表右上角的弧度所組成的圓，橫向和縱向半徑都是對應邊框的30%；
第三個值代表右下角的弧度所組成的圓，橫向和縱向半徑都是對應邊框的20%；
左下角沒設置，和右上一樣。
- border-radius:50% 30% 20% 10%
第一個值代表左上角的弧度所組成的圓，橫向和縱向半徑都是對應邊框的50%；
第二個值代表右上角的弧度所組成的圓，橫向和縱向半徑都是對應邊框的30%；
第三個值代表右下角的弧度所組成的圓，橫向和縱向半徑都是對應邊框的20%；
第三個值代表左下角的弧度所組成的圓，橫向和縱向半徑都是對應邊框的10%；
- border-radius:50% 30% 20% 10% / 50% 30% 20% 10%
當這種設置的方法
/之前設置的四個角對應圓橫向的半徑
/之後設置的四個角對應圓宗向的半徑
CSS雪碧圖（CSS精靈圖）
CSS雪碧圖又稱CSS精靈圖（css sprite）它是一門很NB的圖像合成技術。在前端中應用廣泛。
div{
float: left;
background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2119980335,793912638&fm=26&gp=0.jpg);
width: 80px;
height: 80px;
}
.w{
background-position: -170px -225px;
}
.d{
background-position: -215px 0px;
}
.s{
background-position: -380px -149px;
}
.l{
background-position: -320px -70px;
}
.o{
background-position: -80px -145px;
}
.v{
background-position: -90px -220px;
}
.e{
background-position: -295px 3px;
}
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="l"></div>
<div class="o"></div>
<div class="v"></div>
<div class="e"></div>
<div class="w"></div>
<div class="d"></div>
<div class="d"></div>
CSS雪碧圖主要是爲了解決網頁加載效率而出現的，如果每一個小圖標都是一個單獨的圖片，也就是說這個圖片有自己獨立的路徑地址，那麼在加載的時候會和服務器建立一次鏈接，雖然圖標不大，下載速度也很快，但是因爲每加載一張就會建立一次鏈接，建立鏈接需要三次握手四次揮手，小圖標多的話，建立鏈接的時間就很長了。因此用雪碧圖可以很好的解決這個問題。雪碧圖把所有的小圖標都合成在一張圖片上，那麼在加載的時候就會和服務器之建立一次鏈接請求就可以了。
定位
定位也是css當中屬性的一種，定位是position，它有5個值。每種定位都暗藏玄機。（主要解決層疊）
static 靜態的意思，
relative 相對定位，
absolute 絕對定位，
inherit 繼承父元素，
fixed 固定定位
-
1 static 是默認值，標準文檔流中是什麼樣子，他就是什麼樣子。
-
2 relative 是相對定位，它用的也不多，主要用來微調元素，還用來作爲子絕父相的參照。通過相對定位的元素不會脫標。
相對定位參照的是自己出生的位置。（形影分離，老家留坑。也就是說它的內容會任意的隨自己設置，但真正的位置還是在出生的位置。）
-
3 absolute 絕對定位，在我們以後用的非常多，後期做一些動畫、層疊，都要用到absolute。
這個定位不是相對自己，它相對的是離自己最近的一個定位祖先：絕對定位的元素會脫離標準文檔流
- ①如果這個元素沒有祖先，那麼這個絕對定位的元素會相對body去定位，left top相對body左上角，right top相對body右上角。left bottom，是相對body首屏可視界面的左下角，right bottom，是相對body首屏可視界面的右下角
- ② 如果這個元素有祖先，但是祖先都不定位，這個情況有祖先和沒祖先一樣，都是相對body去做定位。
- ③ 如果這個元素有祖先，祖先都定位，這個絕對定位的元素會相對離他最近的那個定位的祖先去做定位。一層一層往上找，誰定位的就相對誰。
-
4 inherit 從父元素繼承 position 屬性的值
-
5 fixed 固定定位，相對瀏覽器
誰該壓着誰 z-index
所有的定位的元素都有一個z-index值，這個值決定了誰離客戶最近。Z-index值可以是負無窮到正無窮。它的值越大那麼離用戶越近。
- 1 定位的元素永遠會壓着沒定位的元素。
- 2 定位的元素是兄弟，同屬於一個家族，如果這些兄弟都定位，但是z-inde值大小相同，那麼會按照出生順序去層疊。最後出生的會在最上面，離用戶最近。如果z-index不相同，那麼誰的大，誰就在最上面。
- 3 定位的元素是兄弟，不是一個家族，如果爹沒有z-index值。那麼這兩個家族的所有兄弟，看自己的z-index值。如果相同，按照出生順序層疊，如果不同誰的大，誰在最上面。如果爹有z-index值，那麼爹慫兒子值再大也不行。
其他
英文字符的換行word-wrap word-break
1 word-wrap：可以換行英文字符，但是他可以區分出單詞，不會吧單詞分隔開，如果有一個特別長的單詞，會被換行去寫。
2 word-break：他也可以換行英文字符，但是他不論是不是一個單詞，都會把一整行寫滿，等這一行寫不下去了在換行。
inline-block
將標籤轉換成行內塊元素，讓行內元素具有塊元素的特性
overflow
overflow：auto；當文本沒有溢出的時候，沒有滾動條，當文本超出的時候，自動在相應的方向上添加滾動條。
讓盒子隱藏的幾種方式
background-color:(0,0,0,0) 隻影響顏色透明度 不影響內容
這樣的設置，是讓設置的顏色全透明，也就是說這樣的設置通常用來給顏色值添加，他僅僅會讓設置的顏色透明度增強。
opacity：0 透明度爲0 盒子還在 內容也透明
這個設置通常用在對一個盒子整體添加，它是透明的意思，如果給一個盒子添加這樣的屬性，那麼這個盒子內部所有的東西都會透明度增強。值爲0時，代表透明度最強，盒子看不見，但是位置還在。
visibility：hidden 可視化隱藏 盒子還在
這個設置，通常也是給盒子添加，讓盒子的可視化隱藏，這樣設置的盒子，位置還在，但是無法被選中，和opacity有點類似。
display：none 盒子消失
這個設置，通常是讓一個盒子表現爲空，也就是說添加了這個屬性，盒子消失不見，位置也會不存在的。