CSS學習筆記

時間  2019-12-07
標籤 css 學習 筆記 欄目 CSS 简体版
原文   原文鏈接

CSS學習筆記

在學習CSS的過程當中作的一些記錄，用於將來的快速回憶。

HTML常見元素和理解

head中的元素

  • <meta charset="utf-8">指定字符集
  • meta name="viewport" content="..."定義視圖大小與設備屏幕大小的比例，用戶是否可縮放
  • <base href="/">指定基準路徑

body中的元素

  • a[href, target]
  • img[src, alt]
  • table td[colspan, rowspan]
  • form[target, method, enctype]
  • input[type, value]
  • button[type]
  • select > option[value]
  • label[for]

如何理解HTML

HTML5新增內容

  • 新的區塊標籤：section、article、nav、aside
  • 表單加強：添加日期時間搜索類型、表單驗證、Plaveholder自動聚焦
  • 新增語義：header/footer頭尾、section/article區域、nav導航、aside不重要的內容、em/strong強調、i爲icon

HTML元素分類

  • 按默認樣式分：塊級block、行內inline（沒有尺寸屬性width/height等）、inline-block

HTML元素嵌套關係

  • 塊級元素能夠包含行內元素
  • 塊級元素不必定能包含塊級元素，例如<p></p>
  • 行內元素通常不能包含塊級元素（a >div 元素例外）

HTML元素默認樣式

  • 使用CSS Reset清除一些默認樣式
  • 使用Normalize.css來修正默認樣式（例如修正各瀏覽器對寬高定義的不一致）

HTML面試題

  • doctype的意義是什麼？css

    • 讓瀏覽器以標準模式渲染
    • 讓瀏覽器知道元素的合法性

  • HTML XHTML HTML5之間的關係？html

    • HTML屬於SGML
    • XHTML屬於XML，是HTML進行XML嚴格話的結果
    • HTML5不屬於SGML或XML，比XHTML寬鬆

  • HTML5有什麼變化？css3

    • 新的語義化元素、表單加強、新的API（離線、音視頻、圖形、實時通訊、本地存儲、設備能力）

  • em與i有什麼區別？git

    • em 是語義化的標籤，表強調
    • i 是純樣式的標籤，表斜體（通常不在HTML5中用）

  • 語義化的意義是什麼？github

    • 開發者容易理解
    • 機器容易理解結構（搜索引擎、讀屏軟件）
    • 有助於SEO

  • 哪些元素能夠自閉合？面試

    • input、img、br、hr、meta、link

  • HTML和DOM的關係？跨域

    • HTML是靜止的
    • DOM是由HTML解析而來的，是活的
    • JS能夠維護DOM

  • form的做用有哪些？瀏覽器

    • 直接提交表單
    • 使用submit/reset按鈕
    • 便於瀏覽器保存表單
    • 第三方庫能夠總體提取值

CSS（Cascading Style Sheet）基礎

瀏覽器在解析選擇器時是從右到左的。

選擇器分類

  • 元素選擇器 a{}
  • 僞元素選擇器 ::before()
  • 類選擇器 .link{}
  • 屬性選擇器 [type=radio]{}
  • 僞類選擇器 :hover{}（僞元素是真實存在的，而僞類是一種狀態）
  • ID選擇器 #id{}
  • 組合選擇器 [type=checkbox] + label{}
  • 否認選擇器 not(.link){}
  • 通用選擇器 *{}

選擇器權重

  • 權重計算，相加時不進位性能優化

    • ID選擇器：+100
    • 類、屬性、僞類：+10
    • 元素、僞元素：+1
    • 其餘選擇器：+0
  • !important優先級最高
  • 元素屬性 優先級高
  • 相同權重 後寫的生效

非佈局樣式

  • 字體服務器

    • 字體族（使用時不能加引號）：serif(襯線體)、sans-serif(非襯線體)、monospace(等寬字體)、cursive(手寫體)、fantasy(花體)
    • 多字體（使用時須要對每一個字體用引號，fallback機制是針對每一個字）

    • 網絡字體、自定義字體

      /* 自定義字體 */
