一、CSS精靈技術

精靈圖其實幾句是有多張小圖片，做成一張大圖片，通過精確位置定位+寬度高度來限制圖片顯示。使用這種技術能夠減少與web服務器的交互。

二、字體圖標

所謂字體圖標是在一個網頁中我們看着像是一個圖片(圖標)，實際上是字體（來自字體庫）。使用字體圖標的好處是：我們可以任意修改圖標的大小、顏色等（不必求UI工程師）。字體圖標網站：https://icomoon.io/ (國外的) https://www.iconfont.cn/ (國內阿里媽媽)，具體使用方式：

2.1、下載字體圖標

首先需要從icomoon.io下載我們需要字體庫並解壓，解壓後如下圖所示，我們需要將fonts文件整個拷貝到項目中

2.2、聲明字體庫

<style>
@font-face {/* 聲明字體庫  注意路徑 */
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot'); /* IE9 Compat Modes */
    src: url('fonts/icomoon.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/icomoon.woff') format('woff'), /* Modern Browsers */
        url('fonts/icomoon.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('fonts/icomoon.svg#icomoon') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}
</style>

2.3、引用字體庫中圖標

使用字體庫中圖標，我們需要藉助從icomoon網站下載的壓縮包裏的demo.html，使用方式有兩種

使用方式1：在demo.html頁面中直接ctrl+c右側圖標（用方框圈出的），然後ctrl到代碼span中：

<style>
/* 字體庫聲明 省略*/

/* 引用字體庫 */
span {
    font-family: "icomoon";
    font-size:100px;  /* 修改字體大小 */
    color: skyblue;   /* 修改顏色 */
}
</style>
<span></span>

使用方式2：

<style>
div::before {
    font-family: "icomoon";
    font-size:100px;
    color: purple;/* 修改顏色 */
    content: "\e91b"
}
</style>
<div></div>

2.4、效果

三、滑動門技術

滑動門技術主要用於導航欄，底層實現技術是利用CSS精靈和盒子padding撐開寬度，以便能適應不同字數的導航欄。通常導航是由a標籤來實現，所以在應用滑動門技術的時候，我們經常用a標籤裏面掛span標籤，例如微信導航

<style>
a {
    margin:100px;
    display: inline-block; /* a標籤是行內元素 不能設置寬、高 所以轉成行內塊元素 */
    background: url('./images/ao.png') no-repeat;
    height: 33px;
        /**
        * 不能設置寬 只能設置padding 因爲導航的字數不確定 應該由內容自動撐開
        * 設置padding-left主要用於顯示背景圖片 左邊圓角
        */
    padding-left: 15px;

    color: #fff;
    text-decoration: none;
    line-height: 33px;
}
a span {
    display: inline-block;
    height: 33px;
    background: url('./images/ao.png') no-repeat right; /* 需要背景圖片 右邊圓角 因此需要右對齊 */
    padding-right: 15px;
}
</style>

<body>
    <a href="#">
        <span>首頁</span>
    </a>
    <a href="#">
            <span>在線圖庫</span>
    </a>
</body>

四、利用僞元素增加邊框

<style>
div {
  width:296px;
  height: 180px;
  margin 20 auto; /* 盒子水平居中 */
  postition: relative; /* 子絕父相 */
}
div:hover::before {
    content: "";
    display: block;/* 僞元素是行內元素 不能設置寬高 所以改成block */
    border: 2px solid rgba(255,255,255, 0.3);
    /* 使僞元素不佔位置 就必須使用定位技術*/
    position: absolute;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
}
</style>
<div> <img src='./hello.png' /> </div>

五、過渡效果

過渡效果通過css3中的transition屬性來實現，tansition語法： transition 要過渡的屬性花費的時間運動曲線何時開始

div {
    width: 200px;
    height: 100px;
    background-color: pink;
    /**
        * 鼠標經過 寬度和寬度同時改變  在0.5秒完成過渡效果
        * 運動曲線是  ease-in
        * 0s 表示立即開始
        */
    transition: width 0.5s ease-in 0s, height 0.5s ease-in 0s;
}
div:hover {
    width: 400px;
    height: 200px;
}

<body>
    <div></div>
</body>

六、CSS3動畫animation

屬性說明： animation:動畫名稱動畫時間運動曲線何時開始播放次數是否方向

<style>
@keyframes gogo {/* 定義一個動畫 */
    from {
        transform: translateX(0);/* 起始點 */
    }
    to {
        transform: translateX(300px); /* 終止點 */
    }
}
/* 分階段設置 動畫效果
@keyframes gogo {
    0% {
        transform: translate3d(0,0,0);
    }
    25% {
        transform: translate3d(800px,0,0);
    }
    50% {
        transform: translate3d(800px,400px,0);
    }
    75% {
        transform: translate3d(0,400px,0);
    }
    100% {
        transform: translate3d(0,0,0);
    }
}*/
div {/* 引用一個動畫 */
    width: 100px;
    height: 100px;
    background-color: #000000;
    /* animation: gogo 2s ease 0s 1 normal;  播放1次 */
    animation: gogo 2s ease 0s infinite normal; /* 無限次播放 */
}
</style>

可以利用動畫實現，無縫滾動圖片效果

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    nav {
        width: 882px;
        height: 86px;
        margin: 100px auto;
        overflow: hidden; /* 溢出部分 隱藏 */
    }
    nav li {
        float: left;
    }
    /* 給ul加動畫 */
    @keyframes moving {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-882px);
        }
    }
    nav ul {
        width:200%; /* 因爲是兩組數據 所以寬度要是2倍 */
        animation: moving 5s linear infinite;
    }

    nav:hover ul {
        animation-play-state: paused; /* 鼠標經過nav  ul停止運動 */
    }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><img src="./images/nav1.jpg" alt=""></li>
            <li><img src="./images/nav2.jpg" alt=""></li>
            <li><img src="./images/nav3.jpg" alt=""></li>
            <li><img src="./images/nav4.jpg" alt=""></li>
            <li><img src="./images/nav5.jpg" alt=""></li>
            <li><img src="./images/nav6.jpg" alt=""></li>
            <li><img src="./images/nav7.jpg" alt=""></li>

            <!-- 用兩組相同的數據做無縫 -->
            <li><img src="./images/nav1.jpg" alt=""></li>
            <li><img src="./images/nav2.jpg" alt=""></li>
            <li><img src="./images/nav3.jpg" alt=""></li>
            <li><img src="./images/nav4.jpg" alt=""></li>
            <li><img src="./images/nav5.jpg" alt=""></li>
            <li><img src="./images/nav6.jpg" alt=""></li>
            <li><img src="./images/nav7.jpg" alt=""></li>
        </ul>
    </nav>
