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