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 標籤 本身的屬性:
屬性:
例項: