使用寬度屬性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為內容寬度）
2.計算盒子總高度時，還應考慮上下兩個盒子的外邊距合併情況
3.如果乙個盒子沒有給定寬度和高度時，padding不會影響盒子大小
什麼時候用內邊距，什麼時候外邊距
我的回答是，這兩者可以混用，
width > padding > margin
1.margin外邊距合併問題，ie6 margin加倍的bug，所以最後使用
2.padding會影響內盒的大小，經常使用加減法
3.width 寬度剩餘法，高度剩餘法
css3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。
1.content-box ：盒子模型 width + padding + boder
2.border-box：/盒子模型即為寬度 padding 和boder 都包含再width/
1.預設設定，優先保證內部的內容所佔區域不變
2.boder-box 優先保證自己盒子的所佔區域不變，對內容進行壓縮
box-shadow
:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內/**影；
2.**影(outset預設值，內陰影inset
文件流，標準流，普通流
前面我們說過，網頁布局的核心，就是用css來擺放盒子位置。如何把盒子擺放到合適的位置？
css中三種定位機制：普通流，浮動，定位
html中相當重要的概念,乙個網頁中，標籤從上而下，從左至右順序排序的意思，這種布局稱之為普通流
浮動最早是用來控制，以便達到其他元素（特別是文字）實現「環繞」的效果。
後來，我們發現浮動可以使任何盒子一行排列，因此我們漸漸偏離主題，用浮動的特性進行布局
元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
在css中，通過float屬性來定義浮動，其基本語法格式如下：
選擇器描述left
元素向左浮動
right
元素向右浮動
none
元素不浮動（預設值）
浮動脫離標準流，不佔位置，會影響標準流。浮動只有左右浮動。
標準流父級
1.子盒子浮動不會壓住padding
2.浮動的元素會找最近的父級元素對齊，不會超出內邊距的範圍
浮動的目的是，讓多個塊級元素同一行顯示
float 浮漏特
浮：浮起來，漂浮在其他標準流盒子上面
漏： 加了浮動，不佔位置，原來的位置就漏給了標準流的盒子
特：特別注意，首先浮動的盒子和標準流父級搭配使用，特別注意，浮動會使元素變成行內塊元素
閱讀報紙時容易發現，雖然報紙中的內容很多，但是經過合理地排版，版面依然清晰、易讀。同樣，在製作網頁時，要想使頁面結構清晰、有條理，也需要對網頁進行「排版」。
「版心」(可視區) 是指網頁中主體內容所在的區域。一般在瀏覽器視窗中水平居中顯示，常見的寬度值為960px、980px、1000px、1200px等。
最普通的，最為常用的結構
人生苦短，有始有終。
好比我們的浮動，有浮動開始，則就應該有浮動結束。
由於浮動元素不再占用原文件流的位置，所以它會對後面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動。
文字混排效果，但是現在拿來做布局，出現很多的問題。
準確的說，不是清除浮動，清除浮動後造成的影響
清除浮動的本質，解決父級元素因為自己浮動引起的內部高度為0的問題
在css中，clear屬性用於清除浮動，其基本語法格式如下：
選擇器描述left
不允許左側有浮動元素（清除左側浮動的影響）
right
不允許右側有浮動元素（清除右側浮動的影響）
both
同時清除左右兩側浮動的影響
閉合浮動，
w3c推薦的清除浮動方法
優點:通俗易懂，書寫方便
缺點：新增了許多無意義的標籤，結構化更差。
bfc（後面詳細講）
可以給父級新增overflow：hidden auto scroll
優點:**簡介
缺點：內容增多的時候，不會自動換行，無法顯示溢位元素
:after 的公升級版
優點：符合閉合浮動的思想，結構語義化正確
缺點: ie6不支援after，
清除浮動：clear:both 塊級元素下移，直到兩邊沒有浮動元素
閉合浮動：使浮動元素閉合，使父元素能夠包含浮動元素，從而減少浮動影響
**更簡潔
ie6 不支援:after
0416 盒子模型
css盒子模型樣式 定義 margin 外邊距，圍繞在元素邊框的空白區，在元素外建立額外的空白。border 邊框，圍繞元素內容和內邊距的一條或多條線。padding 內邊距，在邊框和內容區之間。屬性 margin 外邊距也叫作空白 接受任何長度單位，百分數值和負值，還可設定為auto。margin...
3 盒子模型
盒子模型是我學習css中使用頻率最高的模型，其中主要還是理解整個盒子的構成，以及其中各屬性的作用，最重要的問題就是合併巢狀問題。盒子模型 外邊距margin 邊框border 內邊距padding 內容 border color 邊框顏色 border width 邊框寬度 border style...
05盒子模型
目錄盒子模型用來 放 網頁中的各種元素 網頁設計中內容，如文字 等元素，都可以是盒子 div巢狀 網頁中盒子模型 寬度屬性 寬度with 最大寬度max width 最小寬度min width 長度值 百分比 auto 高度屬性 高度height 最大高度max height 最小高度min hei...