前端開發者們值得了解的 11 項前端技巧

所屬分類:建站知識發布日期:2020-10-22點擊率:119

1、datalist元素

這項 HTML 元素的使用頻率極低,今天我們就要為它正名!

< datalist>標簽用于為< input>元素提供一項“自動補全”功能。在鍵入過程中,您會看到如下圖所示的預定義下拉菜單及選項。

微信圖片_20201022183740.png

示例:

1603363121(1).jpg

<datalist>列出的屬性(參見上方粗體)必須等于<input>的 id,因為需要將二者捆綁使用。

2、帶有復選框的可點擊標簽

如果大家希望使用帶有復選框的可點擊標簽,最常見的作法可能是將 label 元素與“for”屬性結合使用,詳見以下代碼。

1603363214(1).jpg

實際上,您完全可以將 label 元素直接放在復選框旁邊以達成相同的效果。這樣,我們就能點擊“I agree”并輕松選中該復選框!


3、子選擇器 

這可能是本份清單中知名度最高的技巧了,但大多數朋友并沒有意識到它的強大力量。

子選擇器用于匹配某一指定元素的全部子元素。它能夠給出兩項元素之間的關系。


4、寫作模式

寫作模式是一項鮮為人知,但卻極為強大的 CSS 屬性。

您可以借此讓文本以垂直形式排列。


5、calc()函數

calc()CSS 函數允許您在指定 CSS 屬性值的前提下執行計算。

大家在 calc() 中用得最多的功能,應該就是混合單位了,例如將百分比與像素相混合。這項任務無法由預處理器完成,只能在渲染過程中執行。


                                                6、Math.round 與 Math.floor 備選項

 

                                                                7.Console.table

不少朋友可能已經聽說并使用過 console.log(),但對于 console.table() 恐怕還比較陌生。它的作用是接收一個數組或者一個對象,從而以非常整潔的方式在控制臺視圖內顯示一份表格!



?
河北快三的遗漏号码 新世界棋牌icon 内蒙古时时彩三星走势一Welcome 重庆幸运农场任选5计划 河南麻将1分2元微信群 北京11选5说明书 虚拟货币体系分析报告 澳洲幸运5走势图 建设银行理财产品 排球比分直播网址 彩乐乐11选5 比特币狗狗币交易平台 北京时时彩pc28走势图 一 Welcome 竞彩篮球大小分走势图 2021期货投资分析习题 欢乐斗地主怎么换房间 上海时时乐幵奖结果彩票控