/* url可以使用在線url，若跨域，須要對方服務器容許跨域（對方服務器展現CORS頭） */
@font-face {
    font-family: "JC";
    src: url("./define.ttf")
}
.custom-font {
    font-family: JC
}
    • iconfont

  • 行高

    • line-height會撐起line-box的高度，以line-height最大的爲準
    • 字體渲染時默認以base-line（基線）爲準，可經過修改vertical-align來修改對齊方式或基線位置

    • 圖片空白

      • 緣由：img行內元素，以inline的方式排版，渲染時默認以字體對齊的base-line爲準
      • 誤差大小：以字體大小爲依據
      • 修正：①將圖片style設置爲vertical-align: bottom；②display: block;

  • 背景

    • 純色背景：使用顏色名或rgb或rgba(帶透明度)或hsl(色相)或hsla(帶透明度的色相)指定

    • 漸變色背景：

      • 線性漸變

        • 簡單寫法：linear-gradient(to right, red, green)，to right指明從左到右，也可以使角度30deg
        • 也可添加多顏色以及控制顏色位置linear-gradient(30deg, red 0, green 10%, yellow 50%, green 100%)
      • 放射性漸變

    • 多背景疊加

      • 背景①：linear-gradient(135deg, transparent 0, transparent 45.5%, green 45.5%, green 55.5%, transparent 55.5%, transparent 100%)
      • 背景②：linear-gradient(45deg, transparent 0, transparent 45.5%, red 45.5%, red 55.5%, transparent 55.5%, transparent 100%)
      • 設定背景大小可讓背景顏色循環出現background-size: 30px 30px

    • 背景圖片和屬性（雪碧圖）

      • 使用backgorund-repeat能夠控制圖片是否平鋪以及在哪一個方向循環平鋪
      • 使用background-position來指定圖片的位置，如background:center center爲居中，也但是使用像素
      • 使用background-size來控制圖片大小

      • 雪碧圖（性能優化的一種）製做

        • 就是將不少圖片合成一張圖片（下載時只須要一次http請求），使用時將某部分顯示出來便可
        • 使用div來放置圖片，使用background來引入圖片，使用width/height來擬合圖標的大小，使用backgroung-position來在雪碧圖中找到圖標，使用background-size來縮放圖標大小

    • base64和性能優化

      • 經常使用於小圖標
      • 文件會增大（①圖片體積會增大1/3；②CSS文件會變大）
      • 會變慢（瀏覽器須要將base64解碼）

    • 多分辨率適配

      • 對於高分辨率的屏幕，須要製做更大尺寸的圖標，而後使用background-size將其縮小，以解決高分屏模糊的問題

  • 邊框

    • 邊框的屬性：線型、大小、顏色
    • 邊框背景圖border-img: url(./border.png) 30 round

    • 邊框銜接（CSS實現三角形）

      .div-class {
    width: 0px;
    height: 200px;
    border-bottom: 30px solid red;
    border-left: 30px solid transpatrnt;
    border-right: 30px solid transpatrnt;
    /* 添加圓角能夠將三角形變成扇形 */
}

  • 滾動

    • 滾動行爲與滾動條

      • visivle： 滾動條隱藏（會超出容器）
      • hidden： 滾動條隱藏（不會超出容器）
      • scroll： 滾動條顯示
      • auto： 滾動條自動顯示

  • 文本折行

    • overflow-wrap（舊寫爲word-wrap，通用換行控制）：是否保留單詞
    • word-break（針對多字節文字）：是否把單詞/中文句子/文字看做一個單位

    • white-space：空白處是否斷行

      /* 這是一個示例,不對單詞換行、單箇中文字爲單位 */
