日韩精品最新av,亚洲懂色成人专区,精品久久伊人一区

一般的UI中CSS框架都是內(nèi)建各種預(yù)設(shè)的組件，比如按鈕、卡片、警告框等，當(dāng)需要通過(guò)定制化設(shè)計(jì)時(shí)，組件的高度耦合性則帶來(lái)很大的弊端。Tailwind并不提供預(yù)先設(shè)計(jì)好的內(nèi)建組件，而是提供了更為基礎(chǔ)的工具類(lèi)（utility classes），可直接在HTML源碼上構(gòu)建完全定制化的設(shè)計(jì)。

Tailwind順風(fēng)是一個(gè)CSS框架的工具集，Tailwind的理念是抽取共用體（Utilities First）。
Tailwind CSS是一個(gè)高度可定制的基礎(chǔ)層CSS框架，提供了構(gòu)建定制化所需的構(gòu)建塊，無(wú)需重新覆蓋內(nèi)建于框架內(nèi)中的風(fēng)格。

CSS類(lèi)庫(kù)管理的實(shí)質(zhì)上是CSS命名的問(wèn)題，目前流行的解決方案有：

BEM（Block Element Modifer）
BEM即.block__element--modifier{}的形式，使用BEM后CSS就有了三個(gè)作用域。
ACSS（CSS Atomic）
ACSS是雅虎團(tuán)隊(duì)的Atomic CSS，其理念是將樣式原子化。

安裝

$ npm i tailwindcss

<link  rel="stylesheet">

特性

響應(yīng)式

Tailwind CSS的每個(gè)工具類(lèi)都支持響應(yīng)式布局，使用類(lèi)似{screen}:的命名前綴以區(qū)分響應(yīng)式類(lèi)。

組件友好

僅需使用工具類(lèi)（utility classes）即可，Tailwind從重復(fù)模式中提取組件的工具類(lèi)。

可定制

Tailwind CSS是基于PostCSS開(kāi)發(fā)的，通過(guò)JavaScript代碼配置。

核心

實(shí)用為主（Utility-First）

傳統(tǒng)的Web頁(yè)面設(shè)計(jì)需手工為HTML元素編寫(xiě)CSS樣式，使用Tailwind可以直接在HTML使用預(yù)先定義的類(lèi)名來(lái)設(shè)置元素的樣式。

自適應(yīng)設(shè)計(jì)（Responsive Design）

Tailwind中每個(gè)工具類(lèi)均可有條件地應(yīng)用到不同的斷點(diǎn)（breakpoint），默認(rèn)情況下根據(jù)常見(jiàn)移動(dòng)設(shè)備分辨率劃分了4個(gè)斷點(diǎn)，分別對(duì)應(yīng)4個(gè)不同的媒體查詢(xún)。

自適應(yīng)

斷點(diǎn)	屏幕類(lèi)型	最小寬度
sm	小型屏幕（small），手機(jī)	min-width:640px;
md	中等屏幕（medium），平板	min-width:768px;
lg	大型屏幕（large），筆記本	min-width:1024px;
xl	超大屏幕（extra large），臺(tái)式機(jī)	min-width:1280px;

/*sm small*/
@meida (min-width:640px){}
/*md medium*/
@meida (min-width:768px){}
/*lg large*/
@meida (min-width:1024px){}
/*xl extra large*/
@meida (min-width:1280px){}

當(dāng)需要為元素添加僅在某個(gè)斷點(diǎn)處生效的工具類(lèi)時(shí)，需在工具類(lèi)名前添加前綴breakpoint:classname。

例如：不同分辨率設(shè)備圖片寬度限制

<img class="w-16 md:w-32 lg:w-48" src="..." />

例如：營(yíng)銷(xiāo)頁(yè)面組件在小屏幕上使用堆疊布局，大屏幕上使用并排布局。

<link  rel="stylesheet">

