使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。
width和height的屬性值可以為不同單位的數值或相對于父元素的百分比%，實際工作中最常用的是畫素值。
大多數瀏覽器，如firefox、ie6及以上版本都採用了w3c規範，符合css規範的盒子模型的總寬度和總高度的計算原則是：
/外盒尺寸計算（元素空間尺寸）/
element空間高度 = content height + padding + border + margin
element 空間寬度 = content width + padding + border + margin
/內盒尺寸計算（元素實際大小）/
element height = content height + padding + border （height為內容高度）
element width = content width + padding + border （width為內容寬度）
1.寬高值用於塊級元素，對行內無效
2.計算盒子模型總高度，還應考慮外邊距塌陷問題
3.如果乙個盒子沒有給定寬度高度，padding不會影響盒子大小
什麼用外邊距，什麼時候用內邊距。
他們可以混用，那個方便用哪個
按照穩定性來分：
width>padding>margin
margin由外邊距合併的問題，還有ie6margin 加倍，所以最後使用
padding 會影響盒子大小，需要計算盒子大小，其次使用
widtn穩定性最高，寬度剩餘法，高度剩餘法
css3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。
1.content-box: element width = content width + padding + border （width為內容寬度）
2.border-box: element width = content width（width為內容寬度）
padding和border包含進width
content-box：優先保證內部內容所佔區域不變，盒子的大小發生改變
border-box：優先保證自己盒子所佔的大小不變，對內容進行壓縮、
語法格式：
box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內/**影；
1.前兩個屬性必須寫，後面的可以省略
2.**影(outset)預設值, 內陰影 inset
普通流(normal flow)
文件流，標準流，普通流
前面我們說過，網頁布局的核心，就是用css來擺放盒子位置。如何把盒子擺放到合適的位置？
css的三種定位機制: 文件流，浮動，定位
html,相當重要的概念，在網頁中，標籤從上至下，從左至右，。比方塊級元素，行內元素的預設排序我們稱之為普通流。這種布局方式稱之為普通流布局
浮動最早是用來控制，以便達到其他元素（特別是文字）實現「環繞」的效果。
後來，發現浮動可以讓任何盒子同一行顯示，漸漸偏離主題，只有就一直用浮動進行布局
什麼是浮動？
元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
在css中，通過float屬性來定義浮動，其基本語法格式如下：
選擇器
浮動脫離標準流，不佔位置，會影響標準流。浮動只有左右浮動。
1.標準流父元素
2.浮動不會壓住padding
3.當加了浮動之後，具有行內塊的特徵
4.浮動的元素總是找到最近的父級元素對齊，不會超出內邊距
5.上乙個元素是浮動，則頂部對齊，是標準流，則底部對齊
浮動 ：目的讓多個塊級元素同一行上顯示
float 浮漏特
浮：加了浮動的元素會浮起來，漂浮在其他標準流的盒子上面
漏：加了浮動的元素，他原來的位置漏給了標準流的盒子
特：特別需要注意的是，標準流父元素一起使用，其次，特別需要注意的是，浮動元素變成行內塊元素
閱讀報紙時容易發現，雖然報紙中的內容很多，但是經過合理地排版，版面依然清晰、易讀。同樣，在製作網頁時，要想使頁面結構清晰、有條理，也需要對網頁進行「排版」。
「版心」(可視區) 是指網頁中主體內容所在的區域。一般在瀏覽器視窗中水平居中顯示，常見的寬度值為960px、980px、1000px、1200px等。
一列固定寬度且居中（最普通的，最為常用的結構）
兩列左窄右寬型 通欄平均分布型
人生苦短，有始有終。
好比我們的浮動，有浮動開始，則就應該有浮動結束。
為什麼要清除浮動
由於浮動元素不再占用原文件流的位置，所以它會對後面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動。
本來做一些文字混排效果，但是現在用於做布局，所以會出現很多問題。
準確的說，不是清除浮動，而是清除浮動後造成的印象
清除浮動本質
主要是為了解決父級元素因為子級浮動引起內部高度為0的問題
閉合浮動，記住，清除浮動就是把浮動的盒子圈在裡面，讓父盒子閉合出入口，不讓他們影響其他元素
在css中，clear屬性用於清除浮動，其基本語法格式如下：
選擇器
w3c推薦的做法，在浮動元素的末尾新增新標籤（清除浮動的樣式）
優點:通俗移動，書寫方便
觸發bfc的方式，可以實現清除浮動的效果。
優點：**簡介
缺點：內容增多時不會自動換行，無法顯示需要溢位的元素
：after是空元素的公升級版
優點:符合閉合浮動，結構語義化正確
缺點:ie6,7不支援:after,所以使用zoom清除浮動
清除浮動：加上clear:both,使元素下移，直到兩邊沒有浮動元素
閉合浮動：使浮動元素閉合，使父元素高度不在塌陷，這樣減少了浮動帶來的影響
優點：**更加簡潔
缺點:ie6,7不支援:after,所以使用zoom清除浮動
蛇皮噥的實習生活 day7
如果，說浮動，關鍵在乙個 浮 字上面，那麼 我們的定位，關鍵在於乙個 位 上。如果用標準流或者浮動，實現會比較複雜或者難以實現，此時我們用定位來做 元素的定位屬性主要包括定位模式和邊偏移兩部分。1 邊偏移 邊偏移屬性 描述top 頂端偏移量，定義元素相對於其父元素上邊線的距離 bottom 底部偏移...
蛇皮噥的實習生活 day17
1.引入相關檔案 rel stylesheet type text css href css jquery.fullpage.css src js jquery.min.js script src js jquery.easing.1.3.js script src js jquery.fullpa...
深圳的實習生活（6）
下午兩點的時候凱亞的人會過來帶我們去鹽田的海邊玩，我們吃完午飯回來一看還有時間，趕著時間玩幾把公升級。下午兩點，凱亞的車準時到達了，我們總共十三個人浩浩湯湯奔向大海。深圳的海比廈門的海範圍更大，沙灘的面積就要大很多，踩在細膩的沙灘上，有一種說不出的舒服。要下水，就得有游泳褲。我們幾位男同事一起去買了...