學(xué)Web前端要掌握什么技能常見(jiàn)CSS知識(shí)點(diǎn)有哪些

　學(xué)Web前端要掌握什么技能？常見(jiàn)CSS知識(shí)點(diǎn)有哪些？CSS是前端三要素之一，是Web前端工程師必須要掌握的知識(shí)點(diǎn)。為了快速、系統(tǒng)的掌握企業(yè)所需的Web前端技術(shù)，很多人選擇專(zhuān)業(yè)的學(xué)習(xí)，下面就給大家分享CSS常見(jiàn)知識(shí)點(diǎn)分享。

　　CSS：Cascading Style sheet層疊樣式表或級(jí)聯(lián)樣式表，是一種樣式設(shè)置規(guī)則，用于控制頁(yè)面的外觀的樣式。使用CSS能夠?qū)崿F(xiàn)內(nèi)容與樣式的分離、方便團(tuán)隊(duì)開(kāi)發(fā)，有助于樣式復(fù)用、便于網(wǎng)站后期維護(hù)，實(shí)現(xiàn)頁(yè)面的精準(zhǔn)控制、讓頁(yè)面更精美。

　　CSS代碼書(shū)寫(xiě)方式分為三種：嵌入式、外鏈?zhǔn)健⑿袃?nèi)式。

　　嵌入式：將CSS代碼嵌入到HTML文件中，嵌入式是通過(guò)HTML中的

　　外鏈?zhǔn)剑和怄準(zhǔn)绞侵竼为?dú)寫(xiě)一個(gè)以.css為擴(kuò)展名的文件，然后在標(biāo)簽中使用標(biāo)簽，將這個(gè)css文件鏈接到html文件中。(注意：css文件不能單獨(dú)的運(yùn)行，它必須要依賴(lài)于HTML文件)

　　語(yǔ)法規(guī)則：

　　< link rel="stylesheet" href="css文件的地址">

　　行內(nèi)式：將CSS代碼書(shū)寫(xiě)在HTML標(biāo)簽的style屬性中。style是一個(gè)通用屬性，每一個(gè)標(biāo)簽里面都擁有這個(gè)屬性!

　　語(yǔ)法格式：

　　<標(biāo)簽名 style=”屬性:值;屬性:值;”>

　　初學(xué)CSS，你需要掌握這些使用技巧：

　　1、負(fù)邊距的效果。注意左右負(fù)邊距表現(xiàn)并不一致，左為負(fù)時(shí)是左移，右為負(fù)時(shí)是左拉。

　　2、BFC應(yīng)用匯總：阻止外邊距合并(margin collapsing)、消除浮動(dòng)的影響。

　　3、flex布局：當(dāng)flex-grow之和小于1時(shí)，只能按比例分配部分剩余空間，而不是全部。

　　4、并不是給元素設(shè)置display:block就會(huì)自動(dòng)填充父元素寬度。input 就是個(gè)例外，其默認(rèn)寬度取決于size特性的值。

　　5、對(duì)定位和固定定位時(shí)，同時(shí)設(shè)置left和right等同于隱式地設(shè)置寬度。

　　6、position:sticky，粘性定位要起作用需要設(shè)置最后滯留位置。chrome有bug，firefox完美。

　　7、要使模態(tài)框背景透明，用rgba是一種簡(jiǎn)單方式。

　　8、display:table實(shí)現(xiàn)多列等高布局。css實(shí)現(xiàn)定寬高比的原理：padding的百分比是相對(duì)于其包含塊的寬度，而不是高度。

　　9、background-position百分比的正確理解方式：圖片自身的百分比位置與容器同樣的百分比位置重合。

　　10、background-repeat新屬性值：round和space。前者表示湊個(gè)整，后者表示留點(diǎn)縫。

　　11、background-attachment指定背景如何附著在容器上，注意其屬性值local和fixed的使用。

　　12、可以使用outline來(lái)描邊，不占地方，它甚至可以在里面。

