亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

目錄
> CSS網格本質上反應靈敏，可以使用最小的媒體查詢對不同屏幕尺寸的內容進行輕松重組。
計劃網格
>頁腳
>讓我們從大屏幕開始（在本文中，我將堅持與Bootstrap 4中定義的相同的斷點）。我想降低主容器的水平邊緣和單個贊助商之間的差距：
>在中屏幕上，我希望主內容區(qū)域和側邊欄占據所有三列：
后備
結論
>如何開始在項目中使用CSS網格改造？
是的，可以將CSS網格改造與其他布局方法（如Flexbox）結合使用，例如Flexbox，以進行更復雜的設計。當您要創(chuàng)建一個部分靈活且部分固定的布局時，這可能特別有用。改造包括使用命名網格區(qū)域，以更容易布局管理，使用FR單元進行靈活的網格軌道以及在瀏覽器的開發(fā)人員工具中使用網格檢查器可視化和調試網格布局。
是的，是的，CSS Grid Raturofit是一個二維系統(tǒng)，是二維系統(tǒng)，這意味著它可以處理列和行。這使其成為創(chuàng)建水平和垂直布局的多功能工具。
首頁 web前端 css教程 重新設計站點以使用CSS網格布局

重新設計站點以使用CSS網格布局

Feb 15, 2025 am 08:45 AM

重新設計站點以使用CSS網格布局

在本文中，我們將通過創(chuàng)建響應迅速的多列網站布局來查看CSS電網。 如今，CSS網格是網絡開發(fā)的新趨勢。忘了桌子布局和浮點：設計網站的新方法已經在這里！這項技術引入了二維網格，該網格定義了使用少數CSS規(guī)則的布局多個區(qū)域。

>網格可以制造第三方框架，例如960GS或Bootstrap Grid冗余，因為您可以輕松地自己完成所有操作！盡管Internet Explorer實現了規(guī)格的較舊版本，但此功能都得到了所有主要瀏覽器的支持。

>

如果您是網格布局的新手，請查看我們的初學者指南CSS網格指南。

鑰匙要點

> css網格布局簡化了多列布局的創(chuàng)建，消除了對諸如浮子和顯示桌子之類的舊技術的需求。> 與傳統(tǒng)的CSS框架（如Bootstrap）相比

CSS網格的實現涉及定義一個具有顯示的容器：網格，設置列和行，并使用簡單的CSS規(guī)則將元素放入指定的網格區(qū)域。

> CSS網格本質上反應靈敏，可以使用最小的媒體查詢對不同屏幕尺寸的內容進行輕松重組。

