網頁css一些技巧提醒, 備忘錄
https://x-team.com/blog/css-grid-vs-flexbox/ 參考資料: https://sharkcoder.com/layout/flexbox 當你開始寫CSS 的時候, 你會知道... 層級概念 換句話說: 外層(父層) : 決定軸方向、Flex 的方式 內層(子層) : 內部屬性調整 From 六角學院 外層_Container HTML 文本…
https://affinity.help/designer/en-US.lproj/index.html?page=pages/ObjectControl/align.html?title=Aligning%20objects 首先複習一下 之前都在研究Justify-content 是屬於 X軸 主軸方向。 這一篇主要講述 Y軸 也就是交錯軸! MDN_Web 演示範例 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items HTML 文本 <ul class="menu"> <li><a href="#">首頁</a></li> <li><a href="#">政治</a></li>…
給於肝肝工程師小額捐款'v': ETH/ERC20 0xd20c50c82450ee288711bf5e3f9238bc816c168a 參考資料: 六角學院 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content MDN_WEB 網站提供的測試範例 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content 複習軸軸 我們再複習一遍主軸是甚麼? 主軸方向flex-direction先確認! Row 方向 HTML 文本 我們今天更改的範圍是 : container <!DOCTYPE…
在看Flex-direction的同時, 我們必須先搞清楚 2個Keyword 主軸 交錯軸 參考資料: 六角學院 主軸 交錯軸 交錯軸: 與主軸垂直的軸 交錯軸之後會再來談談! (主軸)Flex-Direction Row方向 row的意思: 由左往右排列 Row-reverse 方向 顧名思義: 將Row的順序反過來排列…
控制視窗與Stack之間的Layout邊界屬性 給於肝肝工程師小額捐款: ETH/ERC20 在我們剛開始寫CSS 的時候,我常常把Margin 與Padding 搞混 藉由這次機會, 我在這邊隨手做紀錄一下。 首先, 這張圖片裡面, 各種結構+屬性關係先弄熟! 參考: Margin and Padding - Xamarin | Microsoft…
Front-end Notes CSS Flex 一開始只要記住一點! display:flex 這一定要宣告 HTML <body> <div class="container"> <div class="item item1">1</div>…