</body>

七、伸縮佈局-flex屬性

利用flex屬性，可以實現響應模式。首先父盒子需要設置display:flex;表示使用伸縮佈局方式，然後子盒子設置flex:n;來表示子盒子佔用n份，如下所示，將一個寬爲800px的盒子劃分成7份（2+3+2），第一個子盒子和最後一個盒子佔4份，第二盒子佔3份：

<head>
    <style>
    section {
        width: 800px;
        height: 200px;
        margin: 100px auto;
        border: 1px solid pink;
        display: flex;
    }
    section div:nth-child(1) {
        flex: 2;
        background-color: red;
    }
    section div:nth-child(2) {
        flex: 3;
        background-color: blue;
    }
    section div:nth-child(3) {
        flex: 2;
        background-color: yellow;
    }
    
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

flex常用屬性：

	取值	備註
display	flex	設置給父盒子，注意子元素float、clear、vertical-align將失效
flex-direction	row：水平佈局，默認 column：垂直佈局	設置給父盒子，元素自動水平（垂直）排列
min-width/max-width	最小、最大寬度	當達到門限則不進行伸縮
justify-content	flext-start：子元素從左向右排序 flext-end：子元素從右向左排序，但盒子順序不變 center：從中間排序 space-between：只中間的子盒子左右兩邊有縫隙 space-around：表示所有盒子左右兩邊有縫隙	沿着主軸對齊，使子盒子在父盒子中水平對齊
align-items	flext-start：上對齊 flext-end：下對齊 center：垂直居中 -- 盒子真正的垂直居中 stretch：在子元素不設置高度時，可以通過這個屬性來設置子元素的高度等於父元素的高度	通常是單行中，使子盒子在父盒子中垂直對齊
flex-wrap	nowrap：表示不換行，強制在一行顯示，子盒子的寬度必然變小，默認參數 wrap：自動換行 wrap-reverse：翻轉顯示	當個子盒子數量較多時，寬度超過父盒子寬度，用此參數設置是否換行顯示
flex-flow	flex-flow是flex-direction和flex-wrap的簡寫形式
align-content	flex-start、flex-end space-between、space-around center stretch	可用於多行垂直對其父盒子必須指定：display:flex; flex-flow:row wrap;
order	用於給子盒子設置顯示順序，數值越小越先排列，默認值爲0，可爲負數

使用flex伸縮佈局可以去掉盒子間的空白縫隙：需求，用ul包裹li，使li在ul中居中顯示。

