img標簽設置display:block，寬度無法100%

MorePainMoreGain 發(fā)布于2019-08-29 16:24 / 868人閱讀

摘要：替換元素瀏覽器根據(jù)元素的標簽和屬性，來決定元素的具體顯示內(nèi)容。替換元素是其內(nèi)容不受視覺格式化模型控制的元素，例如標簽，嵌入的文檔之類或者，這些叫做替換元素。

img標簽設置display:block，寬度無法100%

一些個人總結(jié)，第一次發(fā)文章，有什么不足的地方，還請各位多提意見

現(xiàn)象

如下代碼，img標簽設置了display：block，尺寸寬度無法設定為100%




    
    img標簽設置display:block，寬度無法100%

原因 替換元素和非替換元素

元素是文檔結(jié)構(gòu)的基礎，在CSS中，每個元素生成了一個包含了元素內(nèi)容的框（box,也翻譯為“盒子”）。但是不同的元素顯示的方式會有所不同，例如div和span不同，而strong和p也不一樣。在文檔類型定義（DTD）中對不同的元素規(guī)定了不同的類型，這也是DTD對文檔之所以重要的原因之一。而根據(jù)元素本身的特點可以分為替換元素（replaced element）和非替換元素，非替換元素，在W3C中沒有給出明確的定義，但我們可以由替換元素對應著非替換元素，所以可以理解為除了替換元素，其它的就是非替換元素。

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

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

img標簽為替換元素，替換元素的特性之一就是尺寸由內(nèi)部元素決定，且無論其 display 屬性值是 inline 還是 block。這個特性很有意思，對于非替換元素，如果其 display 屬性值為 block，則會具有流動性，寬度由外部尺寸決定，但是替換元素的寬度卻不受 display 水平影響，因此，display 水平是無法讓尺寸 100%自適應父容器的

解決

解決辦法就是，通過設定的width尺寸 100%




    
    img標簽設置display:block，寬度無法100%

小結(jié)

剛開始的博客之旅，記錄一些自己學習點滴和經(jīng)驗，接下來會不斷努力的探索和記錄，希望文章能有助于各位，有什么不足之處，還望大家多多指出

GPU云服務器云服務器 img標簽 img標簽調(diào)用 img標簽自適應獲得html中img標簽

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

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

自適應寬度元素單行文本省略用法探究

摘要：單行文本省略和元素及其父元素的屬性都無關元素或為元素內(nèi)單行文本省略，需要給元素或為元素添加樣式為元素的子元素如果是自適應寬度時，內(nèi)的子元素實現(xiàn)單行文本省略，需要給添加樣式單行文本省略是現(xiàn)代網(wǎng)頁設計中非常常用的技術，幾乎每個站點都會用到。單行文本省略適用于顯示摘要信息的場景，如列表標題、文章摘要等。在響應式開發(fā)中，自適應寬度元素單行文本省略容易失效不起作用，對網(wǎng)頁開發(fā)這造成困擾。因此，本文將要...

K_B_Z 2019-04-23 13:46 評論0 收藏0
你不知道的CSS

摘要：不要忘了給子元素設置字號用來清除浮動除了著名的清除浮動類，利用屬性也可以清除浮動。本文首發(fā)于我的博客 CSS的世界是神奇的。隨著各瀏覽器WEB標準的日趨統(tǒng)一，CSS在WEB世界中扮演的角色也愈發(fā)的重要。甚至于在GitHub上出現(xiàn)了You-Dont-Need-JavaScript這樣Star近萬的優(yōu)秀開源項目，拋開該項目的實用性不說，項目中的眾多的DEMO就已經(jīng)證明了CSS的強大。當然...

cnio 2019-08-29 13:19 評論0 收藏0
淺析RWD

摘要：三響應式網(wǎng)頁設計的基本原理標簽，允許頁面寬度自動調(diào)整大多數(shù)移動瀏覽器將頁面放大為寬的視圖以符合屏幕分辨率。解決方案使用，選擇器清除浮動，只適用于非瀏覽器。由于移動設備屏幕大小的限制，在其上進行顯示的內(nèi)容一般是經(jīng)過精心篩選的。一、前言現(xiàn)今，無論是移動設備、平板電腦、PC，屏幕大小各不相同，若是針對每個屏幕大小單獨設計一個解決方案，則會大幅增加網(wǎng)站建設的復雜程度和運營成本。響應式網(wǎng)頁設...

0x584a 2019-08-30 12:52 評論0 收藏0
淺析RWD

摘要：三響應式網(wǎng)頁設計的基本原理標簽，允許頁面寬度自動調(diào)整大多數(shù)移動瀏覽器將頁面放大為寬的視圖以符合屏幕分辨率。解決方案使用，選擇器清除浮動，只適用于非瀏覽器。由于移動設備屏幕大小的限制，在其上進行顯示的內(nèi)容一般是經(jīng)過精心篩選的。一、前言現(xiàn)今，無論是移動設備、平板電腦、PC，屏幕大小各不相同，若是針對每個屏幕大小單獨設計一個解決方案，則會大幅增加網(wǎng)站建設的復雜程度和運營成本。響應式網(wǎng)頁設...

_Dreams 2019-08-01 15:10 評論0 收藏0
CSS display 屬性詳解

摘要：如果項目只有一根軸線，該屬性不起作用。后兩個屬性可選。彈性比為的子代占據(jù)父代框的空間是彈性比為的同級屬性的兩倍。其默認值為，也就是不具有彈性。此元素會根據(jù)上下文作為塊級元素或內(nèi)聯(lián)元素顯示柵格模型，類似柵格模型，類似轉(zhuǎn)自屬性詳解作者 display的所有屬性 {/* CSS 1 */ display: none; display: inline; display: block; disp...

xingqiba 2019-08-29 12:41 評論0 收藏0