<div class="container mx-auto bg-gray-200 p-4">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80"/>
    </div>
    <div class="mt-4 md:mt-0 md:ml-6">
      <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">市場(chǎng)營(yíng)銷(xiāo)</div>
      <a class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">為您的生意發(fā)現(xiàn)新的客戶(hù)</a>
      <p class="mt-2 text-gray-600">經(jīng)營(yíng)一家企業(yè)是一件非常艱巨的工作，這里有五個(gè)可用來(lái)發(fā)掘您第一個(gè)客戶(hù)的想法。</p>
    </div>
  </div>
</div>

md:flex將外部元素默認(rèn)的display:block在中等屏幕和較大屏幕上轉(zhuǎn)換為display:flex彈性盒子容器。
當(dāng)圖像元素的父元素為彈性容器時(shí)，為確保圖像不發(fā)生收縮，因此為img元素添加md:flex-shrink-0，以防止在中等屏幕和更大的屏幕中不發(fā)生收縮。從技術(shù)角度來(lái)講可以只是用flex-shrink-0，因?yàn)樗谳^小屏幕上不會(huì)起作用，但由于只在md中等屏幕上起作用，所以最好在類(lèi)名中添加md以明確指明。
小型屏幕上圖片默認(rèn)為全寬，中型屏幕及以上則使用md:w-56將圖片寬度限制為固定大小。
小型屏幕上內(nèi)容部分使用mt-4，即在內(nèi)容和圖像之間添加外頂邊距。當(dāng)在水平并排布局時(shí)不需要此邊距，使用md:mt-0撤銷(xiāo)，并使用md:ml-6添加左邊距。

大屏并排布局

小屏堆疊布局

移動(dòng)優(yōu)先（Mobile First）

默認(rèn)Tailwind使用移動(dòng)優(yōu)先斷點(diǎn)系統(tǒng)，類(lèi)似Bootstrap或Foundation。這也就意味著那些沒(méi)有添加斷點(diǎn)前綴的類(lèi)名會(huì)在所有屏幕大小上都會(huì)生效，比如uppercase。帶斷點(diǎn)前綴的類(lèi)名則僅在指定斷點(diǎn)及更大尺寸中生效，比如md:uppercase。

例如：不同斷點(diǎn)處循環(huán)使用多個(gè)背景色，即調(diào)整瀏覽器大小以查看背景色的更改。

更換背景色

<link  rel="stylesheet">

<div class="container mx-auto p-4 bg-gray-200 flex items-center justify-center">
  <div class="w-20 h-20 rounded bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500">
  </div>
</div>

偽類(lèi)變量（Pseudo-Class Variants）

基礎(chǔ)樣式（base）

Tailwind默認(rèn)分為三個(gè)模塊分別是base、component、utilities。

base 基礎(chǔ)樣式
component 組件類(lèi)樣式
utilities工具類(lèi)樣式

Tailwind以normalize.css為基礎(chǔ)，在其上構(gòu)建出preflight基礎(chǔ)樣式，其目的在于消除不同廠(chǎng)商瀏覽器渲染不一致的內(nèi)置樣式。

清零默認(rèn)外邊距

preflight從元素（比如標(biāo)題、引號(hào)、段落等）中刪除默認(rèn)外邊距

blockquote,dl,dd,h1,h2,h3,h4,h5,h6,figure,p,pre{margin:0;}

取消標(biāo)題默認(rèn)樣式

默認(rèn)標(biāo)題元素默認(rèn)樣式，使之具有與普通文本相同的字體大小和字號(hào)粗細(xì)。

h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:inherit;}

取消列表默認(rèn)樣式

ol, ul{margin:0; padding:0; list-style:none;}

圖像類(lèi)元素設(shè)置為塊級(jí)元素

img, svg, video, canvas, audio, iframe, embed, object{display:block; vertical-align:middle;}

全局重置邊框樣式

*, *::before, *::after{ border-width:0; border-style:solid; border-color:theme('borderColor.default', currentColor);}

布局（layout）

容器（container）

.container容器類(lèi)是一個(gè)將元素寬度固定到當(dāng)前斷點(diǎn)的組件。

斷點(diǎn)	最大寬度
none	width:100%;
sm	max-width:640px;
md	max-width:768px
lg	max-width:1024px;
xl	max-width:1280px;