對于不完全支持CSS網格的瀏覽器，例如Internet Explorer，使用內聯塊和媒體查詢的后備樣式可確保布局仍然有效地呈現。
    > CSS網格和Flexbox可以合并以滿足復雜的設計要求，展示CSS電網在現代網絡設計中的兼容性和多功能性。
    • 我們要構建的
    • 因此，我們被要求創(chuàng)建一個典型的網站布局，其中包含標頭，主內容區(qū)域，右側側邊欄，贊助商列表和頁腳：>
    • >另一個開發(fā)人員已經嘗試解決此任務，并提出了一個涉及浮點，顯示的解決方案：表格和一些Clearfix Hacks。我們將這種現有布局稱為“初始”：>
  • 請參閱Pen SP：codepen上的sitepoint（@sitepoint）的浮子的多柱布局。
  • 直到最近，浮子被認為是創(chuàng)建這種布局的最佳選擇。在此之前，我們必須使用HTML表，但是它們有許多缺點。具體而言，此類布局非常僵化，需要大量標簽（表，TR，TD，TH等），而這些標簽則使用這些標簽來顯示表數據，而不是設計布局。

    ，但是CSS繼續(xù)發(fā)展，現在我們有了CSS網格。從概念上講，它類似于舊的表布局，但可以使用具有更靈活的布局的語義HTML元素。

    計劃網格

    首先：我們需要為文檔定義基本的HTML結構。在此之前，讓我們簡要討論最初的示例如何工作。它具有以下主要塊：

    • 。
      • .Main-Header是包含.logo（占據20％的空間，漂浮在左側的20％）和.main-menu（占據79％的空間，漂浮在右側的79％）的標題。標題還分配了一個駭客修復程序以清除浮子。
      • .content-area-wrapper包裝主.CONTENT-AREA（占據了66.6％的空間，負1REM保留了邊緣，左側漂浮在左側）和.sidebar（占據了33.3％的空間，漂浮在右邊的33.3％ ）。包裝器本身也用clearfix分配了。
      • .sponsors-wrapper包含贊助商的徽標。在內部，有一個.spors部分，其中包含顯示屬性為表。每個贊助商依次顯示為表單元格。
      • .footer是我們的頁腳，并且跨越了100％的空間。
      • 我們的新布局將與最初的布局非常相似，但是除了一個例外：我們不會添加.main-header和.content-area-area-wrapper包裝器，因為不再需要clearfix。這是html的新版本：

    請注意，您可以將身體用作全局.Container；在這種情況下，這只是偏愛的問題?？偠灾?，我們有六個主要領域：
    <span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="?">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

    徽標
    1. 菜單
    2. 主要內容
    3. sidebar
    4. 贊助商
    5. >頁腳
      7. 通常建議您實施一種移動優(yōu)先的方法。也就是說，您是從移動布局開始的，然后為大屏幕添加樣式。在這種情況下，這不是必需的，因為我們正在調整初始布局，該布局已經回到了小屏幕設備上的線性視圖。因此，讓我們首先關注電網的實現，然后再討論響應能力和后備規(guī)則。因此，返回我們的計劃，看看如何安排網格列：>

    >所以，我建議擁有三列（以紅色突出顯示）和四行（以藍色突出顯示）。某些區(qū)域（例如徽標）將僅占據一列，而其他區(qū)域（如主內容）將跨越多列。稍后，我們可以輕松修改布局，移動周圍的區(qū)域或添加新的區(qū)域。重新設計站點以使用CSS網格布局>

    遵循該方案，給每個區(qū)域一個唯一的名稱。這些將用于以下定義的布局：

    >

    >現在將顯示屬性設置為網格，定義三列，并在主容器的左側和右側添加少量邊距：

    <span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="?">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

    顯示：網格定義一個網格容器，并為其孩子設置特殊的格式上下文。 FR是一個特殊的單元，意思是“網格容器的自由空間的一部分”。 2 6 4給我們12，而6/12 = 0.5。這意味著中間的列將占據自由空間的50％。

    >

    >我也想在行之間添加一些間距：> 

    <span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>
    完成此操作，我們可以與各個領域合作。但是，在結束本節(jié)之前，讓我們快速添加一些常見的樣式：

    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
    好！現在，我們可以前往第一個目標，這將是標題。>

    設計標題

    >我們的標頭占據了第一行，該排應該將特定的高度設置為3REM。在初始布局中，通過為標頭包裝器分配高度屬性來解決：>

    >還請注意，徽標和菜單垂直與中間對齊，這是使用線路高技巧實現的：

    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

    使用CSS網格，事情將變得更簡單：我們不需要任何CSS hacks。

    <span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>
    從定義第一行開始：

    我們的徽標應僅占據一列，而菜單應跨越兩個列。我們可以借助網格 - 板序列屬性來表達我們的意圖，該屬性引用了上面分配的網格區(qū)域名稱：> 

    <span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>
    這是怎么回事？好吧，通過說徽標僅一次，我們確保它僅占用一個徽標 - 最左側的專欄。菜單菜單意味著菜單占有兩列：中間和最正確的一列。看看這個規(guī)則有多簡單！

    >

    現在，在y軸上對齊徽標：
    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>

    菜單應垂直居中并向右拉動：>

    >我們的菜單是使用UL和LI標簽構建的，因此，我們還通過刪除標記，無效的邊距/撥片并將菜單設置為Flex容器來對它們進行一些樣式。 
    <span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>

    >就是這樣。為了觀察結果，我將使用啟用方便的CSS網格熒光筆工具使用Firefox。 （對于其他瀏覽器也有類似的工具：例如，Chrome的Gridman。）要訪問此工具，請按F12并選擇.Container元素，該元素應該具有網格標簽：

    > 
    <span><span>.container</span> {
</span>  // ...
  <span>grid-template-areas:
</span>    <span>"logo menu menu";
</span><span>}
</span>

    <span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span>  <span>align-self: center;