　　13、瀏覽器默認(rèn)顯示tab為8個(gè)空格，tab-size可以指定空格長(zhǎng)度。

　　14、圖片在指定尺寸后，可以設(shè)置object-fit為contain或cover保持比例。

　　15、設(shè)置寬度為fill-available，可以使inline-block像block那樣填充整個(gè)空間。

在開(kāi)篇

開(kāi)篇之前，先提個(gè)問(wèn)題，什么是類(lèi)？分類(lèi)嗎？可以這么說(shuō)吧！我們可以給物體分類(lèi)，也可以給人分類(lèi)。正所謂，物以類(lèi)聚，人以群分。難道我們這里是給元素分類(lèi)？用分類(lèi)來(lái)理解是不準(zhǔn)確的啦！從某些角度，也可以理解成分類(lèi)，說(shuō)白了也就是個(gè)標(biāo)識(shí)而已。廢話(huà)不說(shuō)，我們正式步入今晚的主題！

HTML類(lèi)

html中的類(lèi)是什么鬼？先上個(gè)例子，然后再剖析它：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復(fù)習(xí)鞏固，攻破前端技能</title>
        <style>
            .c1 {
              background-color: tomato;
              color: white;
              border: 2px solid black;
              margin: 20px;
              padding: 20px;
            }
        </style>
    </head>
    <body>
        <div class="c1">
            <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
        </div>

        <div class="c1">
            <p>筆者親自設(shè)計(jì)的，一個(gè)入侵性極低的Oracle監(jiān)控方案</p>
            <a href="https://mp.weixin.qq.com/s/PDm2bK7IMFOwjNHFOblgXg" target="_blank">oracledb_exporter監(jiān)控Oracle，一個(gè)入侵性極低的監(jiān)控方案。</a>
        </div>

        <div class="c1">
            <p>意猶未盡的第2篇再次推出，一個(gè)入侵性極低的Oracle監(jiān)控方案</p>
            <a href="https://mp.weixin.qq.com/s/gFeWlZRGkIMAOCNFpKm8-Q" target="_blank">意猶未盡的第2篇再次推出，繼續(xù)講解oracledb_exporter監(jiān)控Oracle，一個(gè)入侵性極低的監(jiān)控方案。</a>
        <div>
    </body>
</html>

效果如下圖：

好了，我們正式開(kāi)始對(duì)它進(jìn)行剖析，搞清楚到底啥是類(lèi)，上面的小栗子中，定義了3個(gè)div元素，它們的class屬性值均為 "c1"。然后注意到?jīng)]有？在head中的style標(biāo)簽里，通過(guò) ”.c1“ 的方式同時(shí)對(duì)3個(gè)div進(jìn)行了css樣式的設(shè)置。所以也由此引出了它的一個(gè)特點(diǎn)，那就是多個(gè)HTML元素可以共享同一個(gè)類(lèi)，上述的例子中3個(gè)div（元素）的類(lèi)（class）名都定義了為“c1”，且同時(shí)對(duì)3個(gè)div進(jìn)行了css樣式的設(shè)置，這就是它的共享性。不知道筆者說(shuō)明白了沒(méi)有，好尷尬。

那接下來(lái)，我們?cè)賮?lái)個(gè)小栗子：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復(fù)習(xí)鞏固，攻破前端技能</title>
        <style>
            .c2 {
                font-size: 120%;
                color: crimson;
            }
        </style>
    </head>
    <body>
        <h1>彩虹<span class="c2">運(yùn)維</span>技術(shù)棧社區(qū)</h1>
        <p>我們會(huì)<span class="c2">持續(xù)分享</span>運(yùn)維和運(yùn)維開(kāi)發(fā)領(lǐng)域相關(guān)的技術(shù)文章</p>
    </body>
</html>

效果如下圖：

