整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
接上文
上面我們做到了這一步
將標(biāo)題居中
需要新學(xué)一個屬性：
align 屬性規(guī)定內(nèi)容的水平對齊方式。
align 屬性有3個值：
當(dāng) align="center" 的時候，就是居中對齊內(nèi)容；當(dāng) align="left" 的時候，就是左對齊內(nèi)容；當(dāng) align="right" 的時候，就是右對齊內(nèi)容。
在 <h1>、<p> 標(biāo)簽中添加 align 屬性，如下：
<h1 align="center">俄媒盤點(diǎn)三大性價較高的度假勝地</h2>
<p align="center"><font size="2" color="#545454">2020-08-20 00:02:38 來源：環(huán)球時報</font></p>標(biāo)題居中對齊了
總結(jié)：align的值：center：居中；left：左對齊；right：右對齊。
在標(biāo)題下面有一條橫線，我們可以用 <hr/> 這個單標(biāo)簽實(shí)現(xiàn)：
<hr> 標(biāo)簽用于在 HTML 頁面中創(chuàng)建一條水平線。
再加入 <hr/> 后可以看到，只需要一個 <hr/> 即可在瀏覽器中顯示一條水平線，這就是單標(biāo)簽和雙標(biāo)簽區(qū)別，它只需要一個。不僅如此，我們還可以定義這條橫線的長短、粗細(xì)、顏色。
可以試試看在 <hr/> 里面加入以下內(nèi)容：
<hr size="2" width=200px color="red"/>中間紅色的線就是加屬性后的<hr/>
size：規(guī)定 hr 元素的厚度；width：規(guī)定 hr 元素的寬度（px是像素的意思，例如100px是100像素）； color：規(guī)定 hr 元素呈現(xiàn)的顏色。
最后一步，把文字寫進(jìn)<p>標(biāo)簽里面
<p>世界上有許多美麗的國家，去那里旅游無需辦理繁瑣的證件手續(xù)，而且還可以欣賞到不一樣的風(fēng)景。 俄羅斯“健康生活網(wǎng)”與旅游門戶網(wǎng)站“摩登門”為大家推薦一些經(jīng)濟(jì)實(shí)惠、性價比比較高的旅游國度，讓大家好好暢游一番。
</p>
<p>1.亞美尼亞</p>
<p>2.黑山共和國</p>
<p>3.摩洛哥</p>細(xì)心的你可能會發(fā)現(xiàn)，為什么成品圖3個國家名字的行高間隔很小，而上面的行高卻間隔很大
這時我們需要認(rèn)識一個新標(biāo)簽<br/>
<br/> 可以插入一個換行符，它與<p>標(biāo)簽區(qū)別是：<p>標(biāo)簽在換行時，還會在相鄰的段落之間插入一些垂直的行間距(行高)。這個標(biāo)簽和上面的<hr/>同樣屬于單標(biāo)簽。
所以我們稍微修改一下，并加入顏色：
<p><font color="#f00">1.亞美尼亞<br/>2.黑山共和國<br/>3.摩洛哥</font></p>完全一樣了
以下是完整html代碼：
你學(xué)到了<h1> - <h6>標(biāo)簽、<font>標(biāo)簽、<!--注釋-->、align 屬性、<hr/>標(biāo)簽、<br/>標(biāo)簽。
你已經(jīng)能自己做出一個簡單的網(wǎng)頁了。
一篇文章用VBA下載一部完整小說，VBA除了可以輕松下載一部《水滸傳》小說，還有什么用途？VBA獲取網(wǎng)頁信息（即爬蟲技術(shù)）其用處可多了。今天介紹各位小伙用來監(jiān)控的自選股票的主力資金變動的情況，愿大伙在2022年股票市場長紅！也是把上期一個網(wǎng)友評論的內(nèi)容（有些數(shù)據(jù)藏得很深，怎么找真正的地址……）回應(yīng)一下。
東富的主力資金流入圖
有一個理論我們會經(jīng)常聽到，A股的票漲漲跌跌主要是因?yàn)橛写筚Y金在活動、在操作，一些股票不斷上漲是因?yàn)橛兄髁Y金不斷買入，反而不斷下跌是因?yàn)橹髁Y金不斷流出。喜歡做短線的，我們實(shí)時觀察這些主力資金就變得很有意義，很多網(wǎng)站都有主力資金的數(shù)據(jù)，但是要對多支股票進(jìn)行觀察，則需要一個個打開網(wǎng)頁、APP或者電腦程序查看數(shù)據(jù)，這樣耗時也不能多支股票同框?qū)Ρ?。還有一些小伙正上班，打開股票軟件給老板或同事看到，總覺得怪怪的，當(dāng)然這不是鼓勵一些小伙上班玩股票，純屬用項(xiàng)目和大家一起交流學(xué)習(xí)。
用VBA就可以很輕松解決上述兩個問題。大伙先看看效果吧！
點(diǎn)擊按鈕更新數(shù)據(jù)：2022年12月21日數(shù)據(jù)
完整代碼如下：
Sub maincapital()
Application.DisplayAlerts = False
'循環(huán)A列數(shù)據(jù)，解析出相應(yīng)股票代碼
For Each cl In Range("a2:a" & Range("a2").End(xlDown).Row)
stock_code = Right(cl, 6) '取右邊6位字符
Dim strText, stcok_code As String
'拼接構(gòu)造網(wǎng)址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=1." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
.Open "GET", URL, False
.send
strText = .responseText
End With
'判斷是有null，解決深A(yù)股和上A股網(wǎng)址不同拼接問題，secids=0.是深A(yù)；secids=1.是上A。
Dim regStrTest As Object
With CreateObject("VBScript.Regexp")
.Pattern = "null"
Set regStrTest = .Execute(strText)
End With
If regStrTest.Count > 0 Then
'如果出現(xiàn)null則拼接構(gòu)造一個新網(wǎng)址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=0." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
.Open "GET", URL, False
.send
strText = .responseText
End With
End If
Rnum = cl.Row '股票名稱所在行號
'利用正則表達(dá)式得到我們想要的內(nèi)容，并寫相應(yīng)的表格
With CreateObject("VBScript.Regexp")
.Pattern = """f62"":(.*?),"
Cells(Rnum, 2) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '主力凈流進(jìn)
.Pattern = """f184"":(.*?),"
Cells(Rnum, 3) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '主力凈比
.Pattern = """f66"":(.*?),"
Cells(Rnum, 4) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '超大單凈流進(jìn)
.Pattern = """f69"":(.*?),"
Cells(Rnum, 5) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '超大單凈比
.Pattern = """f72"":(.*?),"
Cells(Rnum, 6) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '大單凈流進(jìn)
.Pattern = """f75"":(.*?),"
Cells(Rnum, 7) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '大單凈比
.Pattern = """f78"":(.*?),"
Cells(Rnum, 8) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '中單凈流進(jìn)
.Pattern = """f81"":(.*?),"
Cells(Rnum, 9) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '中單凈比
.Pattern = """f84"":(.*?),"
Cells(Rnum, 10) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '小單凈流進(jìn)
.Pattern = """f87"":(.*?),"
Cells(Rnum, 11) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '小單凈比
.Pattern = """f64"":(.*?),"
Cells(Rnum, 12) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '超大單流入
.Pattern = """f65"":(.*?),"
Cells(Rnum, 13) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '超大流出
.Pattern = """f70"":(.*?),"
Cells(Rnum, 14) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '大單流入
.Pattern = """f71"":(.*?),"
Cells(Rnum, 14) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '大單流出
End With
Next
Application.DisplayAlerts = True
End Sub這個項(xiàng)目用到的幾個重要知識：
獲取動態(tài)網(wǎng)頁加載數(shù)據(jù)的真正網(wǎng)址
我們在目標(biāo)網(wǎng)頁點(diǎn)擊右鍵，并點(diǎn)擊“查看網(wǎng)頁源代碼”后，當(dāng)使用cttl+f鍵查看我們想要獲取的信息進(jìn)行查看（這里我輸入主力凈比數(shù)據(jù)-42.76），發(fā)現(xiàn)并沒有相關(guān)的數(shù)據(jù)。
在源代碼網(wǎng)頁同時按cttl+f鍵查看
通過這個方法基本可以判斷目標(biāo)網(wǎng)頁的部分?jǐn)?shù)據(jù)是使用動態(tài)加載的方式。簡單的動態(tài)加載數(shù)據(jù)，可以通過以下兩步獲取真正的網(wǎng)址：
第一步：打開瀏覽器控制臺。演示使用的瀏覽器是chrome，按下F12鍵打開瀏覽器控制臺，再次刷新網(wǎng)頁，在控制臺找到并點(diǎn)擊擴(kuò)大鏡小按鈕，打開search對話框，這里輸入想找的數(shù)據(jù)（這里我輸入主力凈比數(shù)據(jù)42.76）后，按下回車鍵或輸入框旁邊的刷新按鍵，就會彈出一個“get”字符及一些類似網(wǎng)址的內(nèi)容，點(diǎn)擊彈出的內(nèi)容，右下面對話框會彈出相應(yīng)的內(nèi)容（對話框的菜單有Headers,Preview,Response……）
圖中主力凈比數(shù)據(jù)為-42.73和在輸入框的數(shù)據(jù)不一致，是因?yàn)橘Y金數(shù)據(jù)動態(tài)變化了
第二步：找到加載數(shù)據(jù)的網(wǎng)址。點(diǎn)擊Headers可以看到Resquest URl字符，后面網(wǎng)址就是加載數(shù)據(jù)真正的網(wǎng)址，復(fù)制網(wǎng)址在瀏覽器打開，我們可以看到相應(yīng)的數(shù)據(jù)內(nèi)容。獲得這網(wǎng)址后，就可以通過VBA訪問這個網(wǎng)址獲取相應(yīng)的數(shù)據(jù)，按下來的工作就好辦了。
目標(biāo)數(shù)據(jù)的網(wǎng)址
使用CreateObject("MSXML2.XMLHTTP")對象獲取網(wǎng)頁信息
stock_code = Right(cl, 6) '取右邊6位字符
Dim strText, stcok_code As String '
'拼接構(gòu)造網(wǎng)址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=1." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
.Open "GET", URL, False
.send
strText = .responseText
End With
'判斷是有null，解決深A(yù)股和上A股網(wǎng)址不同拼接問題，secids=0.是深A(yù)；secids=1.是上A。
Dim regStrTest As Object
With CreateObject("VBScript.Regexp")
.Pattern = "null"
Set regStrTest = .Execute(strText)
End With
If regStrTest.Count > 0 Then
'如果出現(xiàn)null則拼接構(gòu)造一個新網(wǎng)址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=0." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
.Open "GET", URL, False
.send
strText = .responseText
End With
End If上面代碼的說明：
1、使用right(目標(biāo)字符串，字符個數(shù))函數(shù)獲取目標(biāo)字符串從右邊數(shù)起第幾個字符。
2、做兩次網(wǎng)址請求是因?yàn)樯預(yù)股和上A股的數(shù)據(jù)網(wǎng)址是有區(qū)別，網(wǎng)址的參數(shù)“secids=0.+ 股票代碼”是深A(yù)；“secids=1.+股票代碼”是上A。如果人為對每支股票判斷是上A還深A(yù)會很復(fù)雜，所以使用正則表達(dá)式，對請求數(shù)據(jù)內(nèi)容出現(xiàn)“null”字樣的網(wǎng)址，則更換網(wǎng)址參數(shù)。如下圖：
上A網(wǎng)址請求結(jié)果
深A(yù)網(wǎng)址請求結(jié)果
使用CreateObject("VBScript.Regexp")正則表達(dá)式對象獲取數(shù)據(jù)
For Each cl In Range("a2:a" & Range("a2").End(xlDown).Row)
……
Rnum = cl.Row '股票名稱所在行號
'利用正則表達(dá)式得到我們想要的內(nèi)容，并寫相應(yīng)的表格
With CreateObject("VBScript.Regexp")
.Pattern = """f62"":(.*?)," 'VBA的英文的雙引號
Cells(Rnum, 2) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '主力凈流入
.Pattern = """f184"":(.*?),"
Cells(Rnum, 3) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '主力凈比
.Pattern = """f66"":(.*?),"
……上面代碼的說明：
1、Range("a2").End(xlDown)是表示定位從A2單元往下最后一個不空值的單元格。
2、cl.Row是表示單元格的行數(shù)，Range("A1").Row，Cells(1, 1).Row都可以獲取單元格行數(shù)，列值則是Range("A1").Column和Cells(1, 1).Column。
3、.Pattern = """f62"":(.*?)," 是正則表達(dá)式（網(wǎng)頁的內(nèi)容是："f62":-15043563520.0），VBA的英文的雙引號用正則表式表示則是兩個雙引號，即是""。"f62":后面數(shù)據(jù)就是主力凈流入的數(shù)據(jù)，用(.*?)表示。再用.submatches.Item(0)得到目標(biāo)數(shù)據(jù)，這個數(shù)據(jù)是以元為單位，網(wǎng)頁顯示的是億，所以要/100000000。
4、Round（目標(biāo)數(shù)據(jù),小數(shù)點(diǎn)位數(shù)）是取多少位小數(shù)的方法。
點(diǎn)擊按鈕調(diào)用函數(shù)
Private Sub CommandButton1_Click()
Call maincapital '調(diào)用函數(shù)
End Sub在這總結(jié)一下VBA抓取數(shù)據(jù)主要步驟：
分析網(wǎng)站->>分析網(wǎng)頁數(shù)據(jù)->>處理網(wǎng)頁數(shù)據(jù)->>儲存網(wǎng)頁數(shù)據(jù)
歡迎大家評論及提意見，相互學(xué)習(xí)，提高效率，創(chuàng)造價值。
1.CSS選擇器的優(yōu)先級
選擇器 | 格式 | 權(quán)重 |
!important | 覆蓋頁面內(nèi)任何位置定義的元素樣式 | |
內(nèi)聯(lián)樣式 | style="color:red;" | 1000 |
id選擇器 | #id | 0100 |
類選擇器 | .className | 0010 |
屬性選擇器 | a[ref=“url”] | 0010 |
偽類選擇器 | p:last-child | 0010 |
偽元素選擇器 | p:after | 0001 |
標(biāo)簽選擇器 | div | 0001 |
相鄰兄弟選擇器 | h1+p | 0 |
子選擇器 | ul > li | 0 |
后代選擇器 | li a | 0 |
通配符選擇器 | * | 0 |
標(biāo)簽選擇器、偽元素選擇器：1
類選擇器、偽類選擇器、屬性選擇器：10
id 選擇器：100
內(nèi)聯(lián)樣式：1000
!important聲明的樣式的優(yōu)先級最高；
注意事項(xiàng)：
如果優(yōu)先級相同，則最后出現(xiàn)的樣式生效；
繼承得到的樣式的優(yōu)先級最低；
通用選擇器（*）、子選擇器（>）和相鄰?fù)x擇器（+）并不在這四個等級中，所以它們的權(quán)值都為 0
樣式表的來源不同時，優(yōu)先級順序?yàn)椋簝?nèi)聯(lián)樣式 > 內(nèi)部樣式 > 外部樣式 > 瀏覽器用戶自定義樣式 > 瀏覽器默認(rèn)樣式。
一般來說選擇器越具體，優(yōu)先級越高
2.display的屬性值及其作用
屬性值 | 作用 |
none | 元素不顯示，并且會從文檔流中移除 |
block | 塊類型，默認(rèn)寬度為父元素寬度，可設(shè)置寬高，換行顯示 |
inline | 行內(nèi)元素類型，默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示 |
inline-block | 默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示 |
list-item | 像塊類型元素一樣顯示，并添加樣式列表標(biāo)記 |
table | 此元素會作為塊級表格來顯示 |
inherit | 規(guī)定應(yīng)該從父元素繼承display屬性的值 |
3.display的block、inline和inline-block的區(qū)別
（1）block： 會獨(dú)占一行，多個元素會另起一行，可以設(shè)置width、height、margin和padding屬性；
（2）inline： 元素不會獨(dú)占一行，設(shè)置width、height屬性無效。但可以設(shè)置水平方向的margin和padding屬性，不能設(shè)置垂直方向的padding和margin；
（3）inline-block： 將對象設(shè)置為inline對象，但對象的內(nèi)容作為block對象呈現(xiàn)，之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。
對于行內(nèi)元素和塊級元素，其特點(diǎn)如下：
（1）行內(nèi)元素
（2）塊級元素
4.隱藏元素的方法有哪些
display: none：渲染樹不會包含該渲染對象，因此該元素不會在頁面中占據(jù)位置，也不會響應(yīng)綁定的監(jiān)聽事件。
visibility: hidden：元素在頁面中仍占據(jù)空間，但是不會響應(yīng)綁定的監(jiān)聽事件。
opacity: 0：將元素的透明度設(shè)置為 0，以此來實(shí)現(xiàn)元素的隱藏。元素在頁面中仍然占據(jù)空間，并且能夠響應(yīng)元素綁定的監(jiān)聽事件。
z-index: 負(fù)值：來使其他元素遮蓋住該元素，以此來實(shí)現(xiàn)隱藏。
clip/clip-path ：使用元素裁剪的方法來實(shí)現(xiàn)元素的隱藏，這種方法下，元素仍在頁面中占據(jù)位置，但是不會響應(yīng)綁定的監(jiān)聽事件。
transform: scale(0,0)：將元素縮放為 0，來實(shí)現(xiàn)元素的隱藏。這種方法下，元素仍在頁面中占據(jù)位置，但是不會響應(yīng)綁定的監(jiān)聽事件
5.transition和animation的區(qū)別
transition是過度屬性，強(qiáng)調(diào)過度，它的實(shí)現(xiàn)需要觸發(fā)一個事件（比如鼠標(biāo)移動上去，焦點(diǎn)，點(diǎn)擊等）才執(zhí)行動畫。它類似于flash的補(bǔ)間動畫，設(shè)置一個開始關(guān)鍵幀，一個結(jié)束關(guān)鍵幀。
animation是動畫屬性，它的實(shí)現(xiàn)不需要觸發(fā)事件，設(shè)定好時間之后可以自己執(zhí)行，且可以循環(huán)一個動畫。它也類似于flash的補(bǔ)間動畫，但是它可以設(shè)置多個關(guān)鍵幀（用@keyframe定義）完成動畫
6.偽元素和偽類的區(qū)別和作用
偽元素：在內(nèi)容元素的前后插入額外的元素或樣式，但是這些元素實(shí)際上并不在文檔中生成。它們只在外部顯示可見，但不會在文檔的源代碼中找到它們，因此，稱為“偽”元素
div:before {content:"第一章：";}
div:after {content:"Hot!";}偽類：將特殊的效果添加到特定選擇器上,它是已有元素上添加類別的，不會產(chǎn)生新的元素
a:hover {color: #FF00FF}
p:first-child {color: red}偽類是通過在元素選擇器上加?偽類改變元素狀態(tài)，?偽元素通過對元素的操作進(jìn)?對元素的改變。
7.CSS3中有哪些常用新特性
新增各種CSS選擇器 （: not(.a)：所有 class 不是“a”的節(jié)點(diǎn)）
圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影 （Shadow）
文字特效 （text-shadow）
文字渲染 （Text-decoration）
線性漸變 （gradient）
旋轉(zhuǎn) （transform）
8.對line-height 的理解及其賦值方式
概念：
line-height 指一行文本的高度，包含了字間距，實(shí)際上是下一行基線到上一行基線距離；
如果一個標(biāo)簽沒有定義 height 屬性，那么其最終表現(xiàn)的高度由 line-height 決定；
一個容器沒有設(shè)置高度，那么撐開容器高度的是 line-height，而不是容器內(nèi)的文本內(nèi)容；把 line-height 值設(shè)置為 height 一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中；
line-height 和 height 都能撐開一個高度；
賦值方式：
帶單位：px 是固定值，而 em 會參考父元素 font-size 值計算自身的行高
純數(shù)字：此數(shù)字會與當(dāng)前的字體大小(font-size)相乘來設(shè)置行間,相當(dāng)于倍數(shù)
百分比：與元素自身的字體大小(font-size)有關(guān)，計算值是給定的百分比值乘以元素計算出的字體大小
注意：
body {
line-height: 200%;
font-size: 30px;
}
p {
font-size: 16px;
}這時候p標(biāo)簽的line-height為60px，因?yàn)閎ody的line-height=200% * 30px = 60px。再p標(biāo)簽直接繼承body的line-height，而不是16*200%的32px
9.CSS 優(yōu)化和提高性能的方法有哪些
加載性能：
（1）css壓縮：將寫好的css進(jìn)行打包壓縮，可以減小文件體積
（2）減少使用@import，建議使用link，因?yàn)楹笳咴陧撁婕虞d時一起加載，前者是等待頁面加載完成之后再進(jìn)行加載。
選擇器性能：
（1）關(guān)鍵選擇器（key selector）。選擇器的最后面的部分為關(guān)鍵選擇器（即用來匹配目標(biāo)元素的部分）。CSS選擇符是從右到左進(jìn)行匹配的。當(dāng)使用后代選擇器的時候，瀏覽器會遍歷所有子元素來確定是否是指定的元素等等；
（2）如果規(guī)則擁有ID選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標(biāo)簽。過濾掉無關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會浪費(fèi)時間去匹配它們了）。
（3）避免使用通配規(guī)則，如*{}計算次數(shù)驚人，只對需要用到的元素進(jìn)行選擇。
（4）盡量少的去對標(biāo)簽進(jìn)行選擇，用class作為選擇器。
（5）盡量少的去使用后代選擇器，降低選擇器的權(quán)重值。后代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關(guān)聯(lián)每一個標(biāo)簽元素。
（6）了解哪些屬性是可以通過繼承而來的，然后避免對這些屬性重復(fù)指定規(guī)則。
渲染性能：
（1）慎重使用高性能屬性：浮動、定位。
（2）盡量減少頁面重排、重繪。
（3）去除空規(guī)則：｛｝。空規(guī)則的產(chǎn)生原因一般來說是為了預(yù)留樣式。去除這些空規(guī)則無疑能減少css文檔體積。
（4）屬性值為0時，不加單位。
（5）屬性值為浮動小數(shù)0.**，可以省略小數(shù)點(diǎn)之前的0。
（6）標(biāo)準(zhǔn)化各種瀏覽器前綴：帶瀏覽器前綴的在前。標(biāo)準(zhǔn)屬性在后。
（7）不使用@import前綴，它會影響css的加載速度。
（8）選擇器優(yōu)化嵌套，盡量避免層級過深。
（9）css雪碧圖，同一頁面相近部分的小圖標(biāo)，方便使用，減少頁面的請求次數(shù)，但是同時圖片本身會變大，使用時，優(yōu)劣考慮清楚，再使用。
（10）正確使用display的屬性，由于display的作用，某些樣式組合會無效，徒增樣式體積的同時也影響解析性能。
（11）不濫用web字體。對于中文網(wǎng)站來說WebFonts可能很陌生，國外卻很流行。web fonts通常體積龐大，而且一些瀏覽器在下載web fonts時會阻塞頁面渲染損傷性能。
可維護(hù)性、健壯性：
（1）將具有相同屬性的樣式抽離出來，整合并通過class在頁面中進(jìn)行使用，提高css的可維護(hù)性。
（2）樣式與內(nèi)容分離：將css代碼定義到外部css中。
10.CSS預(yù)處理器/后處理器是什么？為什么要使用它們
預(yù)處理器， 如：less，sass，用來預(yù)編譯sass或者less，增加了css代碼的復(fù)用性。層級，mixin， 變量，循環(huán)， 函數(shù)等對編寫以及開發(fā)UI組件都極為方便。
后處理器， 如： postCss，通常是在完成的樣式表中根據(jù)css規(guī)范處理css，讓其更加有效。目前最常做的是給css屬性添加瀏覽器私有前綴，實(shí)現(xiàn)跨瀏覽器兼容性的問題。
css預(yù)處理器為css增加一些編程特性，無需考慮瀏覽器的兼容問題，可以在CSS中使用變量，簡單的邏輯程序，函數(shù)等在編程語言中的一些基本的性能，可以讓css更加的簡潔，增加適應(yīng)性以及可讀性，可維護(hù)性等。
其它c(diǎn)ss預(yù)處理器語言：Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。
使用原因：
11.::before 和 :after 的雙冒號和單冒號有什么區(qū)別
冒號(:)用于CSS3偽類
雙冒號(::)用于CSS3偽元素。
::before就是以一個子元素的存在，定義在元素主體內(nèi)容之前的一個偽元素。并不存在于dom之中，只存在在頁面之中。
注意： :before 和 :after 這兩個偽元素，是在CSS2.1里新出現(xiàn)的。起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進(jìn)化，在CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號，成為::before、::after
12.單行、多行文本溢出隱藏
單行文本溢出
overflow: hidden; // 溢出隱藏
text-overflow: ellipsis; // 溢出用省略號顯示
white-space: nowrap; // 規(guī)定段落中的文本不進(jìn)行換行多行文本溢出
overflow: hidden; // 溢出隱藏
text-overflow: ellipsis; // 溢出用省略號顯示
display:-webkit-box; // 作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical; // 設(shè)置伸縮盒子的子元素排列方式：從上到下垂直排列
-webkit-line-clamp:3; // 顯示的行數(shù)注意：由于上面的三個屬性都是 CSS3 的屬性，沒有瀏覽器可以兼容，所以要在前面加一個-webkit- 來兼容一部分瀏覽器
12.對 CSS 工程化的理解
CSS 工程化是為了解決以下問題：
以下三個方向都是時下比較流行的、普適性非常好的 CSS 工程化實(shí)踐：
基于這三個方向，可以衍生出一些具有典型意義的子問題，這里我們逐個來看：
（1）預(yù)處理器：為什么要用預(yù)處理器？它的出現(xiàn)是為了解決什么問題？
預(yù)處理器，其實(shí)就是 CSS 世界的“輪子”。預(yù)處理器支持我們寫一種類似 CSS、但實(shí)際并不是 CSS 的語言，然后把它編譯成 CSS 代碼：
那為什么寫 CSS 代碼寫得好好的，偏偏要轉(zhuǎn)去寫“類 CSS”呢？這就和本來用 JS 也可以實(shí)現(xiàn)所有功能，但最后卻寫 React 的 jsx 或者 Vue 的模板語法一樣——為了爽！要想知道有了預(yù)處理器有多爽，首先要知道的是傳統(tǒng) CSS 有多不爽。隨著前端業(yè)務(wù)復(fù)雜度的提高，前端工程中對 CSS 提出了以下的訴求：
這三點(diǎn)是傳統(tǒng) CSS 所做不到的，也正是預(yù)處理器所解決掉的問題。預(yù)處理器普遍會具備這樣的特性：
（2）Webpack 能處理 CSS 嗎？如何實(shí)現(xiàn)？ Webpack 能處理 CSS 嗎：
如何用 Webpack 實(shí)現(xiàn)對 CSS 的處理：
在實(shí)際使用中，css-loader 的執(zhí)行順序一定要安排在 style-loader 的前面。因?yàn)橹挥型瓿闪司幾g過程，才可以對 css 代碼進(jìn)行插入；若提前插入了未編譯的代碼，那么 webpack 是無法理解這坨東西的，它會無情報錯。
13.如何判斷元素是否到達(dá)可視區(qū)域
window.innerHeight 是瀏覽器可視區(qū)的高度；
document.body.scrollTop || document.documentElement.scrollTop 是瀏覽器滾動的過的距離；
imgs.offsetTop 是元素頂部距離文檔頂部的高度（包括滾動條的距離）；
內(nèi)容達(dá)到顯示區(qū)域的：img.offsetTop < window.innerHeight + document.body.scrollTop;
14.z-index屬性在什么情況下會失效
通常 z-index 的使用是在有兩個重疊的標(biāo)簽，在一定的情況下控制其中一個在另一個的上方或者下方出現(xiàn)。z-index值越大就越是在上層。z-index元素的position屬性需要是relative，absolute或是fixed。
z-index屬性在下列情況下會失效：
15.px、em、rem的區(qū)別及使用場景
三者的區(qū)別：
px是固定的像素，一旦設(shè)置了就無法因?yàn)檫m應(yīng)頁面大小而改變。
em和rem相對于px更具有靈活性，他們是相對長度單位，其長度不是固定的，更適用于響應(yīng)式布局。
em是相對于其父元素來設(shè)置字體大小，這樣就會存在一個問題，進(jìn)行任何元素設(shè)置，都有可能需要知道他父元素的大小。而rem是相對于根元素，這樣就意味著，只需要在根元素確定一個參考值。
使用場景：
對于只需要適配少部分移動設(shè)備，且分辨率對頁面影響不大的，使用px即可 。
對于需要適配各種移動設(shè)備，使用rem，例如需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備。
16.對Flex布局的理解及其使用場景
Flex是FlexibleBox的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。行內(nèi)元素也可以使用Flex布局。注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項(xiàng)目（flex item），簡稱"項(xiàng)目"。容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis），項(xiàng)目默認(rèn)沿水平主軸排列。
以下6個屬性設(shè)置在容器上：
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。
flex-wrap屬性定義，如果一條軸線排不下，如何換行。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。
justify-content屬性定義了項(xiàng)目在主軸上的對齊方式。
align-items屬性定義項(xiàng)目在交叉軸上如何對齊。
align-content屬性定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。
以下6個屬性設(shè)置在項(xiàng)目上：
order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。
flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認(rèn)值為0 1 auto。
align-self屬性允許單個項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
簡單來說： flex布局是CSS3新增的一種布局方式，可以通過將一個元素的display屬性值設(shè)置為flex從而使它成為一個flex容器，它的所有子元素都會成為它的項(xiàng)目。一個容器默認(rèn)有兩條軸：一個是水平的主軸，一個是與主軸垂直的交叉軸。可以使用flex-direction來指定主軸的方向?？梢允褂胘ustify-content來指定元素在主軸上的排列方式，使用align-items來指定元素在交叉軸上的排列方式。還可以使用flex-wrap來規(guī)定當(dāng)一行排列不下時的換行方式。對于容器中的項(xiàng)目，可以使用order屬性來指定項(xiàng)目的排列順序，還可以使用flex-grow來指定當(dāng)排列空間有剩余的時候，項(xiàng)目的放大比例，還可以使用flex-shrink來指定當(dāng)排列空間不足時，項(xiàng)目的縮小比例
17.各種圖形的繪制
（1）三角1
div {
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}（2）三角2
div {
width: 0;
height: 0;
border-left: 50px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}（3）扇形
div{
border: 100px solid transparent;
width: 0;
heigt: 0;
border-radius: 100px;
border-top-color: red;
}18.設(shè)置小于12px的字體
在谷歌下css設(shè)置字體大小為12px及以下時，顯示都是一樣大小，都是默認(rèn)12px。
解決辦法：
使用Webkit的內(nèi)核的-webkit-text-size-adjust的私有CSS屬性來解決，只要加了-webkit-text-size-adjust:none;字體大小就不受限制了。
使用css3的transform縮放屬性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收縮的是整個元素的大小，這時候，如果是內(nèi)聯(lián)元素，必須要將內(nèi)聯(lián)元素轉(zhuǎn)換成塊元素，可以使用display：block/inline-block
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
