1.css選擇器提取a標簽中的href

　　CSS 當中可以通過 attr() 來獲取，比如顯示所有鏈接的 href：

```css

a:after {

  content: " (" attr(href) ")";

}

``` 

#

　　2.padding-top: 50%的效果，margin-top: 50%的效果

　　- padding-top:50%;的效果是 基于父元素寬度的一半

　　- margin-top:50%;的效果:在沒有出現(xiàn)垂直外邊距重合與溢出的情況下分為兩種情況:

　　- 情況一: 當是兩個并列元素中添加margin-top:50%;是距離是瀏覽器寬度的一半

　　- 情況二:當是嵌套元素中子元素添加了margin-top:50%; 是子元素距離父元素高度的一半

　　3.table了解多少？

　　在網(wǎng)頁發(fā)展的初期，會用表格來實現(xiàn)網(wǎng)頁布局，但這種布局方式會讓網(wǎng)頁出現(xiàn)很多問題，逐漸不再用于網(wǎng)頁布局結(jié)構(gòu)中，現(xiàn)在表格標簽一般用于數(shù)據(jù)展示。而且在公司項目開發(fā)中，很多都不是直接使用table，而是使用ui組件庫中封裝了的表格，比如el-table。table表格中常用的標簽有tr/td/th/caption等等。table布局作為基礎的內(nèi)容就類似于生活整的基礎設施一樣雖然使用頻率低，但是不會被淘汰

　　4.彈性盒有哪些屬性是在父元素身上？那些在子元素身上？你知道flex-grow嗎？

　　- 添加在父級元素上的屬性：

　　- 1.flex-direction 設置彈性盒的主軸方向

　　- 2.justify-content 設置主軸上的對齊方式

　　- 3.align-items:設置側(cè)軸上的對齊方式

　　- 4.flex-wrap:設置彈性盒中默認換行

　　- 5.justify-content:換行之間行與行之間的間距設置

　　- 添加在子級元素上的屬性

　　- 1.align-self：設置單個元素在側(cè)軸上的對齊方式

　　- 2.order:設置元素的排序優(yōu)先級

　　- 3.flex:1 占據(jù)主軸上剩下空間

　　5.精靈圖和base64如何選擇？

　　精靈圖，是網(wǎng)頁處圖圖片的一種方式，它是把多張小圖整合到一張，利用background-position屬性定位某個圖片的位置，來達到在大圖片中引用某個小圖片的效果，當頁面訪問時，可以減少向服務器的yg有求次數(shù)，提高頁面的加載速度。

　　base64，是網(wǎng)絡上最常見的用于傳輸8Bit字節(jié)代碼的編碼方式之一，將原本二進制形式轉(zhuǎn)成以64個字符基本單位，所組成的一串字符串。base64的圖片會隨著html或者css一起下載到瀏覽器,減少了請求，避免跨域問題，但是低版本的IE瀏覽器不兼容，體積比原來的圖片大，不利于css的加載，所以如果是圖比較大，就用精靈圖合并為一張大圖，使用base64直接把圖片編碼成字符串寫入CSS文件

　　更多關(guān)于前端培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。