web初學 CSS(層疊樣式表)二
八、CSS盒子模型：
0、基本常識：
0.1 盒子模型的簡介：
0.2 盒子標籤不僅僅只有div 與 span ，p 和 h1 標籤等 也是 當做盒子處理
0.3 盒子對屬性定義時 是 整個盒子生效的，它可以用CSS將 行級元素 居中 ：
0.4 清空 margin padding 格式 遇到的問題：
(1) 格式化程式碼：
*{margin：0px;padding:0px;} ------- 所有內容 格式化。
(2) 格式化帶來的問題：body標籤格式化後 沒有 margin border ，body 內部的 div margin 時會帶動 全部 的body 標籤向下移動 -- 解決方法：
方法一：設定 上邊框 的大小 ------------------- 
方法二： 加上overflow 屬性 ------------------- 
0.5 行級元素與塊級元素及相互轉化：
（1）塊元素：
（2）行內元素：
注意：並非所有的行內元素不可設定高度，例如：img標籤
（3）行內元素與塊元素的相互轉化：display 屬性
span{display:inline;} ------------ 將元素轉化為 行內元素 span{display:inline-block;} ----------- 將元素轉化為 行內塊元素 .span{display:none;} ----------- 將元素 隱藏 並刪除其佔用空間 .span{visibility:hidden;} ----------- 將元素 隱藏 不刪除其佔用空間 span{display:block;} ------------ 將元素 轉化為 塊級元素
1、div盒子模型（塊級盒子 ------自動換行）：
（1）CSS 邊框border屬性：
用法例項：
（2） CSS 內邊距 padding：
div.a{padding:10px 20px;} ------- 當只寫 兩個引數時， 前面 --- 上下 ； 後面 --- 左右。
錯誤例項：div.a{padding:10px auto;} ------- padding不能用 auto（3）CSS外間距 margin：
margin 與 auto 使用具有 居中的效果 ,注意 auto 寫在 上下 是預設為 0
div.a{margin:10px 20px;} ------- 當只寫 兩個引數時， 前面 --- 上下 ； 後面 --- 左右。
div.a{margin:10px auto;} ------- 上下 10px 左右 自動 居中，即 auto 左右 預設為 居中。
div.a{margin:5px auto 5px 200px}
div.a{margin:auto 10px;} ------- 上下 0px 左右 10px ，即 auto 上下 預設為 0px。 （4）設定背景 background：
① 設定背景顏色：
②設定 背景圖片：
③設定 是否 填充：
④ 設定 圖片位置：
⑤ 設定 頁面影象位置 固定：
⑥ 設定匯入背景影象大小：
⑦ 綜合 顯示：
2、行內塊 盒子模型 ： display:inline-block
（1）常見的問題：
① 格式化 行內塊 生成時的間距：
（2）案例：
九、無序列表ul 和 有序列表 ol ：
列表的理解：塊級盒子的集合（小型的body 標籤） ------- 內部元素都是塊級元素
1、無序列表：
（1） ul 基本常識
外觀： 
特點：自帶 padding ，使用時 通常 清除 padding 。他可以 多層巢狀：
（2）ul 標籤 自身的屬性：
① type 屬性：
-------- html檔案 ，這是標籤內部屬性 ，並非css 屬性-----------
<ul type="none"><li>無序列表，前面沒有標記</li></ul>
2、有序列表 ol ：
（1）基本常識：
程式碼 與 ul 類似 ，只是結果 可以排序。
（2）ol 標籤 本身的屬性：
屬性：
例項：
