背景
background: url('../../assets/image/video_img_1.png') no-repeat center ;
background-size: 100% auto; //寬度充滿，高度自適應
background: url('../../assets/image/video_img_1.png') no-repeat fixed top ; //背景固定在頂部
background-size:cover; //背景鋪滿
background:背景顏色 背景位址 背景平鋪 背景滾動 背景位置
height:calc(100% - 80px) //注意這裡的 - 兩側都必須有空格，否則無法識別。
height:calc(100vh - 80px)
注：calc也支援+-*/，只不過用的不多
span 不是塊狀元素。本身自帶有左浮動的效果，並且連續的英文本母跟數字是沒辦法自動換行的，必須要強制換行
span設定樣式word-break:break-all
若無效果，再 給定寬度 以及設定 white-space:normal
text-shadow: 2px 0 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff;
水平陰影 垂直陰影 模糊距離 顏色
letter-spacing: 2px; //每個字之間的橫向間距text-align:justify;text-indent:20px;nth-child(2)的意思是當前元素的父元素的第二個子元素
好 //i:nth-child(1)
好 //i:nth-child(2)
哈 //span:nth-child(3)
哈 //span:nth-child(4)
哈 //span:nth-child(5)
好 //i:nth-child(6)
哈 //span:nth-child(7)
原因：img是一種類似text的標籤元素，在結束的時候，會在末尾加上乙個空白符（匿名文字），這個文字外有乙個匿名行級盒子，它預設的vertical-align是baseline的，而且往往因為上文line-height的影響，使它有個line-height，從而使其有了高度，因為baseline對齊的原因，這個匿名盒子就會下沉，往下撐開一些距離，所以把父級盒子撐高了
解決：父級盒子 div 或 div
或者img標籤 img 或 img 或 img
下劃線
text-decoration:none
li的點list-style:none
關於flex:1和flex:auto的區別（ie8-不支援flex屬性）
flex:1，是每乙個flex區間都是固定的寬度（如上圖，不論字多字少，兩個丨之間寬度是一樣的），不會隨該區間內元素的改變而改變，只會根據區間的數量來適應
flex:auto，是每乙個區間的寬度都是自適應的，區間內元素寬一點，區間也會寬一點（如上圖，兩個丨之間寬度不一樣，但是字與字之間的寬度是一樣的）
具體見上圖理解
:hover的使用a:hover
a:hover span
li標籤橫向排列出現間隙間隙出現原因：標籤和標籤之間有換行空格引起；
解決：float:left
設定了display:inline-block的元素出現空白的問題
因為display:inline-block缺省會有空格或者換行符，和以上li標籤排列出現間隙的道理是一樣的
給父級元素加上font-size：0，消除空白即可解決
如圖出現空白：
如圖父級盒子新增font-size:0後，空白消失
CSS 知識彙總
1 inline block 元素 ie6 7下只有 inline 的元素有 inline block,比如 span元素，如果要使其它元素有 inline block，比如 div 有 inlne block，只要設定它為 inline,再給它乙個 zoom 1 使 它有 layout。2 mar...
前端小知識彙總
disabled 超文字傳輸協議 http 的設計目的是保證客戶機與伺服器之間的通訊。http 的工作方式是客戶機與伺服器之間的請求 應答協議。web 瀏覽器可能是客戶端，而計算機上的網路應用程式也可能作為伺服器端。head 與 get 相同，但只返回 http 報頭，不返回文件主體 put 上傳指...
小知識點彙總
1 為什麼乙個數的各位數之和可以被3整除時，這個數就可以被3整除 設乙個n位數number，從個位起每一位為a1 an 則number a1 a2 10 a3 10 2 an 10 n 1 1 先證必要性 如果number的各位數之和是3的倍數，則a1 a2 an 3k k為正整數 2 由 2 得a...