方法1：在ul中增加text-align:center，在li中增加display:inline，但是發現li中間有空白縫隙

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    blockquote,body,button,dd,dl,dt,fieldset,
    form,h1,h2,h3,h4,h5,h6,hr,input,legend,
    li,ol,p,pre,td,textarea,th,ul {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    .container {
        height: 300px;
        width: 800px;
        margin: 100px 200px;
        border: 1px solid red;
    }
    .container ul {
        width: 600px;
        margin: 100px auto;
        text-align: center;/* 使文本居中顯示 */
        background: pink;
    }
    .container ul li{
        display: inline;/* 如果li內容要是居中顯示 則必須設置成行內元素、行內塊元素 */
        border: 1px solid blue;
        padding: 0 10px;
    }
    </style>
</head>
<body>
    <div class="container">
        <ul><!-- 兩個li中間有空白縫隙 -->
            <li><a href="#">關於我們</a></li>
            <li><a href="#">聯繫我們</a></li>
            <li><a href="#">聯繫客服</a></li>
            <li><a href="#">合作招商</a></li>
            <li><a href="#">商家幫助</a></li>
            <li><a href="#">關於我們</a></li>
        </ul>
    </div>
</body>

方法2：使用flex伸縮佈局，最佳方式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    blockquote,body,button,dd,dl,dt,fieldset,
    form,h1,h2,h3,h4,h5,h6,hr,input,legend,
    li,ol,p,pre,td,textarea,th,ul {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    .container {
        height: 300px;
        width: 800px;
        margin: 100px 200px;
        border: 1px solid red;
    }
    .container ul {
        width: 600px;
        margin: 100px auto;
        display: flex;/* 設置flex模式 */
        flex-direction: row; /* 行模式顯示 */
        justify-content: center; /* 居中顯示 */
        background: pink;
    }
    .container ul li{
        border: 1px solid blue;
        padding: 0 10px;
    }
    </style>
</head>
<body>
    <div class="container">
        <ul><!-- 兩個li中間不在有空白縫隙 -->
            <li><a href="#">關於我們</a></li>
            <li><a href="#">聯繫我們</a></li>
            <li><a href="#">聯繫客服</a></li>
            <li><a href="#">合作招商</a></li>
            <li><a href="#">商家幫助</a></li>
            <li><a href="#">關於我們</a></li>
        </ul>
    </div>
</body>

八、BFC（Block Formatting Context 塊級元素上下文）

BFC本質就是一個封閉的區域（獨立的區域），只有塊級元素參與其中，在這個區域中的子盒子可任意佈局，但是絕對不會對該區域以外的盒子產生任何影響（類似清除浮動的效果）。只有display屬性爲block、list-item、table的元素具有BFC潛力，但需要設置如下屬性之一纔可真正創建BFC區域：

float的屬性不是none

position爲absolut或者fixed

display爲inline-block、table-cell、table-caption、flex、inline-flex

overflow不爲visible，例如： overflow:hidden，通常使用這種方式創建BFC，這種方式副作用最小

BFC的作用：

1）清除元素內部浮動（代替clear屬性）：因爲在計算BFC區域的高度時，會檢測區域內浮動元素的高度。

2）解決外邊距margin合併的問題，在同一個BFC區域中兩個相鄰的子盒子外邊距會重疊，那麼只需要將兩個盒子設置成不同的BFC就可以保證margin不合並，例如：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .parent {
            width: 400px;
            height: 500px;
            border: 1px solid pink;
        }
        .son1 {
            width: 200px;
            height: 100px;
            background-color: skyblue;
            margin-bottom: 50px;
        }
        .son2 {
            width: 200px;
            height: 100px;
            background-color: yellow;
            margin-top: 100px;
        }
        .overflow {/* 創建BFC區域 */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="overflow"><!-- son1 和 son2 不是同一個BFC -->
            <div class="son1"></div>
        </div>
        <div class="son2"></div>
    </div>
</body>

3）BFC區域不在和浮動產生交集，當我們給元素設置了float屬性後該元素就會脫離標準流，不佔用原來位置，後面的元素就會替補，產生交集，我們可以通過給後面元素創建BFC區域，這樣就不會產生交集，相當於給所有浮動加了float屬性。

九、盒子居中、文本居中總結

		方式
盒子	普通盒子	margin X auto; /* 垂直居中水平居中 */ X = (父盒子高度 - 子盒子高度)/2 可以實現垂直居中
	定位盒子	position:absolute; left: 50%; margin-left: 負值（盒子本身寬度的一半） top: 50%; margin-top: 負值（盒子本身高度的一半）注意：這裏的margin可以替換成 transform:translate(-50%, -50%); 這裏的-50%分別代碼自己盒子的寬和高，這裏不需要計算。
	flex伸縮佈局方式	display:flex; align-items:center;
文本		text-align:center; /* 水平居中 / line-height == height / 行高等於高度垂直居中 */

到這裏，CSS3相關總結就全部都結束了。

CSS3備忘錄3

一、CSS精靈技術

二、字體圖標

2.1、下載字體圖標

2.2、聲明字體庫

2.3、引用字體庫中圖標

三、滑動門技術

四、利用僞元素增加邊框

五、過渡效果

六、CSS3動畫animation

七、伸縮佈局-flex屬性

八、BFC（Block Formatting Context 塊級元素上下文）

九、盒子居中、文本居中總結

SQL優化-20231016

C語言實現爲終端程序--webshell基石

簡約而不簡單epoll之EPOLLRDHUP

簡約而不簡單epoll之EPOLLOUT

kvm網絡那些事兒

Webpack入門簡介

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結