接着昨天的講，這兩天比較忙沒有每天都寫，但是我會一點不漏的都補上的
因爲我的博客不是每次只寫一個功能模塊可能也會把寫代碼中的一些注意的問題寫出來，
1.今天要講的內容是容器，還有容器需要注意的問題，做前端開發或是自己寫一些頁面的時候用div應該說是比較多的，div的定位，浮動自然也很重要，當你做一個購物網站，比如淘寶京東就很多的用到浮動定位，
2，容器就以div來說，容器分爲：行級容器和列級容器，這個容器就是div接下我就之間說div了。
3，想讓兩個div放在一行，我們就用到了div的屬性下面看代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
#didv2{
width: 100px;
height: 100px;
background-color: yellow;
display: inline-block;
}
</style>
</head>
<body>
<div id="div1">怎麼能在一行上</div>
<div id="didv2">這個兩個盒子</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
/*display: inline-block;*/
float: left;
}
#didv2{
width: 100px;
height: 100px;
background-color: yellow;
/*display: inline-block;*/
float: left;
}
</style>
</head>
<body>
<div id="div1">怎麼能在一行上</div>
<div id="didv2">這個兩個盒子</div>
</body>
</html>仔細看就是把display該成了float，float有好幾個取值，還有一個right顧名思義是右浮動，其他的自己感興趣可以自己查，樣式裏用到一個屬性display這個屬性也很重要具體用法：
常用的display屬性值：
none此元素不會被顯示並且不佔用空間；
block此元素顯示爲塊級元素，此元素前後會帶有換行符；
inline默認，此元素會被顯示爲內聯元素，元素前後沒有換行符；
inline-block行內塊元素，前後無換行符；
inherit規定應該從父類元素繼承display屬性的
4.容器：
容器的屬性有margin(容器與容器的之間的距離)，padding(內容與容器的距離)
容器也可以成爲盒子，還有border(盒子邊的寬度)內容也也有自己寬度和高度width和height.
盒子的寬：margin+border+padding+width(注意border加一個還是兩個要看自己怎麼設置的，因爲有的時候就設置了左右的一條邊)
盒子的高度：margin+horder+padding+height(border的值和上面一樣要看自己上邊和下邊怎麼設置的)
*注意：兩個盒子的之間的距離是相鄰的2個margin的值
兩個盒子上下距離是相鄰的2個margin的最大值，例如：margin-top：10px；margin-bottom：20px結果就是兩個盒子上下距離是20px取最大的一個距離。
5.盒子定位positon這個很重要。接下來就重點講這個屬性對盒子也就是容器也是div的影響.
首先position能取到四個值：staic 和relative,absolute,fixed.
static是默認值，如果值是static它會忽略top bottom，left，right的影響
relative 設置成這個值可以正常移動位置，對其用left等控制
absolute這個就不一樣了，這個屬性可定位於相對包含它的元素的指定座標進行定位，可以通過top bottom，left，right定位，
6，現在單獨講float這個屬性，這個屬性同樣很重，雖然它不是標籤，在html裏有好多屬性是很重要的它甚至有時候比標籤都重要的，例如：
white-span 不換行，overflow超出隱藏，text-overflow超出就用 省略號代替，
letter-spacing這個屬性是字之間的間距，
text-indent：2em，是首行縮進兩個字的大小，單位一般就em
（em單位名稱爲相對長度單位。相對於當前對象內文本的字體尺寸，國外使用比較多）
（px單位名稱爲像素，相對長度單位，像素（px）是相對於顯示器屏幕分辨率而言的國內推薦；）
pt也是單位名稱位點，現在一般不用就不說了，
說了好多了現在開始float，float是浮動，講一下什麼是浮動，比如你排隊去買飯，在你前面的人走了你會不會自動頂上去，所以說如果兩個div同時浮動他們就能在一行上，還是像你買飯，同時兩個窗口可以打飯，一次上前兩個人那你們是不是並排站一起了。
可能的值
| 值 | 描述 |
|---|---|
| left | 元素向左浮動。 |
| right | 元素向右浮動。 |
| none | 默認值。元素不浮動，並會顯示在其在文本中出現的位置。 |
| inherit | 規定應該從父元素繼承 float 屬性的值。 |
<html>
<head>
<style type="text/css">
img
{
float:right
}
</style>
</head>
<body>
<p>在下面的段落中，我們添加了一個樣式爲 <b>float:right</b> 的圖像。結果是這個圖像會浮動到段落的右側。</p>
<p>
<img src="/i/eg_cute.gif" />
圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它圍着它
</p>
</body></html>
效果如下圖：
明天我們做幾個有意思的圖片，用html畫畫，並做一個仿淘寶京東頁面。
