[css] img標(biāo)簽是行內(nèi)元素，為什么卻能設(shè)置寬高

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

個人簡介

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

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。