.container容器類(lèi)用于設(shè)置元素的最大寬度，以匹配當(dāng)前斷點(diǎn)的最小寬度。適用于固定屏幕大小設(shè)計(jì)而非容納完全流動(dòng)的viewport視口。

.container{
  width:100%:
}

.container容器類(lèi)不會(huì)自動(dòng)居中也沒(méi)有任何內(nèi)置的水平填充。

盒模型（box sizing）

類(lèi)名	屬性	描述
.box-border	box-sizing:border-box;	邊框盒模型，元素尺寸包含邊框和內(nèi)邊距。
.box-content	box-sizing:content-box;	內(nèi)容盒模型，元素尺寸不包含邊框和內(nèi)邊距。

box-sizing屬性用于控制瀏覽器如何計(jì)算元素大小，即盒子模型的尺寸。

包含邊框和內(nèi)邊距的盒模型（border-box）

border-box

.border-box{
  box-sizing:border-box;
}

border-box盒子模型會(huì)將元素的框大小設(shè)置為border box邊框盒子模型，告訴瀏覽器在給定元素的高度或?qū)挾葧r(shí)會(huì)包含邊框和填充。

例如：創(chuàng)建100px x 100px的元素，使用border box盒子模型時(shí)，如果具有2px的邊框和4像素的內(nèi)邊距（padding），最終呈現(xiàn)的是 100px x 100px的區(qū)域，其中內(nèi)容區(qū)域則為88px x 88px。

<link  rel="stylesheet">

<div class="flex align-center justify-center p-4">
  <div class="box-border h-32 w-32 p-4 border-4 border-gray-400 bg-gray-200">
    <div class="w-full h-full bg-gray-300"></div>
  </div>
</div>

不包含邊框和內(nèi)邊距的盒模型（content-box）

使用box-content類(lèi)名將定義元素的盒模型為內(nèi)容框，也就是告訴瀏覽器在元素計(jì)算寬度或高度時(shí)包含邊框和內(nèi)邊距的大小。

.content-box{
  box-sizing: content-box;
}

content-box

例如：創(chuàng)建100px x 100px的元素時(shí)，若邊框?yàn)?px，內(nèi)邊距為4px，最終呈現(xiàn)的尺寸為112px x 112px，內(nèi)部?jī)?nèi)容區(qū)域?yàn)?100px x 100px。

<link  rel="stylesheet">

<div class="flex align-center justify-center p-4">
  <div class="content-box w-32 h-32 p-4 border-4 border-gray-400 bg-gray-200">
    <div class="w-full h-full bg-gray-100"></div>
  </div>
</div>

顯示框（display）

CSS中的display屬性用于控制元素生成的顯示框類(lèi)型

類(lèi)名	屬性	描述
.hidden	display:none	隱藏元素，不顯示框。
.block	display:block	設(shè)置元素顯示為塊級(jí)元素，元素前后會(huì)帶有換行符。
.inline	display:inline	設(shè)置元素顯示為行內(nèi)（內(nèi)聯(lián)）元素，元素前后沒(méi)有換行符。
.inline-block	display:inline-block	設(shè)置元素顯示為內(nèi)聯(lián)塊級(jí)元素（行內(nèi)塊元素）
.flow-root	display:flow-root	設(shè)置元素顯示為塊級(jí)元素并創(chuàng)建BFC塊級(jí)格式化上下文
.flex	display:flex;	設(shè)置元素顯示為塊級(jí)彈性盒子容器
.inline-flex	display:inline-flex;	設(shè)置元素顯示為行內(nèi)彈性盒子容器
.grid	display:grid;	設(shè)置元素顯示為柵格容器
.inline-grid	display:inline-grayd;	設(shè)置元素顯示為行內(nèi)柵格容器
.hidden	隱藏顯示區(qū)域

塊級(jí)元素（block）

塊級(jí)元素獨(dú)占一行，且盡可能撐滿(mǎn)父級(jí)元素的寬度。
快積元素默認(rèn)寬度為父元素寬度的100%
塊級(jí)元素即可容納內(nèi)聯(lián)元素也可容納塊級(jí)元素
常見(jiàn)塊級(jí)元素包括div、h1~h6、p、hr、ol、ul

