我喜歡移動它，移動它（第二部分）
歡迎回來！如果您每週都在關注，您可能已經注意到這個系列有短暫的休息！如果您一直有關注的話，我非常抱歉！
我的一些個人專案工作佔據了我很大一部分注意力，而且我剛結婚，所以我會以此為藉口。如果您想了解我一直在做什麼，請查看公共構建：烘焙系列，該系列記錄了我從概念到部署追蹤家庭烘焙的應用程式的過程。
好吧好吧。別再自我推銷了，讓我們繼續在螢幕上移動我們的盒子吧！
取得您的 CodePen！
就像第一部分一樣，您將能夠按照您的 CodePen 模板進行操作！如果您還沒有閱讀第 1 部分，請在此處查看。如果您需要新模板，請按一下此處。
什麼是顯示屬性？
對於顯示和位置屬性，它們似乎影響同一件事：某些內容出現在網頁上的位置。但是，它們確實有細微的差別。定位屬性控制元素在包含該元素的文件中的定位方式。要么在正常流程中，相對於其他元素，要么忽略一切！
顯示的不同之處在於它影響佈局解釋的方式：顯示類型。 CSS 的 display 屬性一開始有點麻煩，因為它不僅設定它所應用到的元素的顯示類型（外部顯示類型），而且還設定該屬性所包含的元素的顯示行為應用於（內部顯示類型）。
內聯與區塊
到目前為止，我們使用的大多數元素都有預設的區塊外部顯示類型。這意味著沒有其他元素會佔據與該元素相同的垂直空間，實際上，新增的任何新元素都會建立一個「新行」。
並非所有元素都是這樣。例如，
好吧，無論元素的預設值為何，您都可以透過設定來變更此屬性：
display: block display: inline-block
現在在您的程式碼筆中，更改 .box 規則集以使所有框並排顯示。
彈性盒和網格
對於內部顯示類型，我們還有更多關於如何放置東西的選項。我們可以將元素變成彈性盒或網格，這將影響其子元素的佈局。
顯示： 柔性
每個概念都值得用一整篇文章來闡述，但基本上，彈性框將「靈活地」定位內聯父元素中包含的元素。 Flexbox 更能適應不同的螢幕尺寸，因為它將項目相對於彼此以及包含的元素放置，而不是相對於視窗放置。
要查看實際效果，請查看 Codepen 中的 .frame 規則集。
取消註解以下程式碼行：
display: flex;
它看起來與四個內聯塊非常相似，對嗎？預設情況下，Flex 容器將其項目對齊到 Flexbox 的開頭或左側，但是，這也可以更改！
在彈性盒的聲明下方，加入以下內容：
justify-content: center;
現在我們應該會看到所有的框都出現在螢幕中間！
但是，如果我們不希望它們像那樣被困在頂部怎麼辦？我們也加入：
align-items: center;
太棒了！
顯示：網格
注意：在 CodePen 中繼續操作之前，請確保註解掉或刪除包含 display: flex 以及您新增的 justify-content 或align-items 屬性的行。
除了彈性盒之外，我們還可以選擇將整個元素變成網格，我們可以在其中放置項目！
我不會在這裡詳細介紹此程式碼的細節，但知道可以透過將元素聲明為網格、提供網格模板然後將項目放置在網格中來實現！
取消.frame規則集中以下行的註解！
display: grid; grid-template: 1fr 1fr / 1fr 1fr; align-items: center; justify-items: center;
現在，您應該看到每個框都位於框架象限的中心！
使用你新發現的技能！
與上一篇文章一樣，這裡有一系列挑戰。 在嘗試之前，您需要刪除或重新註釋建立網格佈局的程式碼行！
挑戰 #1： 在 MDN 中搜尋正確的 justify-content 屬性，以便在水平面上均勻地顯示每個區塊，而不接觸側面和垂直中心，如下圖所示。
挑戰#2：仍然在彈性容器中，看看您是否可以將所有盒子組合在一起並將它們放在右下角！ （您需要為此調整哪些屬性？）
挑戰#3：你能找到一個可以反轉元素顯示順序的 flex 屬性嗎？
恭喜您完成這些挑戰！下週見，了解更多 HTML 和 CSS！
以上是我喜歡移動它，移動它（第二部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
什麼是'渲染障礙CSS”？
Jun 24, 2025 am 12:42 AM
CSS會阻塞頁面渲染是因為瀏覽器默認將內聯和外部CSS視為關鍵資源，尤其是使用引入的樣式表、頭部大量內聯CSS以及未優化的媒體查詢樣式。 1.提取關鍵CSS並內嵌至HTML；2.延遲加載非關鍵CSS通過JavaScript；3.使用media屬性優化加載如打印樣式；4.壓縮合併CSS減少請求。建議使用工具提取關鍵CSS，結合rel="preload"異步加載，合理使用media延遲加載，避免過度拆分與復雜腳本控制。
什麼是AutoPrefixer，它如何工作？
Jul 02, 2025 am 01:15 AM
Autoprefixer是一個根據目標瀏覽器範圍自動為CSS屬性添加廠商前綴的工具。 1.它解決了手動維護前綴易出錯的問題；2.通過PostCSS插件形式工作，解析CSS、分析需加前綴的屬性、依配置生成代碼；3.使用步驟包括安裝插件、設置browserslist、在構建流程中啟用；4.注意事項有不手動加前綴、保持配置更新、非所有屬性都加前綴、建議配合預處理器使用。
什麼是圓錐級函數？
Jul 01, 2025 am 01:16 AM
theconic-Gradient（）functionIncsscreatesCircularGradientsThatRotateColorStopSaroundAcentralPoint.1.IsidealForPieCharts，ProgressIndicators，colordichers，colorwheels和decorativeBackgrounds.2.itworksbysbysbysbydefindefingincolordefingincolorstopsatspecificains off.
CSS教程，用於創建粘性標頭或頁腳
Jul 02, 2025 am 01:04 AM
TocreatestickyheadersandfooterswithCSS,useposition:stickyforheaderswithtopvalueandz-index,ensuringparentcontainersdon’trestrictit.1.Forstickyheaders:setposition:sticky,top:0,z-index,andbackgroundcolor.2.Forstickyfooters,betteruseposition:fixedwithbot
CSS自定義屬性的範圍是什麼？
Jun 25, 2025 am 12:16 AM
CSS自定義屬性的作用域取決於其聲明的上下文，全局變量通常定義在:root中，而局部變量則定義在特定選擇器內，以便組件化和隔離樣式。例如，定義在.card類中的變量僅對匹配該類的元素及其子元素可用。最佳實踐包括：1.使用:root定義全局變量如主題色；2.在組件內部定義局部變量以實現封裝；3.避免重複聲明同一變量；4.注意選擇器特異性可能引發的覆蓋問題。此外，CSS變量區分大小寫，且應在使用前定義以避免錯誤。若變量未定義或引用失敗，則會採用回退值或默認值initial。調試時可通過瀏覽器開發者工
CSS教程專注於移動優先設計
Jul 02, 2025 am 12:52 AM
Mobile-firstCSSdesignrequiressettingtheviewportmetatag,usingrelativeunits,stylingfromsmallscreensup,optimizingtypographyandtouchtargets.First,addtocontrolscaling.Second,use%,em,orreminsteadofpixelsforflexiblelayouts.Third,writebasestylesformobile,the
CSS教程，用於創建加載旋轉器和動畫
Jul 07, 2025 am 12:07 AM
創建CSS加載旋轉器的方法有三種：1.使用邊框的基本旋轉器，通過HTML和CSS實現簡單動畫；2.使用多個點的自定義旋轉器，通過不同延遲時間實現跳動效果；3.在按鈕中添加旋轉器，通過JavaScript切換類來顯示加載狀態。每種方法都強調了設計細節如顏色、大小、可訪問性和性能優化的重要性，以提升用戶體驗。
如何創建本質上響應的網格佈局？
Jul 02, 2025 am 01:19 AM
要創建內在響應式網格佈局，核心方法是使用CSSGrid的repeat(auto-fit,minmax())模式；1.設置grid-template-columns:repeat(auto-fit,minmax(200px,1fr))讓瀏覽器自動調整列數並限制每列最小和最大寬度；2.使用gap控制格子間距；3.容器應設為相對單位如width:100%、配合box-sizing:border-box避免寬度計算錯誤並用margin:auto居中；4.可選設置行高與內容對齊方式提升視覺一致性，如row
