為了有效地減少伺服器接受和和傳送請求的次數，提高頁面的載入速度。出現了css精靈技術。
（核心原理：將網頁中的一些小背景影象整合到一張大圖中，這樣伺服器只需要一次請求就可以了）
主要借助於背景位置來實現-background-position。
選擇器字型圖示使用場景：主要用於顯示網頁中通過，常用的一些小圖示。
精靈圖本身放大和縮小會失真，而且製造完成後想要更換麻煩。
所以使用字型圖示iconfont。展示的是圖示，本質是字型。
優點：輕量級，靈活性，相容性，樣式簡單。
字型圖示的使用
字型檔案的引用
沒辦法插入檔案，單獨發
字型宣告
/* 字型宣告 */
@font-face
span
.sanjiao
屬性值描述
default
小白 預設
pointer
小手move
移動text
文字not-allowed
禁止輪廓線outline
給表單新增outline：0；或者outline：none；樣式之後，就可以去掉預設的藍色邊框。
input
textarea
只針對於行內元素或者行內塊元素有效。
語法：vertical-align：baseline | top | middle | bottom值描述
baseline
預設。元素放置在父元素的基線上
top把元素的頂部與行中最高元素的頂端對齊
middle
把此元素放置在父元素中部
bottom
把元素的頂端與行中最低的元素的頂端對齊
解決底部預設空白縫隙問題
bug:底側會有乙個空白縫隙，原因是行內塊元素會和文字的基線對齊
主要解決辦法有兩種：
1，給新增vertical-align：middle | top | bottom 等（提倡使用的）
2，把轉為塊級元素。
溢位的文字省略號顯示
1，單行文字溢位顯示省略號 —— 必須滿足三個條件
1， 先強制一行內顯示文字 white-space：nowrap;（預設normal自動換行）2，多行文字溢位顯示省略號2，超出部分隱藏 overflow：hidden：
3，文字用省略號替代超出的部分 text-overflow：ellipsis；
多行文字溢位顯示省略號，有較大的相容性問題，適合於webkit瀏覽器或移動端（移動端大部分是webkit核心）
overflow：hidden；
text-overflow：ellipsis；
彈性伸縮盒子模型顯示
display：-webkit-box；
限制在乙個塊元素顯示的文字的行數
webkit-line-clamp：2；
設定或檢索伸縮盒子的子元素的排列方式
-webkit-box-orient：vertical；
更推薦讓後台人員來做這個效果，因為後台人員可以設定限時多少個字，操作更簡單。
margin負值運用
1，讓每個盒子margin往左側移動，-1px正好壓住相鄰盒子邊框
2，滑鼠經過某個盒子的時候，提高當前盒子的層級即可（如果沒有定位，則加相對定位（保留位置）），如果有定位，則加z-index
css三角強化
直角梯形中三角形製作
新增的語義化標籤屬性值
描述autoplay
autoplay
controls
controls
width
pixels（畫素）
height
pixels（畫素）
loop
loop
preload
srcurl
poster
imgurl
muted
muted
新增input型別
屬性值說明email
限制使用者輸入必須為email型別
url限制使用者輸入必須為url型別
date
限制使用者輸入必須為日期型別
month
限制使用者輸入必須為月型別
week
限制使用者輸入必須為周型別
number
限制使用者輸入必須為數字型別
tel手機號碼
search
搜尋框color
生成乙個顏色選擇表單
新增表單屬性屬性值
說明required
required
表單擁有該屬性表示內容不能為空，必填
placeholder
提示文字
表單的提示資訊，存在預設值將不顯示
autofocus
autocus
自動聚焦屬性，頁面載入完成自動聚焦到指定表單
autocomplete
off/on
當使用者在字段開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在字段中填寫的選項。
預設已經開啟，如autocomplete=「on」，關閉autocomplete=「off」
需要放在表單內，同時加上name屬性，同時成功提交
multiple
multiple
可以多選檔案提交
可以通過以下設定方式修改placeholder裡面的字型顏色：
input：：placeholder
ie9+支援
新增選擇器
屬性選擇器
選擇符簡介e[att]
選擇具有att屬性的e元素
e[att=「val」]
選擇具有att屬性且屬性值等於val的e元素
e[att^=「val」]
選擇具有att屬性且值以val開頭的e元素
e[att$=「val」]
選擇具有att屬性且值以val結尾的e元素
e[att*=「val」]
選擇具有att屬性且值中包含有val的e元素
類選擇器和屬性選擇器，偽類選擇器 權重都是10
結構偽類選擇器
常用於根據父級選擇器裡面的子元素
選擇符簡介
e：first-child
匹配父元素中的第乙個子元素e
e：last-child
匹配父元素中的最後乙個子元素e
e：nth-child(n)
匹配父元素中的第n個子元素e
e：first-of-type
指定型別e的第乙個
e：last-of-type
指定型別e的最後乙個
e：nth-of-type（n）
指定型別e的第n個
n可以是even（偶數），odd（奇數）。也可以是關於n的函式，（n-1,2n-1,5n等），n+5（從第5個開始（包含第五個）到最後），-n+5（前五個（包含第五個））
type是指定元素進行排序。
偽元素選擇器（重點）
選擇符簡介
：：before
在元素內部的前面插入內容
：：after
在元素內部的後面插入內容
單冒號是css2的寫法，雙冒號是css3的寫法
注意：before和after建立乙個元素，但是屬於行內元素。
新建立的這個元素在文件樹中是找不到的，所以我們稱為偽元素。
before和after必須有content屬性
before在父元素內容的前面建立元素，after在父元素內容的後面插入元素。
偽元素選擇器和標籤選擇器一樣，權重為1.
css3盒子模型
1.box-sizing:content-box 盒子大小為width+padding+border（以前預設的）
2.box-sizing:border-box 盒子大小為width
如果盒子模型我們改為了box-sizing：border-box，那padding和border就不會撐大盒子了（前提padding和border不會超過width寬度）
css濾鏡filter
filter屬性
filter：blur();模糊程度
width：calc(100%-80px);設定子盒子與父盒子關係。（括號裡可以用加減乘除）
學習第五天
清楚測試用例是什麼 測試用例的重要性 有效性 測試用例是測試人員測試過程中的重要參考依據，準確的測試用例的計畫 執行和跟蹤是 測試的有效性的有力證明 可復用性 設計良好的測試用例可以重複執行，能節約時間，提高測試效率 易組織性 清晰詳細的測試用例能夠便於測試執行的開展 可評估性 測試用例的通過率是檢...
php培訓學習記錄 第五天
1 字型屬性 font 六個 style variant weight size line height family 2 邊框 border 三個屬性 width style color 3 背景 五個屬性 background 000 url position x position y no r...
學習C語言第五天記錄
由於前幾天電腦壞了，所以沒及時更新。今天我學習函式的一部分知識。首先是庫函式的定義以及用法，庫函式直接拿來用就行，其次就是自定義函式，就是自己寫的函式用來完成一部分功能，然後就是函式的呼叫有兩種，一是傳參呼叫，二是傳址呼叫，最後，明白了實參與形參。具體 如下 include int add int ...