K60至尊版剛預(yù)熱 一加Ace2 Pro正面硬剛
Redmi這邊剛?cè)缁鹑巛钡男麄髁薑60 Ultra的各種技術(shù)和硬件配置，作為競(jìng)品的一加也坐不住了。一加中國(guó)區(qū)總裁李杰發(fā)布了兩條微博，表示在自家的一加Ace2上早就已經(jīng)采用了和PixelWo
我們平時(shí)寫(xiě) css 樣式是這樣的：
<template> <div class="zhifou"> <p>好好學(xué)習(xí)</p> <p>天天向上</p> </div></template><script setup></script><style lang="scss" scoped>.zhifou { margin: auto; width: 600px; height: 300px; background-color: blue; font-size: 20px;}</style>后來(lái)隨著前端技術(shù)的發(fā)展，原子化 CSS 出現(xiàn)了。原子化 CSS 是一種 CSS 框架。
在原子化 CSS 中，CSS 組件被拆分為更小的部分，這些部分可以獨(dú)立地編輯、測(cè)試和重用。這些原子通常是單個(gè)像素或極其微小的變化，例如顏色、大小、位置等。
原子化 CSS 有助于減少代碼量，提高代碼的可維護(hù)性和可重用性。
原子化 CSS 寫(xiě)法：
<div class="w-10 h-10 bg-red-100 text-10"> <p>好好學(xué)習(xí)</p> <p>天天向上</p> </div>原子化 CSS 框架更像是一個(gè)已經(jīng)封裝好的 CSS 工具類(lèi)。
例如：我們?cè)陬?lèi)選擇器中寫(xiě)了 w-[10px]，原子化 CSS 框架經(jīng)過(guò)掃描，將 w-[10px] 掃描成
width:10px;也就是說(shuō)，我們只要按照這個(gè)框架的要求去任意組合，框架最后一掃描，就能生成我們想要的 CSS 樣式。這樣會(huì)大大減少代碼量，提高工作效率。
而本文介紹的 tailwindcss 就是市面上非常熱門(mén)的原子化 CSS 框架。
tailwindcss 中文網(wǎng)
https://www.tailwindcss.cn/
圖片
<template> <div> <div class="bg-blue-600 w-[200px] h-[100px]"> <p>好好學(xué)習(xí)</p> <p>天天向上</p> </div> <div class="bg-red-600 w-[20rem] h-[10rem]"> <p>好好學(xué)習(xí)</p> <p>天天向上</p> </div> </div></template><script setup></script><style lang="scss" scoped></style>
圖片
數(shù)值：1 表示 4px
任意值：
例：
<div class="bg-blue-600 w-[300px] h-[300px] hover:bg-red-300 fixed bottom-[20px] left-[100px]"> <p class="font-bold text-yellow-400">好好學(xué)習(xí)</p> <p>天天向上</p></div>
圖片
例：
<div class="bg-blue-600 w-[300px] h-[300px] flex flex-row justify-center items-center "> <p class="bg-yellow-400 w-[100px] h-[100px] text-white-400">好好學(xué)習(xí)</p> <p class="bg-red-400 w-[100px] h-[100px] text-white-400">天天向上</p></div>
圖片
下面的例子中 p 標(biāo)簽有重復(fù)的樣式
<div class="bg-blue-600 w-[300px] h-[300px] flex flex-row justify-center items-center flex-wrap"> <p class="bg-red-400 w-[100px] h-[100px] text-white text-[20px]">好好學(xué)習(xí)</p> <p class="bg-yellow-400 w-[100px] h-[100px] text-white text-[20px]">天天向上</p></div>如果遇到重復(fù)的樣式，我們可以借助 @layer 和 @apply 指令定義全局復(fù)用的樣式：
1.在 TailwindCSS 的樣式文件中定義復(fù)用樣式
圖片
@layer components { .title { @apply w-[100px] h-[100px] text-white text-[20px]; }}2.在類(lèi)選擇器中使用復(fù)用類(lèi)名
<p class="title">好好學(xué)習(xí)</p><p class="title">天天向上</p>本文鏈接：http://www.tebozhan.com/showinfo-26-112771-0.html為什么Tailwindcss在開(kāi)發(fā)者中如此受歡迎？揭秘背后的原因！
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)