03- CSS進階

• 盒子模型
• Reset CSS
• CSS 浮動
• CSS 定位

盒子模型

能夠把頁面上的元素當作一個盒子
盒子模型由內容、內邊距、邊框、外邊距構成
padding - 內邊距
margin - 外邊距 ☆
border - 邊框
content(width、height) - 內容
border-top: 上邊框
border-right: 右邊框
border-left: 左邊框
border-bottom: 下邊框 
double 雙線
dotted 點
dashed 虛線
solid 實線
padding、margin - 參數 上右下左 順時針
px 像素

Reset 重置

Reset - 重置CSS
瀏覽器解析標籤的時候自己自帶一些
樣式，有時會致使咱們自身寫的樣式
出現的效果不一致，每一個公司會根據
本身的業務需求寫一套屬於本身的ResetCss

浮動

float:left 向左浮動
float:right 向右浮動
要先改爲內聯塊狀
脫離文檔流
可能會形成高度塌陷
三種解決方法：
    一、overflow:hidden;不推薦只適用於純浮動的頁面佈局
    二、加一個空的<div></div>;也不推薦
    三、.clearfix::{
            display:block;
            clear:both;
            content:''; 空字符
        } 推薦 比較經常使用

定位

做用：對元素進行精確的定位
三種形式
	一、絕對定位:position:absolute;
	二、相對定位:posttion:relative;
	三、固定定位:position:fixed;
固定定位於相對定位不脫離文檔流，是相對於本身的一個偏移
絕對定位是脫離文檔流的
父相子絕 保持頁面的佈局完整
以網頁頁面爲基礎 
left:100px
bottom:100px
right:100px
top:100px