亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端面試題-偽元素的應(yīng)用

dreamans / 1224人閱讀

摘要：一偽元素的應(yīng)用清除浮動(dòng)父元素中有子元素，并且父元素沒(méi)有設(shè)置高度，子元素在父元素中浮動(dòng)，結(jié)果必然是父元素的高度為，這也就導(dǎo)致了父元素高度塌陷，我們就需要清除浮動(dòng)。偽元素不會(huì)自然繼承自父元素如的樣式。

一、偽元素的應(yīng)用 1. 清除浮動(dòng)

父元素中有子元素，并且父元素沒(méi)有設(shè)置高度，子元素在父元素中浮動(dòng)，結(jié)果必然是父元素的高度為 0，這也就導(dǎo)致了父元素高度塌陷，我們就需要清除浮動(dòng)。

給浮動(dòng)元素的容器添加一個(gè) clearfix 的 class，然后給這個(gè) class 添加一個(gè) :after 偽元素實(shí)現(xiàn)元素之后添加一個(gè)看不見(jiàn)的塊元素（Block element）清理浮動(dòng)。

2. 分割線

HTML

分割線

CSS

.line::before, .line::after {
      content: "";
      display: inline-block;
      border-top: 1px solid black;
      width: 200px;
      margin: 5px;
}
3. 計(jì)數(shù)器

HTML


    a
    b
    c
    d
    e
    f
    g
    h
    i
    j



我選擇了個(gè)字母

CSS

.chooses {
      counter-reset: letters;
}
.chooses input:checked {
      counter-increment: letters;
}

.choose span:after {
      content: counter(letters);
}
3.1 CSS屬性說(shuō)明 
counter-reset 屬性設(shè)置某個(gè)選擇器出現(xiàn)次數(shù)的計(jì)數(shù)器的值。默認(rèn)為 0。

說(shuō)明：利用這個(gè)屬性，計(jì)數(shù)器可以設(shè)置或重置為任何值，可以是正值或負(fù)值。如果沒(méi)有提供 number，則默認(rèn)為 0。

注釋：如果使用 "display: none"，則無(wú)法重置計(jì)數(shù)器。如果使用 "visibility: hidden"，則可以重置計(jì)數(shù)器。

counter-increment 屬性設(shè)置某個(gè)選取器每次出現(xiàn)的計(jì)數(shù)器增量。默認(rèn)增量是 1。

說(shuō)明：利用這個(gè)屬性，計(jì)數(shù)器可以遞增（或遞減）某個(gè)值，這可以是正值或負(fù)值。如果沒(méi)有提供 number 值，則默認(rèn)為 1。

注釋：如果使用了 "display: none"，則無(wú)法增加計(jì)數(shù)。如使用 "visibility: hidden"，則可增加計(jì)數(shù)。

4. 替代標(biāo)簽

HTML


    
    Hello World



Hello World

CSS

.tooltip, 
.bubble{
      position: relative;
      padding: 10px;
      border-radius: 3px;
      background: #fff;
      border: 1px solid #000;
      display: inline-block;
}
.tooltip .caret,
.bubble:before{
      width: 10px;
      height: 10px;
      border-left: 1px solid #000;
      border-top: 1px solid #000;
      background: #fff;
      display: inline-block;
      transform: rotateZ(45deg);
      position: absolute;
      top: -6px;
}
.bubble:before{
      content:""
}
5. 自定義 checkbox

HTML

今天的心情:

CSS

input[type=checkbox]{
    -webkit-appearance: none;
    appearance: none;
    background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/b6dcd011-23cc-4d95-9e51-9f10100103bd.png) 0 0 no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    vertical-align: middle;
    outline: none;
}
input[type=checkbox]:checked{
    -webkit-appearance: none;
    appearance: none;
    background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/538f26f0-6f3e-48d5-91e6-5b5bb730dd19.png) 0 0 no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    vertical-align: middle;     
}
二、使用偽元素注意的問(wèn)題

在內(nèi)容模塊中提到，偽元素如果沒(méi)有設(shè)置 content 屬性，偽元素是無(wú)用的。

使用偽元素插入的內(nèi)容在頁(yè)面的源碼里是不可見(jiàn)的，只能在 CSS 里可見(jiàn)。

插入的元素在默認(rèn)情況下是內(nèi)聯(lián)元素（或者，在 HTML5 中，在文本語(yǔ)義的類別里）。因此，為了給插入的元素賦予高度，填充，邊距等等，你通常必須顯式地定義它是一個(gè)塊級(jí)元素。