.div-class {
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
}

  • 裝飾性屬性

    • 字重：font-weight
    • 斜體： font-style:itatic
    • 下劃線： text-decoration
    • 指針： cursor

  • hack

    • hack（不合法但生效的寫法）：在特定瀏覽器生效，爲了處理兼容性
    • hack寫在標準屬性後面
    • 缺點：難理解、難維護、易維護
    • 替代方案：特性檢測、針對性添加class

  • 面試題

    • CSS樣式（選擇器）的優先級？

      • 權重的計算（疊加不進位）
      • !important優先級最高
      • 內聯樣式高
      • 後寫的優先級高

    • 雪碧圖的做用

      • 減小HTTP請求數，提升加載性能
      • 在一些狀況下能夠減小圖片的大小

    • 自定義字體的使用場景

      • 宣傳/品牌/banner等固定文案
      • 字體圖標

    • base64的使用

      • 將圖片變成文本
      • 減小HTTP請求數
      • 適用於小圖片

    • 僞元素與僞類的區別

      • 僞類表狀態
      • 僞元素是真的有元素
      • 前者單冒號，後者雙冒號（因爲歷史問題，考慮兼容性時before/after可能須要使用單冒號）

    • 如何美化checkbox

      • label[for]和id
      • 隱藏原生input
      • input:checked + label

CSS（Cascading Style Sheet）佈局

CSS佈局歷史

  • 早期以table爲主（簡單）
  • 後來以技巧性佈局爲主（難）
  • 如今有flexbox/grid佈局（偏簡單）
  • 響應式佈局是必備知識

經常使用佈局方法

  • table表格佈局
  • float浮動 + margin
  • inline-block佈局
  • flexbox佈局

table表格佈局

<!-- 常規表格佈局 -->
<table>
    <tr>
        <td class="left">左</td>
        <td class="right">右</td>
    </tr>
</table>
<!-- 模擬表格佈局 -->
<div class="table">
    <div class="table-row">
        <div class="left table-cell">左</div>
        <div class="right table-cell">右</div>
    </div>
</div>
.table {
    display: table;
    width: 900px;
    height: 100px;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
    vertical-align: center;
}

一些佈局屬性

  • 盒子模型

    • content、 padding、border、margin
    • 兩種：W3C標準模型、IE標準模型

  • display/position

    • display肯定元素的顯示類型：block/inline/inline-block

    • position肯定元素的位置：static（默認）/relative/absolute/fixed

      • static默認值，文檔流
      • relative相對位置，是相對於元素自己原來的位置，該值不會改變元素原來佔用的空間
      • absolute絕對位置，脫離文檔流，不影響文檔流的其餘元素，相對於最近的relative或absolute元素
      • fixed，脫離文檔流，不影響文檔流中的其餘元素，相對於屏幕可視區域來固定

  • 層級

    • 使用z-index來設置層級（relative，absolute，fixed這三種能夠設置z-index）
    • 默認後出現的元素在上層

flexbox佈局（現代化佈局）

  • 基本知識

    • 是彈性盒子
    • 盒子原本就是並列的
    • 指定寬度便可（可以使用flex:1與width:20px兩種方式）
  • 兼容性問題：IE徹底不支持flex

float佈局

  • 特性

    • 元素「浮動」
    • 脫離文檔流，不脫離文本流

  • 對自身的影響

    • 造成「塊（block）」（BFC）
    • 位置儘可能靠上
    • 位置儘可能靠左（右）

  • 對兄弟元素的影響

    • 上面貼非float元素，旁邊貼float元素
    • 不影響其餘塊級元素的位置，影響其餘塊級元素的文本

  • 對父級元素的影響

    • 從佈局上「消失」
    • 高度塌陷

  • float三欄佈局示例

    .left {
    float: left;
    width: 200px;
}
.right {
    float: right;
    width: 200px;
}
.middle {
    margin-left： 200px;
    margin-right： 200px;
}
/* 注意，這裏應該將left與right元素放在上面，而後再放middle */

inline-block佈局

  • 特性

    • 像文本同樣排列block元素
    • 沒有清除浮動的問題
    • 須要處理間隙問題

  • 處理inline-block的間隙問題（就比如文字之間有間隙，inline-block一樣有這個問題）

    • 父元素中將font-size設置爲0；子元素中再將font-size設置回來（推薦使用這種方式）

    • 間隙是由於兩個div尾部與頭部之間的空間形成的，解決方式：

      <!-- 解決方式① -->
<div>
    <div>left</div><div>
    right</div>
</div>

<!-- 解決方式② -->
<div>
    <div>left</div><!--
    --><div>right</div>
</div>

響應式佈局

  • 在不一樣設備上正常使用
  • 通常主要處理屏幕大小問題

  • 主要方法

    • 第一步在head中添加viewport的內容爲width=device-width
    • 隱藏 + 折行 + 自適應空間
    • rem / viewport / media query
    • 媒體查詢中，範圍大的放在上面

