註釋：/* */

CSS reset （去除預設樣式）

*   {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
 }
ul,ol {
    list-style:none;
}
img {
   max-width: 100%;
}
複製程式碼

CSS排錯

當border佔用空間時，可以改為outline

草圖工具

推薦網站

1. MDN
2. 張鑫旭的部落格

文件流

每個元素都有一個預設型別，但是都可以通過display:inline/block/inline-block改變

overflow

盒模型

box-sizing:content-box box-sizing:border-box

CSS佈局

float佈局

總結：當元素為“內聯-塊級”元素時，半脫離文件流，仍佔據原來位置

步驟：

• 子元素上加float:left和right
• 在父元素上加.clearfix,父元素一般不設height

.clearfix:after{/*偽元素是行內元素 正常瀏覽器清除浮動方法*/`
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;將元素隱藏，但是在網頁中該佔的位置還是佔著。
}
.clearfix{
    *zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/
}
複製程式碼
 

flow佈局

.container屬性(容器)

主軸流動方向

.container {
    flex-direction:row|row-reverse|column|column-reverse
}
複製程式碼

是否折行（預設不折行）

.container {
    flex-wrap:nowrap|wrap|wrap-reverse
}
複製程式碼

主軸對齊方式

次軸對齊方式

預設：stretch

多行對齊方式

.item屬性

• order

  用於控制彈性元素的位置，預設為 order:0 數值越小越在前面，可以負數或整數。

• flex-grow

  分配多餘的空間

  flex-grow:1
  複製程式碼

一般寫導航欄的時候

.loge {
    flex:0;/*0可以省略*/
}
.nav {
    flex:1;
}
.touxiang {
    flex:0;
}
複製程式碼

• flex-shrink

  控制 當寬度不夠時，按分配比例縮小

• align-slef

grid佈局

.container屬性

• 成為container

  .container{
      diplay:grid|inline-grid;
  }
  複製程式碼

• 行和列

CSS定位

div分層

屬性

• position:relative

總結：不脫離文件流，還佔據原來的位置（移動的時候）

• position:absolute

滑鼠提示

總結：1.脫離文件流 2.相對於祖先元素中第一個position不是static的元素定位

• position:fixed

  相對於視口定位

總結：不要和transform一起用

• position：static

  粘滯點位

層疊上下文

CSS渲染動畫

瀏覽器渲染過程

transform（變形）

• translate（偏移）

  #demo:hover {
      transform: translateX(50px);
      transform: translateY(50px);
      transform: translate(50px,50px);/*縮寫*/
  }
  
  
  transform:translateZ(50px);
  /*Z軸在三維上，需要在父級上加一個視點*/
  .container {
      perspective:1000px;/*這個視點在容器中心往後1000px*/
  }
  複製程式碼

利於translate實現垂直居中

#demo {
    left:50%;
    top:50%;
    transform:translate ( -50%,-50%);
}
複製程式碼

• scale(縮放)

• rotate（旋轉）

• skew（傾斜）

新增動畫

transition（過渡）

animation

1.宣告關鍵字
   1. @keyframes xxx {
        0% {
            transform: none;
        }
        66.66% {
            transform: translateX(200px);
        }
        100% {
           transform: translateX(200px);
           transform: translateY(100px);
        }
    }
  2.@keyframes xxx {
        from {
            transform: none;
        }
        to {
            transform: translateX(100%);
        }
    }

2.新增動畫
#demo.start {
  animation: xxx 1.5s forwards(停在最後一幀);    
}

3.加js
button.onclick = ()=>{
    demo.classList.add('start')
}

複製程式碼