上面的例子中，“運(yùn)維”和“持續(xù)分享”這兩個(gè)字都在span標(biāo)簽里，且這兩個(gè)span標(biāo)簽都定義了class屬性，class=“c2”，同時(shí)通過(guò)“.c2”的方式設(shè)置了CSS屬性。上面的例子中，就是通過(guò)這樣的辦法實(shí)現(xiàn)了對(duì)某部分的文字進(jìn)行樣式的設(shè)置。

截止目前，我們通過(guò)兩個(gè)小栗子，直接解剖了什么是類(lèi)，那么我們?cè)僮鰝€(gè)小總結(jié)：

class屬性可以用于任何HTML元素
類(lèi)名區(qū)分大小寫(xiě)

CLASS的語(yǔ)法

其實(shí)在前面的小栗子中，已經(jīng)講解過(guò)class的語(yǔ)法了，不知道廣大盆友們注意到了沒(méi)有。如果沒(méi)有注意到，咱們?cè)龠@個(gè)章節(jié)重新復(fù)習(xí)一下。

看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復(fù)習(xí)鞏固，攻破前端技能</title>
        <style>
            .cc3 {
              background-color: blue;
              color: white;
              padding: 8px;
            }
        </style>
    </head>
    <body>
        <h2 class="cc3">彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
        <p class="cc3">我們會(huì)持續(xù)分享運(yùn)維和運(yùn)維開(kāi)發(fā)領(lǐng)域相關(guān)的技術(shù)文章</p>
    </body>
</html>

效果如下圖：

上面的例子中，是如何引用到文本內(nèi)容并設(shè)置CSS屬性的呢？答案就是通過(guò).css3這樣的語(yǔ)法，我們?cè)O(shè)置的類(lèi)名是css3。然后在style中，設(shè)置css屬性，在{}大括號(hào)里的內(nèi)容就是CSS的屬性，關(guān)于CSS，筆者后續(xù)會(huì)專(zhuān)門(mén)逐一講解哈。

一個(gè)元素可以屬于多個(gè)類(lèi)

