[css] img標簽是行內元素，為什么卻能設置寬高

原來CSS中還有一個概念：可替換元素MDN上是這么解釋的：在 CSS 中，可替換元素（replaced element）的展現效果不是由 CSS 來控制的。這些元素是一種外部對象，它們外觀的渲染，是獨立于 CSS 的。簡單來說，它們的內容不受當前文檔的樣式的影響。CSS 可以影響可替換元素的位置，但不會影響到可替換元素自身的內容。例如 <iframe> 元素，可能具有自己的樣式表，但它們不會繼承父文檔的樣式。 典型的可替換元素有：<iframe><video><embed><img>有些元素僅在特定情況下被作為可替換元素處理，例如：<input> "image" 類型的 <input> 元素就像<img>一樣可替換<option><audio><canvas><object><applet>（已廢棄）CSS的 content 屬性用于在元素的 ::before 和 ::after 偽元素中插入內容。使用content 屬性插入的內容都是匿名的可替換元素。這些元素有一個共性，就是他們的內容都不是通過在標簽內添加文本，而是通過某個屬性（src、data（<object>）、label（<option>）或js控制（<canvas>））來顯示內容的。可替換元素擁有內置寬高，他們可以設置width和height。他們的性質同設置了display:inline-block的元素一致。ps：我在看別人的資料的時候，看到個誤區，textarea、button等并不是可替換元素，他們是瀏覽器默認的內聯塊元素。display: inline-block; display: inline-block;額外知識：1. 當需要給圖片設定固定寬高，并需要不拉伸時（等類似情況）， 1）背景圖，background-size配合background-position。（適用于裝飾性圖片） background-size: [ <length-percentage> | auto ]{1,2} | cover | contain; background-position: [ left | center | right | top | bottom | <length-percentage> ]{1,2} background-position值還可以是邊偏移量：例：background-position: bottom 10px right 20px; 2）img元素，object-fit配合object-position。（適用于內容圖片） object-fit: fill | contain | cover | none | scale-down; object-position: 同background-position; object-position和background-position的區別在于默認值不同， object-position默認為50% 50%; background-position默認為0% 0%;2. 圖片img元素下面有一段空白區域，是因為vertical-align和line-heigh空白區域 空白區域 解決：img元素display: block;3.vertical-align 只對行內元素、表格單元格元素生效。 vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>;

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[css] img标签是行内元素，为什么却能设置宽高的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。