28個(gè)SpringBoot項(xiàng)目中常用注解，日常開發(fā)、求職面試不再懵圈
前言在使用SpringBoot開發(fā)中或者在求職面試中都會使用到很多注解或者問到注解相關(guān)的知識。本文主要對一些常用的注解進(jìn)行了總結(jié)，同時(shí)也會舉出具體例子，供大家學(xué)習(xí)和參考。注解
有時(shí)候，提升你的應(yīng)用程序的CSS只需要一個(gè)簡單的一行升級或增強(qiáng)！了解這12個(gè)屬性，開始將它們?nèi)谌氲侥愕捻?xiàng)目中，享受減少技術(shù)債務(wù)、去除JavaScript，以及為用戶體驗(yàn)贏得輕松的勝利。
你是否曾為視頻嵌入時(shí)的寬高比感到困擾？例如，我們常見的高清視頻寬高比是16:9。過去，我們可能需要使用一些復(fù)雜的方法來實(shí)現(xiàn)這個(gè)比例，比如大家熟悉的“padding hack”。但現(xiàn)在，有了一個(gè)更簡潔的解決方案。
padding hack：https://css-tricks.com/aspect-ratio-boxes/
2021年9月開始，大多數(shù)主流瀏覽器都穩(wěn)定支持了一個(gè)新的CSS屬性：aspect-ratio。這個(gè)屬性可以非常方便地定義元素的寬高比。比如說，對于一個(gè)高清視頻，你只需要設(shè)置aspect-ratio: 16/9就可以了。如果你想要一個(gè)完美的正方形，設(shè)置aspect-ratio: 1即可，因?yàn)槟J(rèn)情況下第二個(gè)值也是1。
來看一個(gè)例子：
.aspect-ratio-hd { aspect-ratio: 16/9;}.aspect-ratio-square { aspect-ratio: 1;}
值得一提的是，應(yīng)用了aspect-ratio屬性的元素在某種程度上是“寬容”的。這意味著當(dāng)內(nèi)容導(dǎo)致元素在至少一個(gè)維度上超出設(shè)定的比例時(shí)，元素仍然會增長或變形以適應(yīng)內(nèi)容。為了防止或控制這種行為，你可以添加額外的尺寸屬性，如max-width，這在避免元素超出彈性盒或網(wǎng)格容器時(shí)可能是必要的。
雖然這個(gè)屬性已經(jīng)出現(xiàn)了一段時(shí)間，但它解決了一個(gè)重要的問題，并且可以說是“一行代碼”的升級。
object-fit屬性的作用是讓img標(biāo)簽或其他替換元素（如視頻）的內(nèi)容表現(xiàn)得就像它們是容器本身，從而使這些內(nèi)容能夠像背景圖片那樣進(jìn)行尺寸調(diào)整。
這個(gè)屬性有幾個(gè)值可以選擇，但最常用的可能是以下兩個(gè)：
在這兩種情況下，object-fit與aspect-ratio結(jié)合使用是非常理想的，這可以確保在應(yīng)用自定義寬高比時(shí)圖片不會失真。
.image { object-fit: cover; aspect-ratio: 1; /* Optional: constrain image size */ max-block-size: 250px;}margin-inline是CSS邏輯屬性中的一員，用于簡化水平書寫模式下（如英文、中文）的左右外邊距設(shè)置。在傳統(tǒng)的CSS中，你可能會分別設(shè)置margin-left和margin-right來達(dá)到這一目的。而使用margin-inline，可以更加簡潔和高效地完成同樣的任務(wù)。
/* 之前的寫法 */margin-left: auto;margin-right: auto;/* 使用margin-inline */margin-inline: auto;使用margin-inline的主要優(yōu)勢在于它的“邏輯性”。這意味著它可以根據(jù)文本的書寫模式（如從左到右、從右到左）自動調(diào)整外邊距。這對于設(shè)計(jì)能夠適應(yīng)多種語言和文化的網(wǎng)站尤其重要。
舉個(gè)例子，對于從右到左書寫的語言（如阿拉伯語），margin-inline-start將自動應(yīng)用于右邊距，而margin-inline-end應(yīng)用于左邊距。這樣，無論內(nèi)容是哪種書寫模式，布局都能保持一致和諧。
現(xiàn)在，margin-inline等邏輯屬性已經(jīng)得到了廣泛的支持，兼容性超過了98%，盡管在某些情況下可能需要添加前綴。
text-underline-offset屬性用于控制文本基線與下劃線之間的距離。通過這個(gè)屬性，開發(fā)者可以精確地定位下劃線的位置，使其既不遮擋文字，又能起到強(qiáng)調(diào)作用。
/* 應(yīng)用text-underline-offset */a:not([class]) { text-underline-offset: 0.25em;}在這個(gè)例子中，所有沒有class屬性的a元素（通常是鏈接）的下劃線被設(shè)置了0.25em的偏移量。
text-underline-offset可以與其他CSS屬性結(jié)合使用，以實(shí)現(xiàn)更加豐富的視覺效果：
a { text-decoration-color: blue; /* 下劃線顏色 */ text-decoration-thickness: 2px; /* 下劃線粗細(xì) */ text-underline-offset: 0.25em; /* 下劃線偏移量 */}在Web前端開發(fā)中，為元素添加視覺焦點(diǎn)是一項(xiàng)基本且重要的任務(wù)。傳統(tǒng)上，我們可能會使用box-shadow或偽元素來創(chuàng)建元素焦點(diǎn)時(shí)的自定義輪廓。但其實(shí)，有一個(gè)自2006年就已存在的CSS屬性可能被許多人忽略了——outline-offset。這個(gè)屬性可以讓你輕松地控制元素輪廓的位置。
outline-offset屬性允許你調(diào)整輪廓（outline）與元素邊界之間的距離。通過設(shè)置正值，可以將輪廓向外推移；設(shè)置負(fù)值，則可以將輪廓向內(nèi)拉近。
/* 應(yīng)用outline-offset */.outline-offset { outline: 2px dashed blue; /* 藍(lán)色虛線輪廓 */ outline-offset: var(--outline-offset, .5em); /* 輪廓偏移量 */}在這個(gè)例子中，當(dāng)元素獲得焦點(diǎn)時(shí)，它將顯示一個(gè)藍(lán)色虛線輪廓，輪廓與元素邊界之間的距離為0.5em。
兩個(gè)相對較新的CSS屬性：scroll-margin和scroll-padding，它們在處理滾動行為時(shí)尤為重要。
scroll-margin系列屬性允許你為元素在滾動位置上下文中添加一個(gè)偏移量。這在處理諸如固定導(dǎo)航欄遮擋錨點(diǎn)鏈接內(nèi)容時(shí)特別有用。
/* 為所有具有id屬性的元素添加scroll-margin */[id] { scroll-margin-top: 2rem;}在這個(gè)例子中，任何具有id屬性的元素，在通過導(dǎo)航滾動到它時(shí)，其頂部都會有2rem的額外空間，以避免被固定在頂部的導(dǎo)航欄遮擋。
與scroll-margin類似，scroll-padding屬性可以在滾動視圖內(nèi)增加內(nèi)邊距。這不會影響元素在文檔中的布局位置，但可以改善滾動到特定元素時(shí)的視覺體驗(yàn)。
隨著暗黑模式在用戶界面中的普及，為網(wǎng)站或應(yīng)用程序提供光暗主題切換成為了一種流行趨勢。CSS中的color-scheme屬性為開發(fā)者提供了一種簡單的方式來適配瀏覽器UI元素的光暗模式，今天我們就來深入探討它的應(yīng)用。
color-scheme屬性允許網(wǎng)頁告訴瀏覽器，其內(nèi)容是為淺色模式、暗色模式，或兩者皆適配的。設(shè)置此屬性后，瀏覽器會自動調(diào)整表單控件、滾動條和CSS系統(tǒng)顏色等UI元素，以適應(yīng)相應(yīng)的主題模式。
/* 在根元素上設(shè)置color-scheme */:root { color-scheme: dark light;}你也可以在單個(gè)元素上使用color-scheme屬性，以改善特定背景下的對比度和可讀性。
/* 對暗背景的元素使用暗色模式 */.dark-background { color-scheme: dark;}在前端開發(fā)中，定制化表單元素的樣式一直是一個(gè)挑戰(zhàn)，尤其是對于復(fù)選框和單選按鈕這樣的原生UI控件。幸運(yùn)的是，CSS引入了一個(gè)新屬性accent-color，讓這一任務(wù)變得更加簡單和直觀。
accent-color屬性允許開發(fā)者改變復(fù)選框、單選按鈕、進(jìn)度條和滑塊（range）等表單控件的主題色。通過這個(gè)屬性，你可以輕松地為這些元素設(shè)置一個(gè)自定義的顏色，以匹配你的網(wǎng)站或應(yīng)用程序的整體風(fēng)格。
/* 使用accent-color自定義顏色 */:root { accent-color: mediumvioletred;}在這段代碼中，所有原生的表單控件（如單選按鈕和復(fù)選框）將使用中紫羅蘭紅色作為它們的主題色。
在前端開發(fā)中，經(jīng)常需要調(diào)整元素的寬度以適應(yīng)其內(nèi)容。傳統(tǒng)方法如使用display: inline-block等，雖然能實(shí)現(xiàn)這一需求，但可能會影響元素的布局位置。幸運(yùn)的是，CSS提供了一個(gè)更為優(yōu)雅的解決方案——width: fit-content屬性。
width: fit-content 屬性允許元素的寬度自動調(diào)整以適應(yīng)其內(nèi)容的大小，相當(dāng)于“收縮包裹”（shrink wrap）效果。這意味著元素的寬度會剛好足夠容納其內(nèi)容，不會過大或過小。
/* 應(yīng)用width: fit-content */.fit-content { width: fit-content;}在這個(gè)例子中，類名為.fit-content的元素將其寬度自動調(diào)整為恰好適應(yīng)其內(nèi)容的大小。
在網(wǎng)頁設(shè)計(jì)中，處理滾動行為是提升用戶體驗(yàn)的關(guān)鍵之一。特別是在有限維度的滾動區(qū)域（如側(cè)邊欄或滾動框），當(dāng)滾動到達(dá)邊界時(shí)，滾動行為可能會傳遞給背景頁面，這可能會給用戶帶來不便。為了解決這個(gè)問題，CSS提供了一個(gè)屬性overscroll-behavior。
overscroll-behavior屬性允許開發(fā)者控制滾動區(qū)域的邊界行為。當(dāng)設(shè)置為contain時(shí)，它可以阻止?jié)L動行為從一個(gè)滾動容器傳遞到其父容器或背景頁面。
/* 設(shè)置overscroll-behavior */.overscroll-container { overscroll-behavior: contain;}在這個(gè)例子中，類名為.overscroll-container的元素在達(dá)到滾動邊界時(shí)，不會將滾動行為傳遞給其父級元素或背景頁面。
在網(wǎng)頁排版中，處理文本換行是一個(gè)經(jīng)典問題，尤其是要避免在段落的最后一行留下孤立的單詞（又稱“孤行”）。2023年，CSS引入了一個(gè)新屬性text-wrap，旨在解決這類排版問題。
text-wrap屬性提供了對文本換行行為的更精細(xì)控制，其目標(biāo)是均衡每行文本的字符數(shù)，從而避免不平衡的文本行和孤行現(xiàn)象。
balance：這個(gè)值的目標(biāo)是均衡每行的字符數(shù)，使得文本行更加平衡和諧。
/* 應(yīng)用text-wrap屬性 */.headline { text-wrap: balance;} /* For demonstration */ max-inline-size: 25ch;
text-wrap屬性的pretty值是針對防止孤行設(shè)計(jì)的。它的算法會評估文本塊的最后四行，根據(jù)需要做出調(diào)整，確保最后一行至少有兩個(gè)單詞。
/* 應(yīng)用text-wrap屬性的pretty值 */.article-text { text-wrap: pretty;}
在網(wǎng)頁設(shè)計(jì)中，滾動條的出現(xiàn)和消失有時(shí)會導(dǎo)致不希望的布局變化。為了解決這一問題，CSS引入了一個(gè)新屬性scrollbar-gutter，它允許在布局中預(yù)留滾動條的空間，防止這種不期望的布局偏移。
scrollbar-gutter屬性的主要作用是在滾動容器中預(yù)留出滾動條的空間。即使在不需要滾動條的情況下，瀏覽器也會繪制一個(gè)“溝槽”（gutter），作為滾動容器的額外空間，避免了因滾動條消失而引起的布局變化。
/* 使用scrollbar-gutter屬性 */.container { scrollbar-gutter: stable both-edges;}至此，我們對幾個(gè)CSS中的新特性進(jìn)行了深入的探討和分析。從text-wrap的平衡排版到scrollbar-gutter防止布局偏移的巧妙應(yīng)用，這些現(xiàn)代CSS特性為前端開發(fā)者打開了新的大門。希望本文能幫助大家更好地理解這些新工具，從而在實(shí)際項(xiàng)目中運(yùn)用得心應(yīng)手，創(chuàng)造出更加美觀、用戶友好的網(wǎng)頁。前端技術(shù)的世界總是充滿驚喜和挑戰(zhàn)，讓我們保持好奇心，不斷學(xué)習(xí)和探索，共同推動這個(gè)領(lǐng)域的發(fā)展。
本文鏈接：http://www.www897cc.com/showinfo-26-80345-0.html分享 12 個(gè)現(xiàn)代化 CSS 新屬性
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號