什么？一個(gè)元素可以屬于多個(gè)類(lèi)？到底怎么玩，廢話(huà)不說(shuō)，咱們上個(gè)例子就知道了。下面的例子，是在上一個(gè)例子的基礎(chǔ)上進(jìn)行了小改造，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復(fù)習(xí)鞏固，攻破前端技能</title>
        <style>
            .cc3 {
              background-color: blue;
              color: white;
              padding: 8px;
            }
            .css4 {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2 class="cc3 css4">彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
        <p class="cc3">我們會(huì)持續(xù)分享運(yùn)維和運(yùn)維開(kāi)發(fā)領(lǐng)域相關(guān)的技術(shù)文章</p>
    </body>
</html>

效果如下圖：

注意到這個(gè)語(yǔ)法了嗎？class="cc3 css4"，沒(méi)錯(cuò)了！在上面的style中，分別對(duì)同一個(gè)h2元素進(jìn)行設(shè)置了不同的CSS屬性。也就是說(shuō)，對(duì)同一個(gè)元素需要定義多個(gè)類(lèi)，用空格分隔類(lèi)名就可以實(shí)現(xiàn)啦！是不是太簡(jiǎn)單了啦？

類(lèi)的復(fù)用

什么？類(lèi)的復(fù)用怎么理解？也就是說(shuō)不同的元素可以共享同一個(gè)類(lèi)。其實(shí)這個(gè)概念，在之前的例子中都有用到啦！只不過(guò)還沒(méi)有拋出這個(gè)概念而已，下面我們來(lái)個(gè)小栗子，鞏固一下。

這個(gè)例子是在上一個(gè)例子的基礎(chǔ)上做了小改造，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復(fù)習(xí)鞏固，攻破前端技能</title>
        <style>
            .share_class {
                background-color: blue;
                color: white;
                padding: 8px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2 class="share_class">彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
        <p class="share_class">我們會(huì)持續(xù)分享運(yùn)維和運(yùn)維開(kāi)發(fā)領(lǐng)域相關(guān)的技術(shù)文章</p>
    </body>
</html>

效果如下圖：

注意到了嗎？?jī)蓚€(gè)元素：h2和p元素，都使用了相同的類(lèi)，類(lèi)名叫share_class，這就達(dá)到了復(fù)用的效果呀！

JavaScript使用class

截止目前，還沒(méi)講解到j(luò)s，那么先講個(gè)小知識(shí)點(diǎn)，js如何使用class的。當(dāng)然，核心的用法也是使用類(lèi)名為指定的元素完成一些功能，在JavaScript里是通過(guò)getElementsByClassName()方法來(lái)訪(fǎng)問(wèn)元素中的類(lèi)名，反言之，也可以說(shuō)是通過(guò)getElementsByClassName()方法來(lái)訪(fǎng)問(wèn)帶有指定類(lèi)名的元素。關(guān)于js的知識(shí)，后續(xù)筆者會(huì)一一講解每個(gè)知識(shí)點(diǎn)，不急，咱們慢慢來(lái)。

下面，先來(lái)個(gè)小栗子，這例子很簡(jiǎn)單，通過(guò)js實(shí)現(xiàn)點(diǎn)擊后隱藏h2和p元素的內(nèi)容，下面看代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復(fù)習(xí)鞏固，攻破前端技能</title>
    </head>
    <body>
        <button onclick="my_fun()">點(diǎn)擊可以隱藏元素哦</button>
        <h2 class="c1">彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
        <p class="c1">我們會(huì)持續(xù)分享運(yùn)維和運(yùn)維開(kāi)發(fā)領(lǐng)域相關(guān)的技術(shù)文章</p>

    <script>
        function my_fun() {
          var x=document.getElementsByClassName("c1");
          for (var i=0; i < x.length; i++) {
            x[i].style.display="none";
          }
        }
    </script>
    
    </body>
</html>

效果如下圖：

隱藏前

隱藏后

看到效果了嗎？隱藏的功能就是通過(guò)js實(shí)現(xiàn)的，js很強(qiáng)大，后面我們一起專(zhuān)門(mén)分享js的知識(shí)點(diǎn)。

寫(xiě)在最后

好了，今晚的知識(shí)點(diǎn)分享到此為止啦！誠(chéng)邀廣大盆友的關(guān)注，望多多點(diǎn)贊、轉(zhuǎn)發(fā)、收藏。

本文轉(zhuǎn)載于（喜歡的盆友關(guān)注我們）：https://mp.weixin.qq.com/s/c9tXDae2l1osseOwKzILuQ

文共3019字，預(yù)計(jì)學(xué)習(xí)時(shí)長(zhǎng)9分鐘

來(lái)源：Pexels

JavaScript是目前最流行的編程語(yǔ)言之一。就像任何其他編程語(yǔ)言一樣，它有許多讓人馬上就能學(xué)會(huì)的小技巧。

每一個(gè)技巧都能完成大多數(shù)開(kāi)發(fā)人員每天需要完成的工作。根據(jù)經(jīng)驗(yàn)，讀者可能已經(jīng)知道了其中一些，然而仍會(huì)對(duì)其他的技巧大吃一驚。

本文將介紹一系列技巧，而這些技巧能將讀者打造為一名更好的開(kāi)發(fā)人員，并增強(qiáng)JavaScript技能。

我們一起來(lái)看看吧~

1.對(duì)象解構(gòu)

開(kāi)發(fā)人員一旦了解了對(duì)象解構(gòu)，就可能每天都會(huì)用到。

但什么是解構(gòu)呢？

解構(gòu)是一個(gè)JavaScript表達(dá)式，允許將數(shù)組、對(duì)象、映射和集合中的數(shù)據(jù)提取到其自己的變量中。它允許您一次從一個(gè)或多個(gè)對(duì)象中提取屬性。

一起看看以下示例，其中有一個(gè)用戶(hù)對(duì)象。如果要將用戶(hù)名(name)存儲(chǔ)在變量中，則必須將其賦給新行上的變量。如果想把性別(gender)也存儲(chǔ)在一個(gè)變量中，就必須重復(fù)上述操作。

const user={
    name: 'Frank',
    age: 23,
    gender: 'M',
    member: false
}const name=user.name
const gender=user.gender

使用解構(gòu)，就可以通過(guò)以下語(yǔ)法直接獲取對(duì)象屬性的變量：

const { name, age, gender, member }=user;console.log(name)   // Frank
console.log(age)    // 23
console.log(gender) // M
console.log(member) // false

2.使用設(shè)備性能以更好地調(diào)試

來(lái)源：Pexels

作為一名開(kāi)發(fā)人員，做的最多的事情就是調(diào)試。但是調(diào)試不僅僅是使用console.log在控制臺(tái)打印出一堆日志信息這么簡(jiǎn)單。

知道控制臺(tái)對(duì)象有分析代碼片段性能的好辦法嗎？大多開(kāi)發(fā)人員只知道用標(biāo)準(zhǔn)的console.log方法來(lái)調(diào)試代碼。

控制臺(tái)對(duì)象有很多有用的功能。它有一個(gè)time和timeEnd函數(shù)，可以幫助分析性能。其工作原理非常簡(jiǎn)單。

在被測(cè)試的代碼前調(diào)用console.time函數(shù)。此函數(shù)有一個(gè)參數(shù)，接受一個(gè)描述被分析內(nèi)容的字符串。在被測(cè)試代碼的末尾，調(diào)用console.timeEnd函數(shù)。給這個(gè)函數(shù)與第一個(gè)參數(shù)相同的字符串。然后，運(yùn)行代碼所需的時(shí)間將會(huì)在控制臺(tái)中顯示。

console.time('loop')  for (let i=0; i < 10000; i++) {  
    // Do stuff here
}  console.timeEnd('loop')

3. Every和 some函數(shù)

Every和some函數(shù)并不是為所有開(kāi)發(fā)人員熟知。然而，它們?cè)谀承┣闆r下非常有用。先來(lái)講講every函數(shù)。如果想要知道數(shù)組中的所有元素是否都通過(guò)了某個(gè)測(cè)試，那就可以應(yīng)用此函數(shù)。本質(zhì)上，這是在遍歷數(shù)組中的每個(gè)元素，并且檢查它們是否屬性都為真。

