盒子：容器
盒子模型：英文：box model。
最常見的盒子是;div 、span
盒子中的區域：
content
1.寬 width px content
2.高 height px content
3.內邊距 padding
4.外邊距 margin
5.邊框 border
注意 ; 標準盒模型的寬和高與盒子真實占有的寬高不是乙個概念。
內邊距（padding）：內容與邊框的距離。內邊距的區域也會被背景渲染。
padding有四個方向：上 下 左 右。
寫法：1.小屬性寫法
2.復合屬性寫法
四種寫法：
一值法：padding:20px; 上下左右的padding相等。
二值法:padding:20px 10px; 上下 左右
三值法：padding:20px 10px 30px; 上 左右 下。
四值法：padding：10px 20px 30px 40px; 上 右 下 左（順時針） 。
小技巧：
外邊距：margin，盒子與盒子之間的距離。
margin有四個方向：上 下 左 右。
寫法：1.小屬性
margin-left
margin-right
margin-top
margin-bottom
2.復合屬性寫法：
四種寫法：
一值法:margin:20px; 上下左右的margin相等。
二值法:margin:20px 10px; 上下 左右
三值法：margin:20px 10px 30px; 上 左右 下。
四值法：margin：10px 20px 30px 40px; 上 右 下 左 順時針。
auto:
代表自適應,會將剩餘的空間自動分配給設定auto的外邊距。
margin : 0 auto;可以讓盒子水平居中。
border: 邊框 ,盒子占有的最外層的區域。
border是乙個復合屬性。
border有三個要素：寬度，線的型別，顏色。
按三要素拆分：
border-width :設定寬度
border-style :設定線的型別
border-color :設定顏色
按照三要素與方向設定
border-left-width
border-left-style
border-left-color
按照方向設定：
border-left
border-right
border-top
border-bottom
上下盒子的外邊距塌陷： 垂直方向上相鄰的兩個元素，如果都有外邊距，則相交的地方會出現外邊距重合現象，也叫作外邊距塌陷。
在垂直方向上，margin有相遇的部分，不是取兩個margin的和，而是取最大值。
當margin相遇的部分，乙個值為正，乙個值為負，結果為兩個值的和。
當margin相遇的部分，兩個值都為負數，結果為絕對值最大的。
解決方法：
1.bfc規範
2.兩個上下相鄰的同級盒子之間，為了避免出現外邊距塌陷，盡量只設定上盒子的底部margin或下盒子的頂部margin。
盒子的內容多少不確定時，為了保證元素的高度始終合適，不會出現大片留白與溢位，這種情況下一般不設定高度，而是用內容去撐開高度。
父子盒模型：
子盒子的整體占有的位置不要超過父盒子的內容區域。
1.若子盒子不設定寬度，會自動撐滿父盒子的內容區域。
2.若不設定寬，只設定內邊距和邊框，寬度會自適應。
巢狀盒子的外邊距塌陷;
父盒子沒有填充內容，也沒有設定頂部邊框，那麼子盒子的margin-top會讓父盒子與子盒子一起掉下來。
解決辦法：
1.有填充內容即可。（不推薦）
2.給父盒子新增頂部的邊框。（不推薦）
3.將margin換成padding。
同級之間的盒子距離使用margin，父子盒子使用padding。
盒模型分為兩類：
1.標準盒模型:
設定的width和height是指內容的寬和高。增加內邊距與邊框會影響盒子的真實尺寸，但不會影響內容區域的大小。
2.ie盒模型（怪異盒模型）:
設定的width和height是指盒子的真實尺寸。增加內邊距與邊框會影響內容區域的大小，但不會影響盒子的真實尺寸。
定義：內容必須是從左到右，由上往下書寫。前面的內容大小或位置發生變化時，後面的內容也會隨之變化。
eg:html網頁就是乙個標準文件流。
1.空白摺疊現象:無論多少個空格，換行 縮排，都會摺疊成乙個空格。
2.高矮不齊，底部對齊。
3.自動換行
標準文件流將html元素分為了三種：
1.行內元素 inline
3.行內塊元素 inline-block
容器級標籤 div h li dt dd
文本級標籤 span p a i em b
**行內元素：**除了p標籤之外，所有的文本級標籤都是行內元素。p標籤是文本級標籤，但屬於塊級元素。
**塊級元素：**所有的容器級標籤都是塊級元素，包括p標籤。
通過display屬性來檢視當前元素的型別。也可以通過該屬性修改當前元素的型別。
1.塊級元素轉行內元素
display:inline; 擁有行內元素的屬性，塊級元素屬性就會失效。
2.行內元素轉塊級元素
display:block; 擁有塊級元素的屬性，行內元素屬性就會失效。
3. 轉行內塊元素
display:inline-block；可以設定寬高；可以與其他行內元素併排。
將html元素按照顯示型別分類：
1.替換元素
瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。 img/input
2.非替換元素
不是通過標籤的屬性來決定顯示內容的，而是通過標籤所包裹的具體內容來決定。
標準文件流的限制比較多，導致頁面效果很多無法實現。為了可以併排展示，又可以設定寬高，我們可以脫離標準文件流。
css中一共有三種方法可以脫標：
1.浮動
2.絕對定位
3.固定定位
設定浮動的方法：設定浮動的方法：
脫標：
【注】設定浮動之後，不要再設定display屬性了。
元素貼靠：
每乙個浮動元素都會去緊靠上乙個浮動元素
字圍效果：
標準文件流的文字不會被浮動元素遮擋
收縮;
乙個浮動的元素，如果沒有設定寬高，那麼元素將自動收縮為內容的寬高
浮動的巢狀：
如果浮動的子元素的寬的和大於父盒子的寬，那麼後面的子元素會換行。
盒模型 內外邊距和邊框
盒模型 內容 內邊距 邊框 外邊距 如圖 邊框顏色 border color blue rgb 255,0,0 fff000 transparent 透明，預設值不常用可不記 邊框厚度 border width thin medium thick 1em 2px 0.1 thin 細邊框，mediu...
css盒模型。邊框和內外邊距
css盒模型 外邊距 邊框 內填充 內容 盒模型分為兩種 標準盒模型 怪異盒模型 ie盒模型 邊框 border border 10px solid blue 表示設定10畫素藍色實線條的邊框 是以下三個樣式的復合語法 border width 10px 設定邊框的寬度 border color b...
css 盒模型的外邊距
外邊距 margin 外邊距不會影響盒子可見框的大小 但是外邊距會影響盒子的位置 一共有四個方向的外邊距 margin top 上外邊距，設定乙個正值，元素會向下移動 margin right 預設情況下設定margin right不會產生任何效果 margin bottom 下外邊距，設定乙個正值...