前端週記1--CSS

南方小菜發表於2019-03-16
前端CSS

CSS小記

基礎知識點

- transform
    1. tranform-origin()：旋轉基點，當該屬性物件進行旋轉時圍繞此旋轉
    2. rotate()： 英文釋義：旋轉 即是該物件按基點旋轉角度
    3. scale()：壓縮

- transition 過渡效果（簡易版的動畫），讓指定的屬性變化在指定的時間內緩慢進行 usage: 屬性名 時間    

- border
    1. radius

- 偽元素before/after
    - 特點
        1. 內聯元素
        2. 虛擬    
        3. 必須存著content屬性
- calc 實現屬性值計算

- box-sizing: border-box;   使得盒模型

- 語義化
    1. 文件結構更清晰
    2. SEO更加具有解析權重
複製程式碼

實際操作

- 邊線處理
    - 採用偽元素進行實現
    - 關鍵：
        - 定位脫標；
        - 偽元素不影響父盒子模型；
複製程式碼

經典佈局

- 彈性佈局（display：flex）
    - align-items: center 內部子元素縱軸對齊居中 
    - justify-content 橫軸居中
    - flex 
        - 不受塊級約束，自成一體，是父子元素一起的佈局，若flex:1設定在某一個子元素上，則該元素成為主元素，在其餘子元素填充自身的盒子模型完成後的所有餘下的父級內容都交給主元素；
        - flex具有繼承性，即如果想要子元素平分空間，可以給父元素新增flex:1;
    - 注意：
        1. 子元素的float、clear和vertical-align屬性將失效
複製程式碼

居中

垂直 水平 整體居中
塊級 margin:0 auto; top: 50%;left: 50%;
transform: translate(-50%,-50%);
行內塊/行內 vertical-align: middle; text-align: center;
彈性佈局 align-items: center justify-content

深度考點

- 1px 邊框
    - css 畫素 1px 在手機裡 硬體物理畫素 retina 2px 3倍retina 3px
    - 解決方法 transform：scaleY(0.5);配合transform-origin:基點 壓縮使得滿足使用者體驗（蘋果）            
    - 注意點：瀏覽器不會處理小數點畫素，若小數瀏覽器會自然轉為整數進行處理
複製程式碼

邊末細節

-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 去除safaris瀏覽器點選陰影
複製程式碼

相關文章