【疑點】標籤爲何不能包含塊級標籤?還有哪些特殊的HTML標籤？

時間 2019-12-11

標籤疑點標籤爲何不能包含還有哪些特殊 html 欄目 HTML 简体版

原文原文鏈接

最近，在碼代碼的時候，就是下面的這段代碼，我犯了一個很不起眼，但犯了就致命的BUG。css

<body>
    <p>
       <ol>
          <li>Hello</li>
       </ol>
    </p>
    <div>How are you?</div>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
    var result= $("p").filter(function(index) {
        console.log($("ol", this).length== 0)
        return $("ol", this).length == 0;
    });
</script>

由於只要你犯了，估計檢查半天都找不出。我但是費了老勁，才發現是<p>和<ol>嵌套的問題。可是兩個不都是塊級元素，難道不能嵌套麼？並且最後的結果竟然是自動補全了兩個</p>標籤。java

它涉及到了塊級元素和內聯元素的嵌套問題。這是一個特別容易被咱們遺忘的知識點！！！如今就來讓我給大家補一下課也給我本身加深一下印象~jquery

一、塊級元素（block）、內聯元素（inline）和可變元素（inline-block）的定義和區別瀏覽器

二、各種具體包含明細架構

三、嵌套規則和某些特殊標籤 app

定義和區別ide

display:block

block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度。
block元素能夠設置width,height屬性。塊級元素即便設置了寬度,仍然是獨佔一行。
block元素能夠設置margin和padding屬性。

display:inline

inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。
inline元素設置width,height屬性無效。
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
能夠經過display:block來將它變成爲塊元素以後，就能夠用css其餘樣式應用了。

display:inline-block

簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。
元素展示inline元素的屬性，可是能夠設置本身的寬和高了。好比咱們能夠給一個link（a元素）inline-block屬性值，使其既具備block的寬度高度特性又具備inline的同行特性。

區別

塊級元素通常用來搭建網站架構、佈局、承載內容。
內聯元素通常用來在網站內容中的某些細節或者部位，用以「強調、區分樣式、上標、下標、錨點」等等。佈局
它們能夠互相轉換。display:inline|block字體

注意

通常咱們會用display:block，display:inline或者display:inline-block來調整元素的佈局級別，其實display的參數遠遠不止這三種，僅僅是比較經常使用而已。
IE（低版本IE）原本是不支持inline-block的，因此在IE中對內聯元素使用display:inline-block，理論上IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表象。

各種具體包含明細網站