block

<link  rel="stylesheet">

<div class="bg-gray-200 p-4">
  <span class="block text-center text-gray-700 bg-gray-400 px-4 py-2">1</span>
  <span class="block text-center text-gray-700 bg-gray-400 px-4 py-2 mt-2">2</span>
  <span class="block text-center text-gray-700 bg-gray-400 px-4 py-2 mt-2">3</span>
</div>

內(nèi)聯(lián)元素（inline）

非塊級(jí)元素均為內(nèi)聯(lián)元素，內(nèi)聯(lián)元素只能容納文本或內(nèi)聯(lián)元素。
常見(jiàn)內(nèi)聯(lián)元素包括strong、em、s、u、a、span、img、input...
內(nèi)聯(lián)元素默認(rèn)大小是不可控制的，內(nèi)聯(lián)元素不可以設(shè)置width和height。
內(nèi)聯(lián)元素默認(rèn)與其它內(nèi)聯(lián)元素在一行上，相鄰內(nèi)聯(lián)元素不換行，寬度即為內(nèi)容寬度。
內(nèi)聯(lián)元素padding在4個(gè)方向上都有效，內(nèi)聯(lián)元素margin只在水平方向有效。

inline

<link  rel="stylesheet">

<div class="bg-gray-200 p-4">
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">1</div>
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">2</div>
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">3</div>
</div>

行內(nèi)塊級(jí)元素（inline-block）

inline-block元素結(jié)合行內(nèi)和塊級(jí)的優(yōu)點(diǎn)，即可設(shè)置width和height，又讓padding和margin生效，也可和其它行內(nèi)元素并排顯示。
vertical-align屬性會(huì)影響到inline-block元素
若HTML代碼中元素之間存在空格，則inline-block元素之間會(huì)產(chǎn)生間隙。
inline-block元素是將對(duì)象呈現(xiàn)為inline對(duì)象，對(duì)象內(nèi)容則作為block對(duì)象顯示。

inline-block

<link  rel="stylesheet">

<div class="bg-gray-200">
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

帶BFC的塊級(jí)元素（flow-root）

<link  rel="stylesheet">

<div class="flow-root bg-gray-400">
  <div class="block my-4 px-4 py-2 bg-gray-500 text-center text-gray-700">1</div>
</div>
<div class="flow-root bg-gray-200">
  <div class="block my-4 px-4 py-2 bg-gray-400 text-center text-gray-700">2</div>
</div>

flow-root

彈性盒子容器（flex）

<link  rel="stylesheet">

<div class="flex bg-gray-200">
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">1</div>
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">2</div>
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">3</div>
</div>

flex

行內(nèi)彈性盒子容器（inline-flex）

<link  rel="stylesheet">

<div class="inline-flex bg-gray-200">
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">1</div>
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">2</div>
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">3</div>
</div>

inline-flex

柵格容器（grid）

<link  rel="stylesheet">

<div class="grid gap-4 grid-cols-3 bg-gray-200 text-center">
  <div class="bg-gray-400 p-4">1</div>
  <div class="bg-gray-400 p-4">2</div>
  <div class="bg-gray-400 p-4">3</div>
  <div class="bg-gray-400 p-4">4</div>
  <div class="bg-gray-400 p-4">5</div>
  <div class="bg-gray-400 p-4">6</div>
  <div class="bg-gray-400 p-4">7</div>
</div>

grid

浮動(dòng)（float）

CSS標(biāo)準(zhǔn)文檔流在正常情況下，頁(yè)面總是從左向右、從上向下布局的。浮動(dòng)屬性可以打破標(biāo)準(zhǔn)文檔流默認(rèn)的布局從而實(shí)現(xiàn)特殊的布局。浮動(dòng)會(huì)讓塊級(jí)元素脫離文檔流，漂浮在文檔流之上，因此和文檔流并不處于同一個(gè)層次。

