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%;的效果:在沒有出現垂直外邊距重合與溢出的情況下分為兩種情況:
- 情況一: 當是兩個并列元素中添加margin-top:50%;是距離是瀏覽器寬度的一半
- 情況二:當是嵌套元素中子元素添加了margin-top:50%; 是子元素距離父元素高度的一半
3.table了解多少?
在網頁發展的初期,會用表格來實現網頁布局,但這種布局方式會讓網頁出現很多問題,逐漸不再用于網頁布局結構中,現在表格標簽一般用于數據展示。而且在公司項目開發中,很多都不是直接使用table,而是使用ui組件庫中封裝了的表格,比如el-table。table表格中常用的標簽有tr/td/th/caption等等。table布局作為基礎的內容就類似于生活整的基礎設施一樣雖然使用頻率低,但是不會被淘汰
4.彈性盒有哪些屬性是在父元素身上?那些在子元素身上?你知道flex-grow嗎?
- 添加在父級元素上的屬性:
- 1.flex-direction 設置彈性盒的主軸方向
- 2.justify-content 設置主軸上的對齊方式
- 3.align-items:設置側軸上的對齊方式
- 4.flex-wrap:設置彈性盒中默認換行
- 5.justify-content:換行之間行與行之間的間距設置
- 添加在子級元素上的屬性
- 1.align-self:設置單個元素在側軸上的對齊方式
- 2.order:設置元素的排序優先級
- 3.flex:1 占據主軸上剩下空間
5.精靈圖和base64如何選擇?
精靈圖,是網頁處圖圖片的一種方式,它是把多張小圖整合到一張,利用background-position屬性定位某個圖片的位置,來達到在大圖片中引用某個小圖片的效果,當頁面訪問時,可以減少向服務器的yg有求次數,提高頁面的加載速度。
base64,是網絡上最常見的用于傳輸8Bit字節代碼的編碼方式之一,將原本二進制形式轉成以64個字符基本單位,所組成的一串字符串。base64的圖片會隨著html或者css一起下載到瀏覽器,減少了請求,避免跨域問題,但是低版本的IE瀏覽器不兼容,體積比原來的圖片大,不利于css的加載,所以如果是圖比較大,就用精靈圖合并為一張大圖,使用base64直接把圖片編碼成字符串寫入CSS文件
更多關于前端培訓的問題,歡迎咨詢千鋒教育在線名師,如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問,獲取試聽資格來試聽我們的課程,在線零距離接觸千鋒教育大咖名師,讓你輕松從入門到精通。