</span><span>}
</span>
    之后，繼續(xù)進行CSS規(guī)則選項卡，并找到顯示：網格屬性。通過按在網格值旁邊的小圖標上，您可以啟用或禁用熒光筆：

    重新設計站點以使用CSS網格布局

    這是結果：

    重新設計站點以使用CSS網格布局

    熒光筆顯示您的所有行和列以及它們與區(qū)域名稱之間的邊距。您可以自定義布局部分中的輸出，該輸出還列出了頁面上的所有網格：>

    重新設計站點以使用CSS網格布局

    >所以，我們已經處理了標題，所以讓我們繼續(xù)前往主要內容區(qū)域和側邊欄。

    主內容和側邊欄

    >我們的主要內容區(qū)域應跨兩列，而側邊欄應僅占據一列。至于行，我希望它的高度自動設置。我們可以相應地更新.CONTAINER網格：

    > 

    <span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="?">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>
    >我想為側邊欄添加一些填充物，以提供更多的視覺空間：>

    這是結果，如Firefox的網格工具中所述： 
    <span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

    贊助商重新設計站點以使用CSS網格布局

    贊助商部分應包含五個具有相等寬度和高度的項目。每個項目依次都會有一個圖像。

    在初始布局中，此塊的樣式是顯示：表格，但我們不會依靠它。實際上，贊助商部分也可能是應用CSS網格的絕佳候選人！

    首先，調整網格 - 板截面以包括贊助商區(qū)域：

    現在，將.sponsors部分也變成一個網格：

    只要我們需要五個具有相等寬度的項目，重復（）函數就可以用于定義列：> 
    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
    對于行，應自動設置其高度。列之間的差距應等于1REM：

    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>
    樣式每個項目：

    <span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>
    這是中間結果：

    <span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>

    >此示例說明您可以嵌套網格而沒有任何問題。另一個解決方案可能是使用Flexbox，但是在這種情況下，如果沒有足夠的寬度，則贊助商可能會包裝。
    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>
    >

    >現在，我想將圖像垂直和水平居中。我們可能會嘗試執(zhí)行以下操作：

    重新設計站點以使用CSS網格布局位置對X和Y軸上的元素對齊。這是對自己的速記屬性和自我合理的。

    >

    圖像確實會對齊，但不幸的是，白色背景消失了。這是因為每個贊助器現在的寬度和高度等于圖像的尺寸：> 

    <span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>
    這意味著我們在這里需要另一種方法，并且可能的解決方案之一是采用flexbox：>

    現在，一切都正確顯示了，現在我們知道網格與flexbox效果很好：

    重新設計站點以使用CSS網格布局

    >頁腳

    我們的最后一部分是頁腳，實際上是最簡單的部分。我們要做的就是將其跨到所有三列：> 

    <span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="?">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>
    基本上，布局已經完成！但是，我們還沒有完成：該網站也必須響應迅速。因此，讓我們在下一節(jié)中照顧這項任務。

    >

    使布局響應

    有CSS網格，實際上很容易引入響應能力，因為我們可以快速重新定位這些區(qū)域。

    大屏幕

    >讓我們從大屏幕開始（在本文中，我將堅持與Bootstrap 4中定義的相同的斷點）。我想降低主容器的水平邊緣和單個贊助商之間的差距：

    中等屏幕
    <span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

    >在中屏幕上，我希望主內容區(qū)域和側邊欄占據所有三列：

    >還要降低字體尺寸并堆放贊助商，以便它們在另一個下方顯示。列之間的差距應為零（因為實際上只有一個列）。相反，我將在行之間設置差距：
    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>

    這是現在中屏幕上的布局外觀：
    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

    重新設計站點以使用CSS網格布局小屏幕

    >在小屏幕上，我們將在單獨的一行上顯示每個區(qū)域，這意味著現在只有一個列：>

    在這種情況下，不應將菜單拉到右側，我們也不需要列之間的差距：

    <span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>
    工作完成：

    <span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>

    請注意，您甚至可以在各種屏幕上輕松地重新排列網格項目。假設我們想將菜單放在小屏幕上的菜單（以便訪問者在頁面上完成閱讀材料后不必滾動）。為此，只需調整網格 - 板序列：

    重新設計站點以使用CSS網格布局

    在沒有媒體查詢的情況下做

    >值得一提的是，我們可以使贊助商完全不受任何媒體疑問而阻止響應。在自動擬合屬性和MinMax功能的幫助下，這是可能的。要查看它們的行動，請調整這樣的贊助商的樣式：
    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>
    >

    您已經知道，重復功能在必要時重復了多次列。

    自動填充意思是“用盡可能多的列填充行”。如果列沒有足夠的空間，則將其放置在下一行。

    > 
    <span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>
    minmax允許我們指定列寬度的最小值和最大值。在這種情況下，每列應跨越1個自由空間的一部分，但不少于200個像素。

    所有這些意味著在較小的屏幕上，列可以縮小到最多的200px。如果仍然沒有足夠的空間，則將移動一條或多個列。這是應用上述CSS規(guī)則的結果：

    重新設計站點以使用CSS網格布局

    后備

    不幸的是，所有瀏覽器尚未完全支持CSS網格，您可能會猜測哪個仍在實現規(guī)范的較舊版本。是的，它是Internet Explorer 10和11。如果您在這些瀏覽器中打開演示，您會發(fā)現網格根本不起作用，并且這些區(qū)域只是堆疊的：

    >

    重新設計站點以使用CSS網格布局

    當然，這不是世界末日，因為該網站仍然可用，但至少添加一些后備規(guī)則。好消息是，如果元素被漂浮并也已分配，則網格優(yōu)先。另外，顯示器，垂直空間和其他某些屬性也對網格項目沒有影響，因此讓我們利用這一事實。

    >堆疊的菜單看起來不錯，但是側邊欄可能應放在主要內容旁邊，而不是下面。我們可以使用顯示：inline-block：

    在所有支持網格的瀏覽器中，這些屬性都不會效果，但是在IE中，它們將按預期應用。我們需要調整的另一項屬性是寬度：

    <span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="?">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>
    >但是，添加了這些樣式后，我們的網格布局現在看起來會更糟，因為網格項目不忽略寬度屬性

    >?？梢越柚鶣supports CSS查詢來解決。 IE不了解這些查詢，但不需要：我們將使用它來修復網格！

    > 
    <span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

    現在，讓我們照顧贊助商項目，并為每個塊添加一些最高邊距：> >在支撐網格時我們不需要任何最高邊距，因此將其在@supports查詢中無效：

    > 
    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
    最后，讓我們?yōu)镮E添加一些響應能力。我們只需將主要內容，側邊欄和每個贊助商拉伸到較小屏幕上的全寬度：

    > 

    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>
    不要忘記修復支持網格的瀏覽器的贊助商的寬度：

    這是Internet Explorer中的布局外觀：> 
    <span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>

    <span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>
    您可以在Codepen上查看最終結果：

    請參閱pen sp：codepen上的sitepoint（@sitepoint）帶網格的多柱布局。
    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>

    結論

    在本文中，我們看到了CSS網格在作用中，并利用了它來重新設計現有的基于浮點的布局。比較這兩種解決方案，我們可以看到“網格”解決方案的HTML和CSS代碼較?。ó斎徊挥嬎愫髠洌?，更簡單且更具表現力。借助網格 - 板塊區(qū)域屬性，很容易理解如何布置各個區(qū)域，我們可以快速重新定位它們或調整其尺寸。最重要的是，我們不需要依靠諸如clearfix等各種駭人聽聞的技巧。

    >

    >因此，如您所見，CSS網格是浮子的絕佳選擇，并且已經準備好生產了。您可能需要為Internet Explorer提供一些后備規(guī)則（這實現了規(guī)范的較舊版本），但是如您所見，它們并不是很復雜，并且通常仍然可以使用該站點全部。

    您是否已經嘗試使用CSS網格創(chuàng)建網站？您的印象是什么？在評論中分享您的想法！

    經常詢問有關CSS電網改造的問題

    > CSS網格改造在Web設計中的重要性是什么？這是一個二維系統(tǒng)，這意味著它可以處理列和行，這與Flexbox不同，這在很大程度上是一個維系統(tǒng)。這使其成為創(chuàng)建適應不同屏幕尺寸和分辨率的響應設計的多功能工具。它還簡化了在容器中的項目中對齊和分配空間的過程，即使它們的大小是未知或動態(tài)的。由于其靈活性和易用性，改造從其他網格系統(tǒng)中脫穎而出。與其他需要大量編碼和計算的系統(tǒng)不同，CSS網格改造使開發(fā)人員可以使用最小的代碼創(chuàng)建復雜的布局。它還提供了對元素的放置和對齊的更多控制權，使其成為許多開發(fā)人員的首選選擇。

    我可以將CSS網格改造用于移動響應設計嗎？是創(chuàng)建移動響應設計的絕佳工具。它允許開發(fā)人員使用媒體查詢?yōu)椴煌钠聊怀叽缍x不同的網格布局。這意味著您可以為桌面視圖創(chuàng)建一個復雜的布局，以及用于移動視圖的更簡單，更簡化的布局，所有這些布局都在同一CSS文檔中。

    CSS Grid Retrofit的瀏覽器兼容性問題是什么？ >

    CSS網格改造與大多數現代瀏覽器兼容，包括Chrome，Firefox，Safari和Edge。但是，在較舊的瀏覽器或版本中，它可能無法正常工作。在多個瀏覽器中測試您的設計始終是一個好習慣，以確保其按預期工作。

    >如何開始在項目中使用CSS網格改造？

    >開始使用CSS網格改造，您需要將容器元素定義為帶有顯示的網格：Grid：grid。然后，您可以使用網格 - 板塊柱和網格 - 板條排定義列和行大小，并將其子元素與網格元素一起使用網格和網格 - 列和網格行。使用其他布局方法網格改造？

    是的，可以將CSS網格改造與其他布局方法（如Flexbox）結合使用，例如Flexbox，以進行更復雜的設計。當您要創(chuàng)建一個部分靈活且部分固定的布局時，這可能特別有用。改造包括使用命名網格區(qū)域，以更容易布局管理，使用FR單元進行靈活的網格軌道以及在瀏覽器的開發(fā)人員工具中使用網格檢查器可視化和調試網格布局。

    元素？

    css網格改造允許元素重疊，這可以是創(chuàng)建唯一布局的強大工具。您可以控制與z index屬性重疊元素的堆疊順序。

    我可以將CSS網格改造用于垂直布局嗎？

    是的，是的，CSS Grid Raturofit是一個二維系統(tǒng)，是二維系統(tǒng)，這意味著它可以處理列和行。這使其成為創(chuàng)建水平和垂直布局的多功能工具。

    >

    >在使用CSS網格改造時，有哪些共同挑戰(zhàn)？

    >在與CSS網格翻新時有一些共同的挑戰(zhàn)包括處理瀏覽器兼容性問題，處理重疊元素以及在許多網格區(qū)域管理復雜布局。但是，通過實踐和對網格屬性的良好理解，可以克服這些挑戰(zhàn)。

