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

資訊專欄INFORMATION COLUMN

標(biāo)簽嵌套的問(wèn)題

李昌杰 / 824人閱讀

摘要：所以瀏覽器渲染到第二行時(shí)，發(fā)現(xiàn)了一個(gè)塊級(jí)元素，會(huì)認(rèn)為第一行的標(biāo)簽已經(jīng)完結(jié)了，所以瀏覽器認(rèn)為是開發(fā)者少寫了一個(gè)的結(jié)束標(biāo)簽。內(nèi)聯(lián)元素不能嵌套塊級(jí)元素，標(biāo)簽中不能嵌套塊級(jí)元素。

問(wèn)題描述

期待樣式：

單一精確度顯示：“精確度等級(jí)：xxxxx”

非單一精確度顯示：“精確度等級(jí)：xxxxx ~ xxxxx”

錯(cuò)誤實(shí)現(xiàn)

下面是錯(cuò)誤的示范，僅供說(shuō)明使用：


    

        準(zhǔn)確度等級(jí)：{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name }}
    

    

        準(zhǔn)確度等級(jí)：{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name + " ~ " + parameter.accuracy.maxAccuracyValue + parameter.accuracy.maxAccuracyUnit.name }}

看代碼感覺沒問(wèn)題，但是渲染出來(lái)是這么個(gè)東西，沒有數(shù)據(jù)。

原因分析

打開控制臺(tái)，看我們的DOM結(jié)構(gòu)，發(fā)現(xiàn)我們?cè)瓉?lái)的嵌套p標(biāo)簽被渲染為3個(gè)獨(dú)立的p標(biāo)簽。

所以看結(jié)構(gòu)，我們的準(zhǔn)確度等級(jí)不在ng-repeat修飾的p標(biāo)簽中，所以無(wú)法獲取數(shù)據(jù)，就會(huì)顯示錯(cuò)誤。

渲染猜想

以下均為個(gè)人猜想，如果錯(cuò)誤歡迎批評(píng)指正。

假如我們寫了一個(gè)嵌套的p標(biāo)簽，因p標(biāo)簽不能嵌套塊級(jí)元素。

所以瀏覽器渲染到第二行時(shí)，發(fā)現(xiàn)了一個(gè)塊級(jí)元素，會(huì)認(rèn)為第一行的p標(biāo)簽已經(jīng)完結(jié)了，所以瀏覽器認(rèn)為是開發(fā)者少寫了一個(gè)p的結(jié)束標(biāo)簽。

同理，最后，瀏覽器會(huì)認(rèn)為開發(fā)者少寫了一個(gè)p的開始標(biāo)簽。

所以最后會(huì)呈現(xiàn)出如上圖所示的DOM結(jié)構(gòu)。

總結(jié)

歸根結(jié)底，就是p標(biāo)簽中不能嵌套塊級(jí)元素。

內(nèi)聯(lián)元素不能嵌套塊級(jí)元素，p標(biāo)簽中不能嵌套塊級(jí)元素。這些我們可能都或多或少聽說(shuō)過(guò)，但是我們只是把它當(dāng)做一種規(guī)范。

通過(guò)此事，我懂得，規(guī)范，不只是規(guī)范，那是前人對(duì)后人的忠告。有規(guī)范，我們可以避免一些不必要的錯(cuò)誤。

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

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

相關(guān)文章

  • a標(biāo)簽嵌套href默認(rèn)行為與子元素click事件存在影響

    摘要：開發(fā)過(guò)程中遇到問(wèn)題，簡(jiǎn)單寫個(gè)運(yùn)行環(huán)境為描述一下這個(gè)問(wèn)題，當(dāng)標(biāo)簽內(nèi)部存在嵌套時(shí)，父元素標(biāo)簽的默認(rèn)行為以及子元素綁定的事件的響應(yīng)之間存在影響。 2018-08-07 Question about work 開發(fā)過(guò)程中遇到問(wèn)題，簡(jiǎn)單寫個(gè)demo 運(yùn)行環(huán)境為Chrome 68 描述一下這個(gè)問(wèn)題，當(dāng)標(biāo)簽內(nèi)部存在嵌套時(shí)， 父元素標(biāo)簽的href默認(rèn)行為以及子元素綁定的click事件的響應(yīng)之間存在...

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

  • a標(biāo)簽嵌套href默認(rèn)行為與子元素click事件存在影響

    摘要：開發(fā)過(guò)程中遇到問(wèn)題，簡(jiǎn)單寫個(gè)運(yùn)行環(huán)境為描述一下這個(gè)問(wèn)題，當(dāng)標(biāo)簽內(nèi)部存在嵌套時(shí)，父元素標(biāo)簽的默認(rèn)行為以及子元素綁定的事件的響應(yīng)之間存在影響。 2018-08-07 Question about work 開發(fā)過(guò)程中遇到問(wèn)題，簡(jiǎn)單寫個(gè)demo 運(yùn)行環(huán)境為Chrome 68 描述一下這個(gè)問(wèn)題，當(dāng)標(biāo)簽內(nèi)部存在嵌套時(shí)， 父元素標(biāo)簽的href默認(rèn)行為以及子元素綁定的click事件的響應(yīng)之間存在...

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

  • 我的前端編碼習(xí)慣 —— html篇

    摘要：標(biāo)簽屬性屬性名全部寫，屬性值雙引號(hào)引起來(lái)，每個(gè)雙標(biāo)簽務(wù)必加對(duì)應(yīng)的結(jié)束標(biāo)簽單標(biāo)簽不遵循此標(biāo)準(zhǔn)，仍按原標(biāo)準(zhǔn)，即不需要以結(jié)束。視情況為鏈接添加，圖要添加及。明確指定圖的和。 前言 作為一個(gè)前端工程師，我們可能每天都要寫html、css、javascript，每個(gè)人寫出來(lái)的代碼都飽含著自己的個(gè)人的style也有自己的編碼習(xí)慣和準(zhǔn)則，下面和大家分享一下我的習(xí)慣和準(zhǔn)則。 html 首先我們要對(duì)文...

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

  • 我的前端編碼習(xí)慣 —— html篇

    摘要：標(biāo)簽屬性屬性名全部寫，屬性值雙引號(hào)引起來(lái)，每個(gè)雙標(biāo)簽務(wù)必加對(duì)應(yīng)的結(jié)束標(biāo)簽單標(biāo)簽不遵循此標(biāo)準(zhǔn)，仍按原標(biāo)準(zhǔn)，即不需要以結(jié)束。視情況為鏈接添加，圖要添加及。明確指定圖的和。 前言 作為一個(gè)前端工程師，我們可能每天都要寫html、css、javascript，每個(gè)人寫出來(lái)的代碼都飽含著自己的個(gè)人的style也有自己的編碼習(xí)慣和準(zhǔn)則，下面和大家分享一下我的習(xí)慣和準(zhǔn)則。 html 首先我們要對(duì)文...

    ernest.wang 評(píng)論0 收藏0

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

0條評(píng)論

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