一.拼接網頁

　　將區域整體劃分起名 => 對其他區域佈局不產生影響
　　提出公共css => reset操作
　　當有區域傳送顯示重疊(脫離文件流導致的), 需要通過z-index調整層級
　　一定需要最外層,且最外層做自身佈局時,不要做過多佈局操作

二.過渡(動畫)

　　transition屬性

　　transition: 過渡時間(必須) 延遲時間(一般不設) 過渡屬性(一般採用all預設值) 過渡曲線(貝賽爾曲線)(cubic-bezier())

　　過渡屬性具體設定給初始狀態還是第二狀態根據具體需求

　　過渡的持續時間: transition-duration: 2s;

　　延遲時間: transition-delay: 50ms;

　　過渡屬性:單一屬性 | 屬性1, ..., 屬性n | all

　　transition-property: all;

　　過渡曲線: cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear

　　transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);

三.陰影

　　x軸偏移量   y軸偏移量   虛化程度   

　　box-shadow: 0 0 10px  10px  black;

　　一個盒子可以設定多個陰影, 每一套陰影間用逗號隔開

　　box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;

四.偽類實現邊框

自身需要定位

.box {

    position: relative;

}

偽類通過定位來完成圖層的佈局

.box:before {

    content: "";

    /*完成佈局*/
 


    position: absolute;

    top: 10px;

    left: 0;

    /*構建圖層*/

    width: 1px;

    height: 100px;

    background-color: black;

}

.box:after {

    content: "";

    position: absolute;

    width: 100px;

    height: 1px;

    background-color: black;

    top: 0;

    left: 10px;

}