學習總結

對近期學習記錄進行總結，重點在於記錄。

一、block、inline和inline-block

參考連接爲：
block，inline和inline-block概念和區別
CSS Layout - display: inline-block

簡單來講：

• block爲一個塊，另起一行，佔據一個方塊空間，寬度填滿父元素。
• inline爲一行，在行內。
• inline-block 爲互爲inline-block的元素會排在一行，不會另起一行，塊內元素具有block的性質

學習接觸到inline-block的場景是在「抄」導航欄的時候，如果inline則會邊框出狂，block則三個導航會成三行，用inline-block則恰好。

inline

block

inline-block

擴展閱讀：學習CSS佈局

二、SVG與base64

SVG

參考連接爲：
SVG維基百科
SVG Tutorial | MDN
def
xlink:href

SVG是XML語言的一種形式，能夠用來繪製矢量圖形。

SVG容許3種圖形對象類型：矢量圖形、柵格圖像以及文本。圖形對象——包括PNG、JPEG這些柵格圖像——可以被編組、設計、轉換及集成進先前的渲染對象中。文本能夠在任何適用於應用程序的XML名字空間以內，從而提升SVG圖形的搜索能力和無障礙性。SVG提供的功能集涵蓋了嵌套轉換、裁剪路徑、Alpha通道、濾鏡效果、模板對象以及可擴展性。

SVG嚴格聽從XML語法，並用文本格式的描述性語言來描述圖像內容，所以是一種和圖像分辨率無關的矢量圖形格式。

SVG格式是XML的一種，SVG文件其實只是普通的文本文件，用通常的文本編輯器即可查看或修改。

SVG簡單例子爲：

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

詳情可參考SVG Tutorial | MDN

我接觸到的SVG是進行base64編碼後做爲網頁背景使用，例子以下

body{
        font: 16px/1.4 sans-serif;
        background-color: #fff;
    
        background-    image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nNjYnIGhlaWdodD0nMzMnPgoJPGRlZnM+CgkJPGcgaWQ9J2xpbmVzJz4KCQkJPGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTMuMicgeTI9JzE2LjUnIHN0cm9rZS13aWR0aD0nMScgc3Ryb2tlPScjZjZmNmY2Jy8+CgkJCTxsaW5lIHgxPSc5LjknIHkxPScwJyB4Mj0nMjMuMScgeTI9JzE2LjUnIHN0cm9rZS13aWR0aD0nMScgc3Ryb2tlPScjZmNmY2ZjJy8+CgkJCTxsaW5lIHgxPScxOS44JyB5MT0nMCcgeDI9JzMzJyB5Mj0nMTYuNScgc3Ryb2tlLXdpZHRoPScxJyBzdHJva2U9JyNmOWY5ZjknLz4KCQk8L2c+Cgk8L2RlZnM+Cgk8cmVjdCB4PSctMTAlJyB5PSctMTAlJyB3aWR0aD0nMTIwJScgaGVpZ2h0PScxMjAlJyBmaWxsPScjZmZmZmZmJy8+Cgk8dXNlIHhsaW5rOmhyZWY9JyNsaW5lcycgeD0nMzMnIHk9JzE2LjUnIC8+Cgk8dXNlIHhsaW5rOmhyZWY9JyNsaW5lcycgeD0nMzMnIHk9Jy0xNi41JyB0cmFuc2Zvcm09J21hdHJpeCgxIDAgMCAtMSAwIDApJy8+Cgk8dXNlIHhsaW5rOmhyZWY9JyNsaW5lcycgIC8+Cgk8dXNlIHhsaW5rOmhyZWY9JyNsaW5lcycgeD0nMCcgeT0nLTMzJyB0cmFuc2Zvcm09J21hdHJpeCgxIDAgMCAtMSAwIDApJy8+ICAKPC9zdmc+');

}

其中 background-image 中的 base64，後面一大串就是通過base64編碼的SVG文件。
將那一長串進行base64解碼後獲得

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='66' height='33'>
        <defs>
            <g id='lines'>
                <line x1='0' y1='0' x2='13.2' y2='16.5' stroke-width='1' stroke='#f6f6f6'/>
                <line x1='9.9' y1='0' x2='23.1' y2='16.5' stroke-width='1' stroke='#fcfcfc'/>
                <line x1='19.8' y1='0' x2='33' y2='16.5' stroke-width='1' stroke='#f9f9f9'/>
            </g>
    </defs>
    <rect x='-10%' y='-10%' width='120%' height='120%' fill='#ffffff'/>
    <use xlink:href='#lines' x='33' y='16.5' />
    <use xlink:href='#lines' x='33' y='-16.5' transform='matrix(1 0 0 -1 0 0)'/>
    <use xlink:href='#lines'  />
    <use xlink:href='#lines' x='0' y='-33' transform='matrix(1 0 0 -1 0 0)'/>  
</svg>

可見，base64編碼的是一個SVG文件。
base64解碼網站

base64

base64維基百科
廖雪峯講base64
base64編碼解碼網站

我的理解的base64，「64」指的是，使用了64種字符來表示BASE64碼，其中有 一、大小寫字母共52個，二、數字10個， 三、「+」 和 「/」 ，
四、因爲base64是每6位進行編碼總會出現除不盡的狀況，此時則用「=」填充
base64很簡單，看看維基百科就全都明白了。

使用base64 SVG 做爲背景

小tip: base64:URL背景圖片與web頁面性能優化

我暫時還搞不清楚，節省一個http請求是什麼意思，簡單說明下就是這樣操做會SVG會在背景上顯示。
網上有不少SVG背景生成網站，這就是一個

延伸閱讀：
Probably Don’t Base64 SVG
探究 dataURI 中使用 SVG 正確姿式
09: SVG with Data URIs

css background-image 屬性

background-image屬性設置一個元素的背景圖像。 元素的背景是元素的總大小，包括填充和邊界（但不包括邊距）。 默認狀況下，background-image放置在元素的左上角，並重復垂直和水平方向。 提示：請設置一種可用的背景顏色，這樣的話，假如背景圖像不可用，可使用背景色帶代替。