2017.9.9v-for和v-if、v-if-else、v-else、省略號(hào)、實(shí)現(xiàn)三角形的關(guān)鍵代碼

閉包

個(gè)人理解的閉包就是:能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)

*

getElementsByTagName("*")
*表示匹配該頁面所有的標(biāo)簽、該js語句的意思就是獲取頁面中所有的DOM元素

v-for和v-if、v-if-else、v-else

問題:一個(gè)數(shù)組中每一項(xiàng)的內(nèi)容不一樣,這個(gè)時(shí)候不能使用v-for渲染,那應(yīng)該怎么做呢?

解決方法:v-for中使用v-if和v-else判斷即可

省略號(hào)

單行省略號(hào)

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

這個(gè)是處理多行的時(shí)候用的

display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;     

實(shí)現(xiàn)三角形的關(guān)鍵代碼

      border-top: 4px solid;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;  

還有的話,就是設(shè)置寬高都為0

漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

漸進(jìn)增強(qiáng):針對(duì)低版本的瀏覽器進(jìn)行構(gòu)造頁面,保證了基本的功能的實(shí)現(xiàn),再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能以達(dá)到更好的效果

優(yōu)雅降級(jí):一開始就構(gòu)造完整的功能,然后再針對(duì)低版本的瀏覽器進(jìn)行兼容

行內(nèi)元素和塊級(jí)元素

行內(nèi)元素的margin和padding屬性,水平方向的padding-left,padding-right,margin-left,margin-right都產(chǎn)生邊距效果,但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom卻不 會(huì)產(chǎn)生邊距效果.

vertical-align

豎直居中的屬性 vertical-align,但這個(gè)樣式只有在父元素為 td 或 th 時(shí),才會(huì)生效
所以要設(shè)置display:table-cell;

居中方法

.item{
        position: absolute;
        margin:auto;
        left:0;
        top:0;
        right:0;
        bottom:0;
    }

各個(gè)瀏覽器前綴

各個(gè)瀏覽器前綴:

 -webkit:chrome和safari
-moz:firefox
-ms:IE
-o:opera

瀏覽器的內(nèi)核

分別為:

IE:trident
Firefox:gecko內(nèi)核
Opera:Blink內(nèi)核(基于webkit)
chrome:Blink

css優(yōu)先級(jí)

css優(yōu)先級(jí)

注意的一點(diǎn)就是類選擇器=偽類

rem布局

另外

百分比

margin-top、padding-top,設(shè)置為百分比的時(shí)候,相對(duì)的是最近的父級(jí)塊級(jí)元素的width

web Worker、web Socket、Web Storage

web Worker、web Socket、Web Storage

mui關(guān)于上啦刷新的實(shí)現(xiàn)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,162評(píng)論 1 92
  • 請(qǐng)參看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,771評(píng)論 2 19
  • 前端開發(fā)面試知識(shí)點(diǎn)大綱: HTML&CSS: 對(duì)Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功:...
    秀才JaneBook閱讀 2,781評(píng)論 0 25
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測(cè)試過?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,376評(píng)論 0 8
  • 寶寶成長點(diǎn)滴0007(20170119周四) 媽媽從廚房出來,手里拿著一個(gè)桔子,身后有個(gè)小尾巴兒——寶寶跟在后面,...
    張記賓閱讀 121評(píng)論 0 0

友情鏈接更多精彩內(nèi)容