摘要:可以影響可替換元素的位置,但不會影響到可替換元素自身的內(nèi)容。例如元素,可能具有自己的樣式表,但它們不會繼承父文檔的樣式。使用屬性插入的內(nèi)容都是匿名的可替換元素。可替換元素?fù)碛袃?nèi)置寬高,他們可以設(shè)置和。
之前刷面試題,看到一道題目 如題!?驚到了,以前寫代碼怎么沒注意到這樣的細(xì)節(jié) ( ̄▽ ̄)"
真是才疏學(xué)淺了。
參考:可替換元素 - CSS:層疊樣式表 | MDN
原來CSS中還有一個概念:可替換元素
MDN上是這么解釋的:
??在?CSS 中,可替換元素(replaced element)的展現(xiàn)效果不是由 CSS 來控制的。這些元素是一種外部對象,它們外觀的渲染,是獨(dú)立于 CSS 的。
??簡單來說,它們的內(nèi)容不受當(dāng)前文檔的樣式的影響。CSS 可以影響可替換元素的位置,但不會影響到可替換元素自身的內(nèi)容。例如 元素,可能具有自己的樣式表,但它們不會繼承父文檔的樣式。
典型的可替換元素有:
有些元素僅在特定情況下被作為可替換元素處理,例如:
"image" 類型的 元素就像一樣可替換
(已廢棄)
CSS的?content 屬性用于在元素的 ?::before 和 ::after 偽元素中插入內(nèi)容。使用content?屬性插入的內(nèi)容都是匿名的可替換元素。
這些元素有一個共性,就是他們的內(nèi)容都不是通過在標(biāo)簽內(nèi)添加文本,而是通過某個屬性(src、data()、label()或js控制())來顯示內(nèi)容的。
可替換元素擁有內(nèi)置寬高,他們可以設(shè)置width和height。他們的性質(zhì)同設(shè)置了display:inline-block的元素一致。
ps:我在看別人的資料的時候,看到個誤區(qū),textarea、button等并不是可替換元素,他們是瀏覽器默認(rèn)的內(nèi)聯(lián)塊元素。
額外知識:
當(dāng)需要給圖片設(shè)定固定寬高,并需要不拉伸時(等類似情況),
1)背景圖,background-size配合background-position。(適用于裝飾性圖片)
background-size: [
background-position: [ left | center | right | top | bottom |
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-height。
解決:img元素display: block;
圖片來自:CSS深入理解vertical-align和line-height的基友關(guān)系
3.vertical-align 只對行內(nèi)元素、表格單元格元素生效。
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom |
圖片來自:深入理解 CSS 中的行高與基線
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/114545.html
摘要:可以影響可替換元素的位置,但不會影響到可替換元素自身的內(nèi)容。例如元素,可能具有自己的樣式表,但它們不會繼承父文檔的樣式。使用屬性插入的內(nèi)容都是匿名的可替換元素。可替換元素?fù)碛袃?nèi)置寬高,他們可以設(shè)置和。 之前刷面試題,看到一道題目 如題!?驚到了,以前寫代碼怎么沒注意到這樣的細(xì)節(jié) ( ̄▽ ̄)真是才疏學(xué)淺了。參考:可替換元素 - CSS:層疊樣式表 | MDN showImg(https...
摘要:先來一張圖,看懂的幾個屬性順便帶上圖片出處,文章講得還可以,理解這張圖片,后面就好理解了。元素根據(jù)標(biāo)簽的屬性決定顯示輸入框還是按鈕。還有,還有近來很火的。 最近看到一篇20 個CSS高級技巧匯總的匯總,感觸很深,不過我想,與技巧相比,有些常見css布局難題,有時候更加讓我們的日常開發(fā)變得躊躇沮喪吧。在寫這一篇文章之前,自己還寫過一篇:我所不注意的那些CSS冷知識,但卻阻止了我做項(xiàng)目的速...
摘要:宋體塊級元素主要有宋體宋體內(nèi)聯(lián)元素不會以新行開始,和相鄰的內(nèi)聯(lián)元素在同一行。也就是說,絕對定位或者浮動的內(nèi)聯(lián)元素,實(shí)際表現(xiàn)為塊級元素,可以設(shè)置寬高和邊距。為什么有些內(nèi)聯(lián)(行內(nèi))元素如img、input可以設(shè)置寬高? 在說明之前我們先來了解一些定義。 塊級元素和內(nèi)聯(lián)元素: ①塊級元素總是獨(dú)占一行,表現(xiàn)為另起一行開始,而且其后的元素也必須另起一行顯示。 寬度(width)、高度(height)、...
摘要:一和都可以為頁面引入,區(qū)別方式方式祖先的差別,屬于標(biāo)簽,而完全是提供的一種方式。繼承父元素屬性的值十有哪些性特征。給超出高度的標(biāo)簽設(shè)置或者設(shè)置行高小于你設(shè)置的高度 一. link和import都可以為頁面引入css,區(qū)別?link方式:@import 方式 @import a.css ① 祖先的差別,link屬于XHTML標(biāo)簽,而@import完全是css提供的一種方式。li...
閱讀 1328·2021-11-15 11:37
閱讀 2212·2021-09-23 11:21
閱讀 1299·2019-08-30 15:55
閱讀 2105·2019-08-30 15:55
閱讀 2814·2019-08-30 15:52
閱讀 2817·2019-08-30 11:12
閱讀 1572·2019-08-29 18:45
閱讀 1884·2019-08-29 14:04