那個(gè)rem怎么做適配,em是根據(jù)什么來(lái)決定的?
· rem是root 和 em的結(jié)合,root是指根元素HTML,em是指父元素字號(hào)的倍數(shù),所以rem就是指根元素字號(hào)的倍數(shù),如果我們把頁(yè)面中的元素單位都轉(zhuǎn)換成rem,那么他們的大小就會(huì)隨著根子號(hào)變化而變化,如果根子號(hào)的大小可以隨著視口大小變化而變化,那么我們頁(yè)面中的元素尺寸就可以實(shí)現(xiàn)適配效果了,如果想實(shí)現(xiàn)根字號(hào)隨著視口變化,那就需要用到一個(gè)單位vw,vw是視口寬的1%,根據(jù)當(dāng)前設(shè)計(jì)稿可以換算出1vw是多少個(gè)px,然后再利用他們之間的比例關(guān)系,把根字號(hào)的px單位轉(zhuǎn)換成vw,那么根字號(hào)就可以隨著視口變化而變化了,頁(yè)面中的元素也就會(huì)隨著視口變化而變化了。
· em這個(gè)單位具體要看你用在什么屬性上,如果是用在字號(hào)上面,那么他參照的就是父元素字號(hào)的倍數(shù),如果用在其他屬性上,比如width,height,text-indent那么它參照的就是當(dāng)前元素字號(hào)的倍數(shù)
table了解多少
在網(wǎng)頁(yè)發(fā)展的初期,會(huì)用表格來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)布局,但這種布局方式會(huì)讓網(wǎng)頁(yè)出現(xiàn)很多問(wèn)題,逐漸不再用于網(wǎng)頁(yè)布局結(jié)構(gòu)中,現(xiàn)在表格標(biāo)簽一般用于數(shù)據(jù)展示。而且在公司項(xiàng)目開(kāi)發(fā)中,很多都不是直接使用table,而是使用ui組件庫(kù)中封裝了的表格,比如el-table。table表格中常用的標(biāo)簽有tr/td/th/caption等等。table布局作為基礎(chǔ)的內(nèi)容就類似于生活整的基礎(chǔ)設(shè)施一樣雖然使用頻率低,但是不會(huì)被淘汰
彈性盒有哪些屬性是在父元素身上?那些在子元素身上?你知道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ù)主軸上剩下空間
更多關(guān)于“web前端培訓(xùn)”的問(wèn)題,歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué),課程大綱緊跟企業(yè)需求,更科學(xué)更嚴(yán)謹(jǐn),每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升,都可以找到適合的班型,千鋒教育隨時(shí)歡迎你來(lái)試聽(tīng)。