以上是重新設計站點以使用CSS網格布局的詳細內容。更多信息請關注PHP中文網其他相關文章！

本站聲明
本文內容由網友自發(fā)貢獻，版權歸原作者所有，本站不承擔相應法律責任。如您發(fā)現有涉嫌抄襲侵權的內容，請聯系admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣服圖片

Undresser.AI Undress

Undresser.AI Undress

人工智能驅動的應用程序，用于創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用于從照片中去除衣服的在線人工智能工具。

Clothoff.io

Clothoff.io

AI脫衣機

Video Face Swap

Video Face Swap

使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的代碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

功能強大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級代碼編輯軟件(SublimeText3)

熱門話題

Laravel 教程
1597
29
PHP教程
1488
72
CSS教程，用于創(chuàng)建加載旋轉器和動畫 CSS教程，用于創(chuàng)建加載旋轉器和動畫 Jul 07, 2025 am 12:07 AM

創(chuàng)建CSS加載旋轉器的方法有三種：1.使用邊框的基本旋轉器，通過HTML和CSS實現簡單動畫；2.使用多個點的自定義旋轉器，通過不同延遲時間實現跳動效果；3.在按鈕中添加旋轉器，通過JavaScript切換類來顯示加載狀態(tài)。每種方法都強調了設計細節(jié)如顏色、大小、可訪問性和性能優(yōu)化的重要性，以提升用戶體驗。

