背景
calc的使用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:背景顏色 背景位址 背景平鋪 背景滾動 背景位置
span標籤裡文字換行,但數字字母不自動換行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() 選擇器包裹的父級盒子邊緣多出一部分(或者說本身自帶空隙怎麼解決)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...