面試題

  • 實現兩欄/三欄佈局的方法

    • 表格佈局
    • float + margin佈局
    • inline-block佈局
    • flexbox佈局

  • position:absolute/fixed有什麼區別？

    • 前者相對最近的absolute
    • 後者相對於屏幕（viewport）

  • display:inline-block的間隙

    • 緣由：字符間隙
    • 處理：消滅字符或者消滅字符

  • 如何清除浮動？

    • 爲何須要清除：浮動的元素不會佔據父元素的佈局空間
    • 讓盒子負責本身的佈局
    • overflow: hidden(auto)
    • ::after(clear:both)（或者使用單獨一個元素）

  • 如何適配移動端的頁面？

    • 添加viewport
    • rem / viewport / media query
    • 設計上：隱藏 折行 自適應

CSS（Cascading Style Sheet）效果

box-shadow

視頻播放.jpg
圖片來源：慕課網

  • 默認爲外陰影
  • 末尾添加inset表示外陰影
  • 陰影的形狀與原來的圖形一致

  • 做用

    • 營造層次感（立體感）
    • 充當沒有寬度的邊框
    • 實現特殊效果

text-shadow

  • 做用：立體感 / 品質感

  • text-shadow:Apx Bpx Cpx #000

    • A-向右偏移；B-向下偏移；C-模糊

