1.css選擇器提取a標(biāo)簽中的href

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

```css

a:after {

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

}

``` 

#

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

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

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

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

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

　　3.table了解多少？

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

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

　　- 添加在父級(jí)元素上的屬性：

　　- 1.flex-direction 設(shè)置彈性盒的主軸方向

　　- 2.justify-content 設(shè)置主軸上的對(duì)齊方式

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

　　- 4.flex-wrap:設(shè)置彈性盒中默認(rèn)換行

　　- 5.justify-content:換行之間行與行之間的間距設(shè)置

　　- 添加在子級(jí)元素上的屬性

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

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

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

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

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

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

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