CSS的float浮動(dòng)屬性用于設(shè)置元素水平向左或向右移動(dòng)，其周?chē)赝瑫r(shí)會(huì)自動(dòng)排列。浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到其外邊緣觸碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。浮?dòng)元素之后的元素將圍繞它，浮動(dòng)元素之前的元素將不受影響。

浮動(dòng)設(shè)計(jì)的初衷并不是用來(lái)布局的，而僅僅是為了實(shí)現(xiàn)圖片文字環(huán)繞效果，即圖片做浮動(dòng)，文字環(huán)繞圖片。

當(dāng)元素設(shè)置浮動(dòng)屬性后，會(huì)表現(xiàn)出如下特性：

破壞文檔流
浮動(dòng)屬性的本質(zhì)是用來(lái)破壞文檔流，因此設(shè)置元素浮動(dòng)屬性后會(huì)導(dǎo)致父元素高度塌陷。
包裹性
包裹性包含包裹和自適應(yīng)兩個(gè)特征

包裹是指若浮動(dòng)元素的子元素寬度足夠小，則父級(jí)浮動(dòng)元素寬度就是子元素的寬度。
自適應(yīng)是指若浮動(dòng)元素的父元素已設(shè)置寬度且浮動(dòng)元素的子元素寬度超出父元素，則浮動(dòng)元素寬度最終會(huì)表現(xiàn)為父元素的寬度。

BFC 塊狀格式化上下文
當(dāng)元素設(shè)置了浮動(dòng)屬性，其display顯示屬性最終值會(huì)表現(xiàn)為block或table。
margin合并失效
元素設(shè)置了浮動(dòng)屬性后會(huì)自動(dòng)形成BFC，因此也就沒(méi)有margin合并的效果。
行盒和浮動(dòng)元素不可重疊性
行框盒子和浮動(dòng)元素不會(huì)發(fā)生重疊

類(lèi)名	屬性	描述
.clearfix	&::after{content:""; display:table; clear:both;}	清除浮動(dòng)
.float-none	float:none;	浮動(dòng)默認(rèn)值，設(shè)置元素不浮動(dòng)。
.float-left	float:left;	設(shè)置元素向左浮動(dòng)
.float-right	float:right;	設(shè)置元素向右浮動(dòng)

左浮動(dòng)（float-left）

使用.float-left工具類(lèi)將元素浮動(dòng)到父級(jí)容器的最左端

<link  rel="stylesheet">

<div class="container mx-auto p-4 bg-gray-200 overflow-hidden">
  <img src="http://source.unsplash.com/300x300" class="float-left mr-4 my-2 h-32"/>
  <p>使用左浮動(dòng)將元素浮動(dòng)到父級(jí)容器的左邊</p>
</div>

為了避免float屬性帶來(lái)父容器container高度塌陷，父容器添加了overflow-hidden將其轉(zhuǎn)換成BFC以解決這個(gè)問(wèn)題。

float-left

右浮動(dòng)（float-right）

<link  rel="stylesheet">

<div class="container mx-auto my-4 p-4 bg-gray-200 overflow-hidden">
  <img src="http://source.unsplash.com/100x100" class="float-right ml-4"/>
  <p class="overflow-hidden">設(shè)置元素右浮動(dòng)將其浮動(dòng)到父級(jí)容器的右端設(shè)置元素右浮動(dòng)將其浮動(dòng)到父級(jí)容器的右端設(shè)置元素右浮動(dòng)將其浮動(dòng)到父級(jí)容器的右端</p>
</div>

float-right

不浮動(dòng)（float-none）

使用.float-none工具類(lèi)可重置元素的float屬性為默認(rèn)的none即不發(fā)生浮動(dòng)。

清除浮動(dòng)（clear）

類(lèi)名	屬性	描述
.clear-left	clear:left;	清除左浮動(dòng)
.clear-right	clear:right;	清除右浮動(dòng)
.clear-both	clear:both;	清除左右浮動(dòng)
.clear-none	clear:none;	不清除浮動(dòng)

可替換對(duì)象（replaced object）

可替換元素縮放方式（object fit）

