web前端開發(fā)中遇到的問題整理記錄——2020-03

目錄

  1. css 禁用a標簽
  2. angular2 [ngStyle] [ngClass]的用法
  3. node 版本更新
  4. css 超出隱藏
  5. css width和height 的計算
  6. css3自適應布局單位vw,vh
  7. angular 組織默認事件和冒泡
  8. angular innerHtml
  9. string startsWith() 方法
  10. css 透明度設置

內(nèi)容

1. css 禁用a標簽
<style>
        a.disabled {
            pointer-events: none;
            filter: alpha(opacity=50); /*IE濾鏡衩辟,透明度50%*/
            -moz-opacity: 0.5; /*Firefox私有,透明度50%*/
            opacity: 0.5; /*其他坟比,透明度50%*/
        }
</style>

2. angular2 [ngStyle] [ngClass]的用法
1. ngStyle
<div [ngStyle]="{'background-color':'green'}"></<div>

判斷添加

<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>
2.ngClass

第一個參數(shù)為類名稱恋拍,第二個參數(shù)為boolean值蠢挡,如果為true就添加第一個參數(shù)的類,
基本用法: ngClass]="{'text-success':true}"

判斷
[ngClass]="{'text-success':username == 'zxc'}"
[ngClass]="{'text-success':index == 0}"

3. node 版本更新問題

win系統(tǒng)下 node只能下載新版本覆蓋舊版本更新

4. css 超出隱藏

單行

overflow:hidden; //超出的文本隱藏
text-overflow:ellipsis; //溢出用省略號顯示
white-space:nowrap; //溢出不換行

多行

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical; //設置伸縮盒子的子元素排列方式--從上到下垂直排列
-webkit-line-clamp:2; //顯示的行
5. css width和height 的計算
width:calc(100% - 20px);
width:-webkit-calc(100% - 20px);//chrome
width:-moz-calc(100% - 20px);//firefox
height:calc(80% + 20px);
height:-webkit-calc(80% + 20px);//chrome
height:-moz-calc(80% + 20px);//firefox

特別注意:+或者-兩邊都要用空格隔開MァV们!

6. css3自適應布局單位vw,vh

在PC端咙咽,視口指的是在PC端老玛,指的是瀏覽器的可視區(qū)域;

而在移動端钧敞,它涉及3個視口:Layout Viewport(布局視口)蜡豹,Visual Viewport(視覺視口),Ideal Viewport(理想視口)犁享。

視口單位中的“視口”余素,PC端指的是瀏覽器的可視區(qū)域;移動端指的就是Viewport中的Layout Viewport炊昆。

根據(jù)CSS3規(guī)范,視口單位主要包括以下4個:

  1.vw:1vw等于視口寬度的1%威根。

  2.vh:1vh等于視口高度的1%凤巨。

  3.vmin:選取vw和vh中最小的那個。

  4.vmax:選取vw和vh中最大的那個洛搀。

vh and vw:相對于視口的高度和寬度敢茁,而不是父元素的(CSS百分比是相對于包含它的最近的父元素的高度和寬度)。1vh 等于1/100的視口高度留美,1vw 等于1/100的視口寬度彰檬。

比如:瀏覽器高度950px,寬度為1920px, 1 vh = 950px/100 = 9.5 px谎砾,1vw = 1920px/100 =19.2 px逢倍。

vmax相對于視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax景图。

vmin相對于視口的寬度或高度中較小的那個较雕。其中最小的那個被均分為100單位的vmin。

7. angular 組織默認事件和冒泡

ng-click="ratioTab(3,$event);

阻止冒泡 $event.stopPropagation()

阻止默認行為 $event.preventDefault()

8. angular innerHtml

在頁面展示后臺傳來的html片段時挚币,可以用innerHtml屬性

不過片段中的樣式css會被忽略亮蒋。

可以使用自定義管道實現(xiàn)對展示內(nèi)容的自定義樣式。

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from '@angular/platform-browser';
 
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) { }
 
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

  htmlStr = `
    <h1>innerHtml內(nèi)容</h1>
    <h2 style="color: #1b75bb;">樣式自定義</h2>
  `


<div [innerHtml]="htmlStr | safeHtml"></div>
9.string startsWith() 方法

查看字符串是否為 "xx" 開頭:

var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("Hello");  //true
10. css 透明度設置

設置透明度opacity妆毕,其子元素也會繼承
避免使用background:#000慎玖;opacity:0.5,建議使用background:rgba(0,0,0,0.5)

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末笛粘,一起剝皮案震驚了整個濱河市趁怔,隨后出現(xiàn)的幾起案子远舅,更是在濱河造成了極大的恐慌,老刑警劉巖痕钢,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件图柏,死亡現(xiàn)場離奇詭異,居然都是意外死亡任连,警方通過查閱死者的電腦和手機蚤吹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來随抠,“玉大人裁着,你說我怎么就攤上這事」八” “怎么了二驰?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長秉沼。 經(jīng)常有香客問我桶雀,道長,這世上最難降的妖魔是什么唬复? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任矗积,我火速辦了婚禮,結果婚禮上敞咧,老公的妹妹穿的比我還像新娘棘捣。我一直安慰自己,他們只是感情好休建,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布乍恐。 她就那樣靜靜地躺著,像睡著了一般测砂。 火紅的嫁衣襯著肌膚如雪茵烈。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天邑彪,我揣著相機與錄音瞧毙,去河邊找鬼。 笑死寄症,一個胖子當著我的面吹牛宙彪,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播有巧,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼释漆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了篮迎?” 一聲冷哼從身側(cè)響起男图,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤示姿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后逊笆,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體栈戳,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年难裆,在試婚紗的時候發(fā)現(xiàn)自己被綠了子檀。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡乃戈,死狀恐怖褂痰,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情症虑,我是刑警寧澤缩歪,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站谍憔,受9級特大地震影響匪蝙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜韵卤,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一骗污、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧沈条,春花似錦、人聲如沸诅炉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽涕烧。三九已至月而,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間议纯,已是汗流浹背父款。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留瞻凤,地道東北人憨攒。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像阀参,于是被迫代替她去往敵國和親肝集。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容