解決CSS瀏覽器兼容性問題和前綴 解決CSS瀏覽器兼容性問題和前綴 Jul 07, 2025 am 01:44 AM

處理CSS瀏覽器兼容性和前綴問題需理解瀏覽器支持差異并合理使用廠商前綴。1.了解常見問題如Flexbox、Grid支持不一，position:sticky失效，動畫表現不同；2.查閱CanIuse確認特性支持情況；3.正確使用-webkit-、-moz-、-ms-、-o-等廠商前綴；4.推薦使用Autoprefixer自動添加前綴；5.安裝PostCSS并配置browserslist指定目標瀏覽器；6.構建時自動處理兼容性；7.老項目可用Modernizr檢測特性；8.不必追求所有瀏覽器一致，確

顯示：內聯，顯示：塊和顯示：內聯塊之間有什么區(qū)別？ 顯示：內聯，顯示：塊和顯示：內聯塊之間有什么區(qū)別？ Jul 11, 2025 am 03:25 AM

Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizo??ntalpadding/margins—idealforinlinetextstyling

使用CSS剪輯路徑創(chuàng)建自定義形狀 使用CSS剪輯路徑創(chuàng)建自定義形狀 Jul 09, 2025 am 01:29 AM

使用CSS的clip-path屬性可以裁剪元素為自定義形狀，如三角形、圓形缺口、多邊形等，無需依賴圖片或SVG。其優(yōu)勢包括：1.支持circle、ellipse、polygon等多種基本形狀；2.可響應式調整，適配移動端；3.易于動畫化，可結合hover或JavaScript實現動態(tài)效果；4.不影響布局流，僅裁剪顯示區(qū)域。常見用法如圓形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意