類(lèi)名	屬性	描述
.object-fill	object-fit:fill;	填充，拉伸
.object-contain	object-fit:contain;	包含，縮放
.object-cover	object-fit:cover;	覆蓋，裁剪
.object-none	object-fit:none;	原樣
.object-scale-down	object-fit:scale-down;	降低，none與contain看誰(shuí)小

可替換元素定位方式（object position）

類(lèi)名	屬性	描述
.object-bottom	object-position:bottom;	底部
.object-center	object-position:center;	居中
.object-left	object-position:left;	左側(cè)
.object-left-bottom	object-position:left bottom;	左下角
.object-left-top	object-position:left top;	左上角
.object-right	object-position:right;	右側(cè)
.object-right-bottom	object-position:right bottom;	右下角
.object-right-top	object-position:right top;	右上角
.object-top	object-position:top;	頂部

object-position

<link  rel="stylesheet">
<div class="container mx-auto my-4 p-4 bg-gray-200 grid grid-cols-3 gap-4">
  <div class="bg-black text-white text-center">
    left-top
    <img src="http://source.unsplash.com/100x100" class="object-left-top object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    top
    <img src="http://source.unsplash.com/100x100" class="object-top object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    right-top
    <img src="http://source.unsplash.com/100x100" class="object-right-top object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    left
    <img src="http://source.unsplash.com/100x100" class="object-left object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    center
    <img src="http://source.unsplash.com/100x100" class="object-center object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    right
    <img src="http://source.unsplash.com/100x100" class="object-right object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    left-bottom
    <img src="http://source.unsplash.com/100x100" class="object-left-bottom object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    bottom
    <img src="http://source.unsplash.com/100x100" class="object-bottom object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    right-bottom
    <img src="http://source.unsplash.com/100x100" class="object-right-bottom object-none bg-gray-400 h-48 w-full"/>
  </div>
</div>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

CSS Tailwind

CSS Tailwind

安裝

特性

核心

實(shí)用為主（Utility-First）

自適應(yīng)設(shè)計(jì)（Responsive Design）

移動(dòng)優(yōu)先（Mobile First）

偽類(lèi)變量（Pseudo-Class Variants）

基礎(chǔ)樣式（base）

布局（layout）

容器（container）

盒模型（box sizing）

包含邊框和內(nèi)邊距的盒模型（border-box）

不包含邊框和內(nèi)邊距的盒模型（content-box）

顯示框（display）

塊級(jí)元素（block）

內(nèi)聯(lián)元素（inline）

行內(nèi)塊級(jí)元素（inline-block）

帶BFC的塊級(jí)元素（flow-root）

彈性盒子容器（flex）

行內(nèi)彈性盒子容器（inline-flex）

柵格容器（grid）

浮動(dòng)（float）

左浮動(dòng)（float-left）

右浮動(dòng)（float-right）

不浮動(dòng)（float-none）

清除浮動(dòng)（clear）

可替換對(duì)象（replaced object）

可替換元素縮放方式（object fit）

可替換元素定位方式（object position）

溢出（overflow）

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS Tailwind

安裝

特性

核心

實(shí)用為主（Utility-First）

自適應(yīng)設(shè)計(jì)（Responsive Design）

移動(dòng)優(yōu)先（Mobile First）

偽類(lèi)變量（Pseudo-Class Variants）

基礎(chǔ)樣式（base）

布局（layout）

容器（container）

盒模型（box sizing）

包含邊框和內(nèi)邊距的盒模型（border-box）

不包含邊框和內(nèi)邊距的盒模型（content-box）

顯示框（display）

塊級(jí)元素（block）

內(nèi)聯(lián)元素（inline）

行內(nèi)塊級(jí)元素（inline-block）

帶BFC的塊級(jí)元素（flow-root）

彈性盒子容器（flex）

行內(nèi)彈性盒子容器（inline-flex）

柵格容器（grid）

浮動(dòng)（float）

左浮動(dòng)（float-left）

右浮動(dòng)（float-right）

不浮動(dòng)（float-none）

清除浮動(dòng)（clear）

可替換對(duì)象（replaced object）

可替換元素縮放方式（object fit）

可替換元素定位方式（object position）

溢出（overflow）

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av