建站
咨詢
售后
建站咨詢
新聞中心
現(xiàn)代 CSS 布局允許開(kāi)發(fā)人員只需敲擊幾下鍵盤(pán)即可編寫(xiě)有意義且強(qiáng)大的樣式規(guī)則。今天的內(nèi)容主要是想和大家分享 10 個(gè)功能強(qiáng)大的 CSS 布局，它們做了一些非凡的工作。
成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供白云網(wǎng)站建設(shè)、白云做網(wǎng)站、白云網(wǎng)站設(shè)計(jì)、白云網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、白云企業(yè)網(wǎng)站模板建站服務(wù)，10多年白云做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
01. Super center: place-items: center
對(duì)于我們的第一個(gè)“單行”布局，讓我們解決 CSS 中最大的謎團(tuán)：居中。我想讓你知道，使用 place-items: center 比你想象的更容易。
首先，指定 grid 作為顯示方式，然后，在同一個(gè)元素上寫(xiě)上 place-items: center 。place-items 是同時(shí)設(shè)置align-items 和justify-items 的快速方法。通過(guò)將其設(shè)置為居中，align-items 和 justify-items 都將設(shè)置為居中。
.parent {
display: grid;
place-items: center;
}這使得內(nèi)容可以在父級(jí)中完美居中，無(wú)論內(nèi)部大小如何。
02.解構(gòu)布局：flex:
這是營(yíng)銷網(wǎng)站的常見(jiàn)布局，例如，可能有一行 3 個(gè)項(xiàng)目，通常帶有圖像、標(biāo)題，然后是一些描述產(chǎn)品某些功能的文本。在移動(dòng)設(shè)備上，我們希望它們能夠很好地堆疊并隨著屏幕尺寸的增加而縮放。
通過(guò)使用Flexbox來(lái)實(shí)現(xiàn)這種效果，當(dāng)屏幕尺寸變化時(shí)，你不需要使用媒體查詢來(lái)調(diào)整這些元素的位置。
flex 的縮寫(xiě)：flex:
因此，如果您希望框填充到其
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}如果您確實(shí)希望框在換行到下一行時(shí)拉伸并填充空間，請(qǐng)將
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}現(xiàn)在，當(dāng)您增大或減小屏幕尺寸時(shí)，這些彈性項(xiàng)目會(huì)縮小和增大。
03. 側(cè)邊欄布局：grid-template-columns: minmax( , ) …)
該演示利用 minmax 函數(shù)進(jìn)行網(wǎng)格布局。我們?cè)谶@里所做的是將最小側(cè)邊欄尺寸設(shè)置為 150px，但在較大的屏幕上，讓它拉伸 25%。側(cè)邊欄將始終占據(jù)其父級(jí)水平空間的 25%，直到 25% 變得小于 150px。
添加以下值作為 grid-template-columns 的值：minmax(150px, 25%) 1fr 。第一列中的項(xiàng)目（在本例中為側(cè)邊欄）的 minmax 為 150px（占 25%），第二列中的項(xiàng)目（此處為主要部分）作為單個(gè) 1fr 軌道占據(jù)剩余空間。
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}04.煎餅堆棧布局：grid-template-rows: auto 1fr auto
與 Deconstructed Pancake 不同，此示例在屏幕尺寸更改時(shí)不包含其子元素。
這種布局通常稱為粘性頁(yè)腳，通常用于網(wǎng)站和應(yīng)用程序、跨多個(gè)移動(dòng)應(yīng)用程序（頁(yè)腳通常是工具欄）和網(wǎng)站（單頁(yè)應(yīng)用程序通常使用這種全局布局）。
將 display: grid 添加到組件將為您提供單列網(wǎng)格，但主要區(qū)域的高度僅與頁(yè)腳下方的內(nèi)容一樣高。
要使頁(yè)腳粘在底部，請(qǐng)?zhí)砑樱?/p>
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}1fr頁(yè)眉和頁(yè)腳內(nèi)容設(shè)置為自動(dòng)采用其子級(jí)的大小并將剩余空間（1fr）應(yīng)用于主區(qū)域，而自動(dòng)調(diào)整大小的行將采用其子級(jí)最小內(nèi)容的大小，以便內(nèi)容大小增加，行自身會(huì)調(diào)整。
05.經(jīng)典的圣杯布局：grid-template: auto 1fr auto / auto 1fr auto
對(duì)于經(jīng)典的圣杯布局，有頁(yè)眉、頁(yè)腳、左側(cè)邊欄、右側(cè)邊欄和主要內(nèi)容。與之前的布局類似，但現(xiàn)在帶有側(cè)邊欄！
要在一行代碼中編寫(xiě)整個(gè)網(wǎng)格，請(qǐng)使用 grid-template 屬性。這允許您同時(shí)設(shè)置行和列。
屬性和值對(duì)是：grid-template: auto 1fr auto / auto 1fr auto 。第一個(gè)和第二個(gè)空格分隔列表之間的斜杠是行和列之間的分隔符。
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}與前面的示例一樣，頁(yè)眉和頁(yè)腳具有自動(dòng)調(diào)整大小的內(nèi)容，這里左側(cè)邊欄和右側(cè)邊欄根據(jù)其子項(xiàng)的固有大小自動(dòng)調(diào)整大小。但是，這次尺寸是水平（寬度）而不是垂直（高度）。
06. 12 跨網(wǎng)格：grid-template-columns：repeat(12, 1fr)
接下來(lái)我們有另一個(gè)經(jīng)典的布局：12 跨網(wǎng)格。您可以使用repeat()函數(shù)在CSS中快速編寫(xiě)網(wǎng)格。使用重復(fù)(12, 1fr); 在網(wǎng)格模板列上，每個(gè) 1fr 將為您提供 12 列。
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}現(xiàn)在您已經(jīng)有了 12 列的軌道網(wǎng)格，我們可以將子項(xiàng)放置在網(wǎng)格上。一種方法是使用網(wǎng)格線來(lái)放置它們。例如，grid-column: 1 / 13 將從第一行到最后一行（第 13 行）跨越 12 列。網(wǎng)格列：1 / 5；將跨越前四列。
另一種方法是使用 span 關(guān)鍵字。使用跨度，您可以設(shè)置一條起始線，然后，設(shè)置從該起始點(diǎn)跨越的列數(shù)。
在這種情況下， grid-column: 1 / span 12 將相當(dāng)于 grid-column: 1 / 13 ，而 grid-column: 2 / span 6 將相當(dāng)于 grid-column: 2 / 8 。
.child-span-12 {
grid-column: 1 / span 12;
}07. RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(
對(duì)于第七個(gè)示例，結(jié)合您已經(jīng)知道的一些概念來(lái)創(chuàng)建具有自動(dòng)放置和靈活子項(xiàng)的響應(yīng)式布局。漂亮又整潔。
這里要記住的關(guān)鍵點(diǎn)是repeat、auto-(fit|fill)和minmax()’，記住它們的縮寫(xiě)RAM。
簡(jiǎn)而言之，應(yīng)該是這樣的：
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}您再次使用重復(fù)，但這次使用 auto-fit 關(guān)鍵字而不是顯式數(shù)值。這會(huì)自動(dòng)放置這些子元素。
這些子元素的基本最小尺寸是 150px，最大尺寸是 1fr，這意味著在較小的屏幕上它們將占據(jù)整個(gè) 1fr 寬度，當(dāng)它們達(dá)到 150px 寬度時(shí)，它們將開(kāi)始流到同一行。
使用自動(dòng)調(diào)整功能，當(dāng)水平尺寸超過(guò) 150 像素時(shí)，框?qū)⒗煲蕴畛湔麄€(gè)剩余空間。但是，如果將其更改為自動(dòng)填充，則當(dāng)超過(guò) minmax 函數(shù)中的基本尺寸時(shí)，它們將不會(huì)拉伸：
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}08. 排列和布局：justify-content: space- Between
對(duì)于下一個(gè)布局，這里主要要注意的是 justify-content: space- Between ，它將第一個(gè)和最后一個(gè)子元素放置在其邊界框的邊緣，剩余空間均勻分布在元素之間。
對(duì)于這些卡片，它們被放置在Flexbox顯示模式下，使用flex-direction:column將方向設(shè)置為column。
這會(huì)將標(biāo)題、描述和圖像塊放置在父卡內(nèi)的垂直列中。然后，應(yīng)用 justify-content: space- Between 將第一個(gè)（標(biāo)題）和最后一個(gè)（圖像塊）元素錨定到彈性盒的邊緣，它們之間的描述性文本與每個(gè)端點(diǎn)之間的間距相等。
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}09. Keep my style: clamp( , , )
在這里，我們介紹一些僅被少數(shù)瀏覽器支持，但對(duì)布局和響應(yīng)式 UI 設(shè)計(jì)具有非常令人興奮的效果的技術(shù)。在本演示中，您將使用鉗制工具來(lái)設(shè)置寬度，如下所示：width:clamp(
這將設(shè)置絕對(duì)最小和最大尺寸以及實(shí)際尺寸。有了這些值，它應(yīng)該看起來(lái)像這樣：
.parent {
width: clamp(23ch, 60%, 46ch);
}這里的最小大小是 23ch 或 23 個(gè)字符單元，最大大小是 46ch 或 46 個(gè)字符。字符寬度單位基于元素的字體大?。ㄌ貏e是 0 字形的寬度）?！皩?shí)際”大小是 50%，表示該元素父元素寬度的 50%。
在這里，clamp() 函數(shù)的作用是保持元素 50% 寬，直到 50% 大于 46ch（在較寬的視口上）或小于 23ch（在較小的視口上）。
您可以看到，當(dāng)我拉伸和收縮父尺寸時(shí)，該卡的寬度增加到其最大限制點(diǎn)并減少到其最小限制點(diǎn)。
然后它會(huì)保持在父級(jí)的中心，因?yàn)槲覀儜?yīng)用了其他屬性來(lái)使其居中。這樣可以實(shí)現(xiàn)更清晰的布局，因?yàn)槲谋静粫?huì)太寬（超過(guò) 46ch）或太窄（小于 23ch）。
這也是實(shí)現(xiàn)響應(yīng)式排版的好方法。例如，您可以編寫(xiě)：font-size: Clip(1.5rem, 20vw, 3rem) 。在這種情況下，標(biāo)題的字體大小將始終保持在 1.5rem 和 3rem 之間，但會(huì)根據(jù)實(shí)際的 20vw 值增大和縮小以適應(yīng)視口的寬度。
這是一種很好的技術(shù)，可以確保最小和最大尺寸值的可讀性，但請(qǐng)記住，并非所有現(xiàn)代瀏覽器都支持它，因此請(qǐng)確保您有后備措施并進(jìn)行測(cè)試。
10. 保持寬高比：aspect-ratio: /
最后一個(gè)布局工具是最具實(shí)驗(yàn)性的。它最近在 Chromium 84 中被引入到 Chrome Canary 中，F(xiàn)irefox 正在積極努力實(shí)現(xiàn)這一目標(biāo)，但目前還沒(méi)有任何穩(wěn)定版本的瀏覽器。
不過(guò)，我確實(shí)想提一下這一點(diǎn)，因?yàn)檫@是一個(gè)經(jīng)常出現(xiàn)的問(wèn)題。這只是保持圖像的縱橫比。
使用縱橫比屬性，當(dāng)我調(diào)整卡片大小時(shí)，綠色視覺(jué)塊保持 16 x 9 縱橫比。我們通過(guò)縱橫比維持這個(gè)縱橫比：16 / 9。
.video {
aspect-ratio: 16 / 9;
}要在沒(méi)有此屬性的情況下保持 16 x 9 的寬高比，您需要使用 padding-top hack 并為其指定 56.25% 的填充來(lái)設(shè)置頂部與寬度的比率。
我們很快就會(huì)擁有避免黑客攻擊和計(jì)算百分比的需要的屬性。
您可以使用 1 / 1 的比例來(lái)制作正方形，使用 2 / 1 的比例來(lái)制作 2:1 的比例。可以設(shè)置任意圖像縮放比例。
.square {
aspect-ratio: 1 / 1;
}雖然此功能仍在開(kāi)發(fā)中，但值得了解，因?yàn)樗鉀Q了許多開(kāi)發(fā)人員面臨的沖突，而且我自己也遇到過(guò)很多次，特別是在視頻和 iframe 方面。
總結(jié)
最后，感謝您耐心閱讀完這 10 個(gè)強(qiáng)大的 CSS 布局知識(shí)內(nèi)容。如果想要掌握它們，還需要繼續(xù)不斷實(shí)踐它們。
文章標(biāo)題：CSS實(shí)現(xiàn)十個(gè)功能強(qiáng)大的一行布局技巧
鏈接地址：http://m.5511xx.com/article/dpdsggd.html
