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