這聽(tīng)起來(lái)可能有些抽象，所以請(qǐng)看以下示例。并沒(méi)有那么復(fù)雜。

const random_numbers=[ 13, 2, 37,18, 5 ]
const more_random_numbers=[ 0, -1, 30, 22 ]const isPositive=(number)=>{
  return number > 0
}random_numbers.every(isPositive); // returns true
more_random_numbers.every(isPositive); // returns false

Every函數(shù)返回一個(gè)布爾值。如果數(shù)組中的所有元素都通過(guò)了測(cè)試，則返回“真”(true)。如果數(shù)組中的某個(gè)元素未通過(guò)測(cè)試，則返回“假” (false)。

也可以使用一個(gè)匿名函數(shù)作為測(cè)試函數(shù)：

random_numbers.every((number)=>{
    return number > 0
})

some函數(shù)與every函數(shù)的工作原理幾乎完全相同。兩個(gè)函數(shù)只有一個(gè)主要區(qū)別：some函數(shù)測(cè)試的是數(shù)組中是否至少有一個(gè)元素通過(guò)了測(cè)試。

回顧上述實(shí)例，如果使用some函數(shù)而不是every函數(shù)，那么兩個(gè)數(shù)組都將返回“真”(true)，因?yàn)閮蓚€(gè)數(shù)組都包含一個(gè)正數(shù)。

const random_numbers=[ 13, 2, 37,18, 5 ]
const more_random_numbers=[ 0, -1, 30, 22 ]const isPositive=(number)=>{
  return number > 0
}random_numbers.some(isPositive); // returns true
more_random_numbers.some(isPositive); // returns true

4.有條件地設(shè)置一個(gè)變量

