有4個值的時候： maigin 10px 5px 15px 20px; (上、右、下、左)
有3個值的時候： margin: 10px 5px 15px; (上、左右、下)
有2個值的時候： magin: 10px; (代表4個值都是10px)
margin需要注意的3個問題：
1、body有預設的margin, chrome是8px
解決辦法：把body的margin設定為0
2、如果設定了上下兩個盒子的margin,兩個盒子的距離以大的為準
3、如下案例說明
需求：把inner（綠色的div往下移動20px）,我們會想到使用margin-top: 20px
inner並沒有相對父元素wrap下移20px，範圍整個父元素相對body下移動了20px，這是為什麼呢？
原因：wrap沒有設定邊框，然後inner就往上尋找到body的邊框即頂部，然後下移了20px
因為我們只需要把wrap設定上邊框，為了美觀，可以把邊框設定為白色
有4個值的時候： padding 10px 5px 15px 20px; (上、右、下、左)
有3個值的時候：padding: 10px 5px 15px; (上、左右、下)
有2個值的時候： padding: 10px; (代表4個值都是10px)
設定padding需要注意的問題
設定了padding以後會把外層盒子撐大，影響整個網頁的布局
如果我們不停的給子盒子2設定padding,就有可能把盒子往下擠了
總結：padding會把盒子整體撐大，padding撐大多少，width或者height就要減多少
要實現外層盒子(box)設定了padding,並且盒子大小固定不變，有兩種方法：
1、手動減去width或者height
2、自動減去
/*通過浮動實現了乙個經典的網頁布局外層box盒子新增此樣式屬性
*/box-sizing: border-box;
但是我們注意到main設定了乙個固定的高度
現實場景中，main的高度大部分是不固定高度的，隨著內容的增長而增高。
當我們取消main的height屬性的時候，則發生了變化
因為浮動的原因，footer上去了
解決辦法1：在main中增加乙個div，設定樣式為清除浮動
/*解決浮動問題父元素應用此類
*/.clearfix.clearfix:after
塊級元素
塊級元素獨佔一行，可以設定寬度、高度、外邊距和內邊距，如果寬度省略的話，預設充滿整個容器，並且可以容納其他行內元素，支援所有的css元素
行內元素
在一行內顯示，不可以設定寬高，寬高被內容撐開，不支援上下margin，**換行被解析
為什麼img input行內標籤，可以設定寬高
替換元素：根據元素的屬性來顯示樣式img input select
不可替換元素： 根據原來預設好功能來顯示
塊級元素和行內元素轉換
dispaly: block;隱藏元素/*行內元素轉換成塊級元素，獨佔一行
*/display: inline;
/*塊級元素轉換成行內元素
*/display: inline-block;
/*行內元素轉換成行內塊（一行內顯示）可以支援寬高
*/
display: none;相對定位的參照物是原來自己的位置
偏移量：left top right bottom
原本占用的空間仍然保留
------相對定位前的位置------
相對定位後的位置，向右偏移20px，向下偏移20px
如果left為負數，則向左偏移
如果只是設定position：relative，沒有設定偏移量，那麼元素不會有任何變化
絕對定位的參照物是具有定位屬性的上級元素
如果上一級沒有定位屬性，則一層一層往外找，直到body
下圖，由於上級box沒有定位屬性，所以參照物是body，left:0 top:10px
給上級元素加上定位屬性，參照物就是box了
固定定位的參照物是瀏覽器的可視區域
使用場景：側邊廣告，頂部導航，當我們上下滾動瀏覽器，他們的位置不會改變
網頁設計DIV CSS 第3 天 定義語言編碼
第三步是定義你的語言編碼，類似這樣 為了被瀏覽器正確解釋和通過 w3c 校驗，所有的 xhtml 文件都必須宣告它們所使用的編碼語言，我們一般使用 gb2312 簡體中文 製作多國語言頁面也有可能用 unicode iso 8859 1等，根據你的需要定義。通常這樣定義就可以了。但是要補充說明的是，...
div css布局漫談
1.css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的，看個一行兩列的例子 xhtml 這裡是第一列 這裡是第二列 css wrap column1 column2 cle...
常用div css布局
1.css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的，看個一行兩列的例子 xhtml 這裡是第一列 這裡是第二列 css wrap column1 column2 cle...