img標籤設置display:block，寬度沒法100%

時間 2019-12-09

標籤 img 標籤設置 display block 寬度沒法 100% 欄目 HTML 简体版

原文原文鏈接

img標籤設置display:block，寬度沒法100%

一些我的總結，第一次發文章，有什麼不足的地方，還請各位多提意見

現象

以下代碼，img標籤設置了display：block，尺寸寬度沒法設定爲100%html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img標籤設置display:block，寬度沒法100%</title>
</head>
<body>
    <div>
        <img src="https://www.baidu.com/img/bd_logo1.png?where=super" style="display: block;">
    </div>
</body>
</html>

緣由

替換元素和非替換元素

元素是文檔結構的基礎，在CSS中，每一個元素生成了一個包含了元素內容的框（box,也翻譯爲「盒子」）。可是不一樣的元素顯示的方式會有所不一樣，例如div和span不一樣，而strong和p也不同。在文檔類型定義（DTD）中對不一樣的元素規定了不一樣的類型，這也是DTD對文檔之因此重要的緣由之一。而根據元素自己的特色能夠分爲替換元素（replaced element）和非替換元素，非替換元素，在W3C中沒有給出明確的定義，但咱們能夠由替換元素對應着非替換元素，因此能夠理解爲除了替換元素，其它的就是非替換元素。

替換元素：瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。替換元素是其內容不受CSS視覺格式化模型控制的元素，例如img標籤，嵌入的文檔（iframe之類）或者applet，這些叫作替換元素。好比img元素經過src屬性的值來讀取圖片信息並顯示出來，而若是查看(x)html代碼，卻看不到圖片的實際內容，並且img元素的內容一般會被src屬性指定的圖像替換掉；例如input元素的type屬性決定是顯示輸入框，仍是單選按鈕等。(x)html中的img , input , textarea , select , object都是替換元素。這些元素沒有實際的內容，便是個空元素瀏覽器

非替換元素：(X)HTML 的大多數元素是非替換元素，他們將內容直接告訴瀏覽器，將其顯示出來app

img標籤爲替換元素，替換元素的特性之一就是尺寸由內部元素決定，且不管其 display 屬性值是 inline 仍是 block。這個特性頗有意思，對於非替換元素，若是其 display 屬性值爲 block，則會具備流動性，寬度由外部尺寸決定，可是替換元素的寬度卻不受 display 水平影響，所以，display 水平是沒法讓尺寸 100%自適應父容器的學習

解決

解決辦法就是，經過設定<img>的width尺寸 100%spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img標籤設置display:block，寬度沒法100%</title>
</head>
<body>
    <div>
        <img src="https://www.baidu.com/img/bd_logo1.png?where=super" style="display: block;width: 100%;">
    </div>
</body>
</html>