有條件地設(shè)置一個(gè)變量很簡(jiǎn)單，而且能使代碼更漂亮。在應(yīng)用這個(gè)技巧的時(shí)候并不需要編寫(xiě)if語(yǔ)句——這是筆者最喜歡的JavaScript技巧之一。

所以要如何有條件地設(shè)置一個(gè)變量？

const timezone=user.preferred_timezone || 'America/New_York'

上述例子是檢查用戶(hù)是否有首選時(shí)區(qū)。如果用戶(hù)有首選時(shí)區(qū)，則使用該時(shí)區(qū)。如果用戶(hù)沒(méi)有首選時(shí)區(qū)，則使用默認(rèn)時(shí)區(qū)，即“美國(guó)/紐約”(‘America/New_York’)。

這段代碼看起來(lái)比使用if語(yǔ)句要干凈得多。

let timezone='America/New_York'if(user.preferred_timezone) {
    timezone=user.preferred_timezone
}

更簡(jiǎn)潔了，不是嗎？

來(lái)源：Pexels

5.將值轉(zhuǎn)換為字符串?dāng)?shù)組

有時(shí)需要將所有的值轉(zhuǎn)換為字符串?dāng)?shù)組。例如，當(dāng)使用Triple equal（===）運(yùn)算符檢查數(shù)組中是否存在某個(gè)數(shù)字時(shí)，可能會(huì)出現(xiàn)這種情況。

筆者最近遇到了一個(gè)問(wèn)題，其包含multi-select控件。Select選項(xiàng)的HTML值是字符串而不是整數(shù)，而這是有意義的，選定值的數(shù)組如下所示：

let selected_values=[ '1', '5','8' ]

問(wèn)題在于，沒(méi)能成功檢查所選值的數(shù)組中是否存在某個(gè)整數(shù)。筆者使用了一個(gè)Intersect函數(shù)，它使用了triple equals(===)運(yùn)算符。并且由于‘5’ !==5 ，而必須找到一個(gè)解決辦法。

在筆者看來(lái)，最漂亮的解決方案是將數(shù)組中的所有值都轉(zhuǎn)換為整數(shù)。當(dāng)筆者進(jìn)行嘗試時(shí)，偶然間發(fā)現(xiàn)了一個(gè)極其簡(jiǎn)單，卻又漂亮的解決辦法。

selected_values=selected_values.map(Number)// [ 1, 5, 8 ]

與將所有值轉(zhuǎn)換為整數(shù)不同，可以通過(guò)簡(jiǎn)單地更改map函數(shù)的參數(shù)，將數(shù)組中的值轉(zhuǎn)化為布爾值。

selected_values=selected_values.map(Boolean)

來(lái)源：Pexels

美好的未來(lái)在召喚你~干巴爹~

留言點(diǎn)贊關(guān)注

我們一起分享AI學(xué)習(xí)與發(fā)展的干貨

如轉(zhuǎn)載，請(qǐng)后臺(tái)留言，遵守轉(zhuǎn)載規(guī)范

在線(xiàn)咨詢(xún)

上一篇：網(wǎng)頁(yè)文字不能復(fù)制？那是因?yàn)槟銢](méi)有這個(gè)方法，只需一句代
下一篇：一文讀懂QML（QtingLanguage）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

學(xué)Web前端要掌握什么技能 常見(jiàn)CSS知識(shí)點(diǎn)有哪些

在開(kāi)篇

HTML類(lèi)

CLASS的語(yǔ)法

一個(gè)元素可以屬于多個(gè)類(lèi)

類(lèi)的復(fù)用

JavaScript使用class

寫(xiě)在最后

1.對(duì)象解構(gòu)

2.使用設(shè)備性能以更好地調(diào)試

3. Every和 some函數(shù)

4.有條件地設(shè)置一個(gè)變量

5.將值轉(zhuǎn)換為字符串?dāng)?shù)組

您的項(xiàng)目需求

學(xué)Web前端要掌握什么技能常見(jiàn)CSS知識(shí)點(diǎn)有哪些