還要注意的是典型的 CSS 繼承規(guī)則適用于插入的元素。例如，你有字體系列黑體，宋體，無(wú)襯線字體應(yīng)用到 body 元素里，然后偽元素會(huì)像其他元素一樣繼承這些字體系列。

偽元素不會(huì)自然繼承自父元素(如 padding margins )的樣式。

三、偽元素和偽類的區(qū)別

偽類選擇元素基于的是當(dāng)前元素處于的狀態(tài)，或者說(shuō)元素當(dāng)前所具有的特性，而不是元素的 id、class、屬性等靜態(tài)的標(biāo)志。由于狀態(tài)是動(dòng)態(tài)變化的，所以一個(gè)元素達(dá)到一個(gè)特定狀態(tài)時(shí)，它可能得到一個(gè)偽類的樣式；當(dāng)狀態(tài)改變時(shí)，它又會(huì)失去這個(gè)樣式。由此可以看出，它的功能和 class 有些類似，但它是基于文檔之外的抽象，所以叫偽類。

與偽類針對(duì)特殊狀態(tài)的元素不同的是，偽元素是對(duì)元素中的特定內(nèi)容進(jìn)行操作，它所操作的層次比偽類更深了一層，也因此它的動(dòng)態(tài)性比偽類要低得多。實(shí)際上，設(shè)計(jì)偽元素的目的就是去選取諸如元素內(nèi)容第一個(gè)字（母）、第一行，選取某些內(nèi)容前面或后面這種普通的選擇器無(wú)法完成的工作。它控制的內(nèi)容實(shí)際上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文檔中，所以叫偽元素。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/51997.html

相關(guān)文章

  • 前端面試題-偽元素的應(yīng)用

    摘要：一偽元素的應(yīng)用清除浮動(dòng)父元素中有子元素，并且父元素沒(méi)有設(shè)置高度，子元素在父元素中浮動(dòng)，結(jié)果必然是父元素的高度為，這也就導(dǎo)致了父元素高度塌陷，我們就需要清除浮動(dòng)。偽元素不會(huì)自然繼承自父元素如的樣式。 一、偽元素的應(yīng)用 1. 清除浮動(dòng) 父元素中有子元素，并且父元素沒(méi)有設(shè)置高度，子元素在父元素中浮動(dòng)，結(jié)果必然是父元素的高度為 0，這也就導(dǎo)致了父元素高度塌陷，我們就需要清除浮動(dòng)。 給浮動(dòng)元素的...

    tolerious 評(píng)論0 收藏0

  • 前端面試題-CSS選擇器

    摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對(duì)的選擇器也是支持的，比如。在選被元素后插入內(nèi)容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素?cái)U(kuò)展閱讀前端面試題清除浮動(dòng)前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對(duì) CSS 的選擇器也是支持的，比如 ...

    leanote 評(píng)論0 收藏0

  • 前端面試題-CSS選擇器

    摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對(duì)的選擇器也是支持的，比如。在選被元素后插入內(nèi)容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素?cái)U(kuò)展閱讀前端面試題清除浮動(dòng)前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對(duì) CSS 的選擇器也是支持的，比如 ...

    h9911 評(píng)論0 收藏0

  • 前端面試題-CSS選擇器

    摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對(duì)的選擇器也是支持的，比如。在選被元素后插入內(nèi)容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素?cái)U(kuò)展閱讀前端面試題清除浮動(dòng)前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對(duì) CSS 的選擇器也是支持的，比如 ...

    mingzhong 評(píng)論0 收藏0

  • 前端面試題-CSS優(yōu)先級(jí)

    摘要：優(yōu)先級(jí)是基于不同種類選擇器組成的匹配規(guī)則。但是，在內(nèi)部聲明的選擇器是會(huì)影響優(yōu)先級(jí)。當(dāng)兩條相互沖突的帶有規(guī)則的聲明被應(yīng)用到相同的元素上時(shí)，擁有更大優(yōu)先級(jí)的聲明將會(huì)被采用。擴(kuò)展閱讀前端面試題選擇器 一、選擇器優(yōu)先級(jí) 瀏覽器通過(guò)優(yōu)先級(jí)來(lái)判斷哪一些屬性值與一個(gè)元素最為相關(guān)，從而在該元素上應(yīng)用這些屬性值。優(yōu)先級(jí)是基于不同種類選擇器組成的匹配規(guī)則。 二、優(yōu)先級(jí)計(jì)算 優(yōu)先級(jí)就是分配給指定的CSS聲明...

    余學(xué)文 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<