造型與CSS不同訪問的鏈接 造型與CSS不同訪問的鏈接 Jul 11, 2025 am 03:26 AM

設置訪問過鏈接的樣式能提升用戶體驗，尤其在內容密集型網站中幫助用戶更好導航。1.使用CSS的:visited偽類可定義已訪問鏈接樣式，如顏色變化；2.注意瀏覽器出于隱私限制僅允許修改部分屬性；3.顏色選擇應與整體風格協(xié)調，避免突兀；4.移動端可能不顯示該效果，建議結合其他視覺提示如icon輔助標識。

如何使用CSS創(chuàng)建響應式圖像？ 如何使用CSS創(chuàng)建響應式圖像？ Jul 15, 2025 am 01:10 AM

要使用CSS創(chuàng)建響應式圖片，主要可通過以下方法實現：1.使用max-width:100%和height:auto讓圖片在保持比例的同時自適應容器寬度；2.結合HTML的srcset和sizes屬性智能加載適配不同屏幕的圖片源；3.利用object-fit和object-position控制圖片裁剪與焦點展示。這些方法共同確保圖片在不同設備上清晰、美觀地呈現。

揭開CSS單元的神秘面紗：PX，EM，REM，VW，VH比較 揭開CSS單元的神秘面紗：PX，EM，REM，VW，VH比較 Jul 08, 2025 am 02:16 AM

CSS單位的選擇取決于設計需求和響應式要求。1.px用于固定尺寸，適合精確控制但缺乏彈性；2.em是相對單位，受父元素影響易導致級聯問題，rem則基于根元素更穩(wěn)定，適合全局縮放；3.vw/vh基于視口大小，適合響應式設計，但需注意極端屏幕下的表現；4.選擇時應根據是否需要響應式調整、元素層級關系及視口依賴程度來決定，合理搭配使用可提升布局靈活性與維護性。

什么是常見的CSS瀏覽器不一致？ 什么是常見的CSS瀏覽器不一致？ Jul 26, 2025 am 07:04 AM

不同瀏覽器對CSS解析存在差異，導致顯示效果不一致，主要包括默認樣式差異、盒模型計算方式、Flexbox和Grid布局支持程度及某些CSS屬性行為不一致。1.默認樣式處理不一致，解決方法是使用CSSReset或Normalize.css統(tǒng)一初始樣式；2.舊版IE的盒模型計算方式不同，建議統(tǒng)一使用box-sizing:border-box；3.Flexbox和Grid在邊緣情況或舊版本中表現有差異，應多測試并使用Autoprefixer；4.某些CSS屬性行為不一致，需查閱CanIuse并提供降級

See all articles