border-radius

  • 做用：圓角矩形 / 圓形(50%) / 半圓 / 扇形
  • 有邊框時，使用百分數更合理，使用像素時計算的是添加邊框寬度後的半徑
  • border-radius: A B C D / E F G H:ABCD爲水平方向的半徑，EFGH爲垂直方向的半徑

  • 扇形示例

    .container {
    width: 100px;
    height: 100px;
    background: red;
    border-top-left-radius: 100px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
  • 左上角水平方向10px，垂直方向20px：border-top-left-radius: 10px 20px

background

  • 做用：紋理 / 圖案 / 漸變
  • 小技巧：雪碧圖動畫 / 背景圖尺寸適應

  • 雪碧圖動圖

    • 將兩個圖標放在同一個圖片中，利用:hover在鼠標飄過期改變background-position的值並添加過分
  • background-repeat指定是否循環

  • background-size

    • cover保持圖片長寬比不變，覆蓋整個容器，多餘的部分不顯示
    • contain保持圖片長寬比不變，顯示整個圖片，容易多餘的部分變爲空白

clip-path

  • 對容器進行裁剪（常見幾個圖形 / 自定義路徑）

    • clip-path: inset(100px, 50px)裁剪成長100px寬50px的矩形 =
  • clip-path不改變容器內的定位

3D-transform

  • 屬性有：translate / scale / skew / rotate9
  • 屬性出現的順序會影響效果

面試題

  • 如何用一個div畫XXX？

    • box-shadow無限投影
    • ::before
    • ::after

  • 如何產生不佔空間的邊框

    • box-shadow
    • outline

  • 如何實現圓形元素

    • border-radius：50%

  • 如何實現IOS圖標的圓角

    • clip-path：(svg)

  • 如何實現半圓、扇形等圖形

    • border-radius組合 ：有無邊框 / 邊框粗細 / 圓角半徑

  • 如何實現背景圖居中顯示 / 不重複 / 改變大小

    • background-position
    • background-repeat
    • background-size（cover / contain）（若是是百分數，則其是相對於容器的大小）

  • 如何實現3D效果

    • perspective：500px
    • transform-style：preserve-3d
    • transform： translate / rotate

CSS（Cascading Style Sheet）動畫

概述

  • 原理

    • 大腦暫存動畫

  • 做用

    • 愉悅感 / 引發注意 / 反饋 / 掩飾

transition補間動畫

  • 位置-平移（left / right / margin / transform）
  • 方位-旋轉（transform）
  • 大小-縮放（transform）
  • 透明度（opacity）
  • 其餘-線性變換（transform）

  • 屬性

    • transition-delay：延遲多久才執行補間動畫
    • transition-timing-function：定義動畫進度和時間的關係
  • 可在devtools/elements/animatiom查看動畫
  • 可在https://www.w3cways.com/css3-...上定製動畫

keyframes關鍵幀動畫

  • 至關於多個補間動畫，與元素狀態的變化無關，定義更加靈活
  • 屬性名：animation

  • 具體屬性名

    • animation-direction定義方向
    • animation-iteration-count定義動畫循環次數
    • animation-play-state設置動畫狀態（可結合JS來實現更加酷炫的應用）
    • animation-fill-mode設置動畫完成後的狀態

  • 定義動畫

    /* from/to可使用百分數 */
@keyframes animation-run{
    from{ width：100px; }
    to{ width:800px }
}

逐幀動畫

  • 特色：適用於沒法補間計算的動畫 / 資源較大
  • 使用animation- timing-function：steps(1)

面試題

  • CSS動畫的語法

    • 參考以上筆記

  • CSS動畫的實現方式有幾種

    • transition
    • keyframes（animation）

  • 過渡動畫與關鍵幀動畫的區別

    • 過渡動畫須要有狀態變化
    • 關鍵幀動畫不須要狀態變化
    • 關鍵幀動畫能控制得更精細

  • CSS動畫的性能

    • 性能不壞
    • 部分狀況下優於JS
    • 但JS能夠作得更好
    • 部分高危屬性性能較差，如bax-shadow

CSS（Cascading Style Sheet）預處理器

概述

  • 特色

    • 基於CSS的另外一種語言
    • 能夠經過工具將其編譯成CSS
    • 添加了不少CSS不具有的特性，如變量等
    • 能提高CSS文件的組織
  • 目前主流：Less / Sass

  • 功能

    • 嵌套，反映層級和約束
    • 變量和計算，減小重複代碼
    • Extend和Mixin，代碼片斷
    • 循環，適用於複雜有規律的樣式
    • import，CSS文件模塊化

Sass嵌套

後綴名爲.scss。

.outter {
    background: red;
    .inner{
        background: green;
    }
}

Sass變量

變量是能夠計算的。

/* 變量定義 */
$fontSize: 20px;
$bgColor: red;
/* 變量使用 */
.content {
    background: $bgColor;
    font-size: $fontsize;
}

Sass Mixin

相似於JS的方法。

$fontSize: 20px;
/* Mixin 定義 */
@mixin block($fontSize) {
    font-size: $fontSize;
    color: red;
}
/* Mixin 使用 */
.content {
    @include block($fontSize);
    .inner {
        @include block($fontSize + 5px);
    }
}

Sass extend

複用代碼塊

$fontSize: 20px;
@mixin block($fontSize) {
    font-size: $fontSize;
    color: red;
}
/* extend 定義 */
.block {
    font-size: $fontSize;
    color: red;
}
/* extend 使用 */
.content {
    @extend .block；
    background： green；
}

Sass loop

循環

/* 示例生成網格系統 */
/* 循環 定義(利用mixin遞歸) */
@mixin gen-col($n) {
    @if $n > 0 {
        @include gen-col($n - 1);
        .col-#{$n} {
            width: 1000px / 12 * $n;
        }
    }
}
/* 循環 使用 */
@include gen-col(12);
/* 循環 定義(利用for)並使用 */
@for $i from 1 through 12 {
    .col-#{$i} {
        width: 1000px / 12 * $i;
    }
}

Sass import

/* Sass中使用 @import 引入文件 */
/* 不一樣文件的變量、mixin等在被import到同一個文件後能夠跨文件調用 */
@import "./a-scss"
@import "./b-scss"

CSS預處理器框架

  • SASS - Compass
  • Less - Lesshat / EST
  • 提供現成的mixin

面試題

  • 預處理器的做用

    • 幫助開發者更好的組織CSS代碼
    • 提升代碼複用率
    • 提高可維護性

  • 預處理器的能力

    • 嵌套，反映層級和約束
    • 變量和計算，減小重複代碼
    • Extend和Mixin，代碼片斷
    • 循環，適用於複雜有規律的樣式
    • import，CSS文件模塊化

  • 預處理器的優缺點

    • 優勢：提升代碼複用率和可維護性
    • 缺點：須要引入編譯過程，有學習成本
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程