Category: Front-End CSS

網頁css一些技巧提醒, 備忘錄

CSS-Flex內層、外層

https://x-team.com/blog/css-grid-vs-flexbox/

參考資料:

https://sharkcoder.com/layout/flexbox

當你開始寫CSS 的時候, 你會知道… 層級概念

換句話說:

外層(父層) :

決定軸方向、Flex 的方式

內層(子層) :

內部屬性調整

外層_Container

HTML 文本

將<div> 分隔標籤寫出來，方便接下來做外層的演示。

<body>
    <div class="container">

        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        
        </div>
</body>

CSS 裝飾語言

.container{
    display: flex;
    background: greenyellow;
    width: 1000px;
    margin: 0 auto;
    padding: 50px;
  }

外層Contianer 結果顯示

內層_Item

CSS 裝飾語言

.container{
    display: flex;
    background: greenyellow;
    width: 1000px;
    margin: 0 auto;
    padding: 50px;
  }

  .item{
    background: red;
    font-size: 30px;
    width: 600px;
    text-align: center;
    margin: 10px;
  }

內層Item 結果顯示

January 17, 2023

CSS-Align Item 對齊標籤內容

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>
  <li><a href="#">娛樂</a></li>
  <li><a href="#">論壇</a></li>
  <li><a href="#">財經</a></li>
  <li><a href="#">運動</a></li>
</ul>

CSS 裝飾語言

.menu{
    display: flex;
    background: greenyellow;
    width: 1000px;
    margin: 0 auto;
    padding: 50px;

    flex-direction:column;
    justify-content:flex-start;
    flex-wrap: nowrap;

    align-items:center;
  }


  .menu li{
    background: rgb(31, 161, 231);
    font-size: 30px;
    width: 600px;
    text-align: center;
    margin: 10px;
  }

  .menu li a{
    margin: 6px;
    display: block;
    background: #4a4afc;
    padding-top: 5px;
    padding-bottom: 10px;
    text-decoration: none;
    color: #FFFFFF;
  }
  .menu li a:hover{
    background: #6A6AFF;  
    color: #ADADAD;
   }

演示結果

September 21, 2022

CSS-決定主軸對齊方式/Justify-content

給於肝肝工程師小額捐款'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 html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="CSS/Flex-justify-content.css">
    <title>Flex-Direction </title>
</head>


<body>

    <div class="container">

        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>

    </div>

</body>

</html>

CSS_Ver1.0

.container {
    display: flex;
    width: auto;
    height: auto;
    background-color: blue;

    flex-direction:row;  
}

.item {
    width: 150px;
     height: 50px;

    background: #00ffa2;
    color: #033b56;
    font-style: initial;
    text-align: center;
    font-size: 35px;

}

Flex-direction =row >> 從左到右

來看看Justify-Content

space-between 方法

CSS_Ver2.0

.container {
    display: flex;
    width: auto;
    height: auto;
    background-color: blue;

    flex-direction:row;  
    justify-content:space-between;
}

.item {
    width: 150px;
     height: 50px;

    background: #00ffa2;  
    color: #033b56;
    font-style: initial;
    text-align: center;
    font-size: 35px;

}

flex-start 方法

CSS_Ver3.0

.container {
    display: flex;
    width: auto;
    height: auto;
    background-color: blue;

    flex-direction:row;  
    justify-content:flex-start;
}

.item {
    width: 150px;
     height: 50px;

    background: #00ffa2;  
    color: #033b56;
    font-style: initial;
    text-align: center;
    font-size: 35px;

}

其實就是保持flex 效果的原狀態。

結語
在測試順序上, 我們大多從Flex-direction 開始定義
之後再去調整Justify-content, 藉此調整主軸排列方式。
有順序概念會比較不容易搞混!

August 31, 2022

CSS-主軸Flex -direction
在看Flex-direction的同時, 我們必須先搞清楚 2個Keyword
- 主軸
- 交錯軸
參考資料: 六角學院

主軸

交錯軸

交錯軸: 與主軸垂直的軸

交錯軸之後會再來談談!

(主軸)Flex-Direction

Row方向

row的意思: 由左往右排列

Row-reverse 方向

顧名思義: 將Row的順序反過來排列

Column方向

意思就是: 由上到下的排列

Column-reverse

顧名思義: 將Column順序反過來排列

總結
本節主要是先讓你看過範例知道
主軸在Flex排列裡面扮演的角色
接下來將會介紹
Justify-content/決定主軸對齊方式。
July 31, 2022
CSS-Margin & Padding
控制視窗與Stack之間的Layout邊界屬性
```
給於肝肝工程師小額捐款: ETH/ERC20
```
在我們剛開始寫CSS 的時候,我常常把Margin 與Padding 搞混

藉由這次機會, 我在這邊隨手做紀錄一下。

首先, 這張圖片裡面, 各種結構+屬性關係先弄熟!

參考: Margin and Padding – Xamarin | Microsoft Docs

範例測試

HTML

先用2個 Block 去強化這個概念

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<link rel=”stylesheet” href=”CSS/BoxModel.css”>

<script src=”JS/undefined_Notdefined.js”></script>

<title>BoxModel</title>

</head>

<body>

<h1>實作盒模型</h1>

<div class =”box 1″>

<p>

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</div>

<div class =”box 2″>

<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis

aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint

occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</body>

</html>

CSS

.box {

display: inline-block;

width: 300px;

height: 300px;

background: black;

margin-top:20px ;

margin-left: 20px;

margin-bottom: 30px;

margin-right:30px;

font-size:25px;

color: azure;

padding: 70PX;

border: 25px solid rgb(243, 18, 18)

}

CSS_用Margin 來玩玩

Margin-top

接下來, 我們將Margin-top = 20px 顯示出來

CSS_Margin-left

Margin-left =20px

意思是指:

以每個Stack (每個box 1, box 2)為主的邊界, 向右邊推20px。

CSS_Padding 傻傻搞不清楚?

1.若你的元素<div class=box > = Stack 並沒有去限制 width的話 : 就可以用padding 向外推出去。
- 有時候不一定要將Stack. width限制常數, 可以善用padding向外部推喔。
2.反之, padding 加大的話, 會怎麼樣??

Stack. width沒有限制常數
```
{box padding =0px
```
```
{box padding=70px
```
你會發現, <p>元素與border之間的空間變大了

這個時候要請出排版結構圖 (汗

Stack. width有限制常數情況下
```
container.width= 400px
```
讓我們把box.padding數值改成 120px 試試看。
```
box.padding=120px
```
結果: box.Padding 仍可以把Stack 向外推!

結論

這個部分, 是對於我這個一邊工作一邊紀錄的金魚腦

很難短時間記清楚這些東西, 所下得一些功夫+解析

程式難在於…. 每個領域的用途差之甚遠

希望有看到這篇文章的各位有所幫助!
July 31, 2022
CSS-Flex 初步試探

Front-end Notes

CSS Flex 一開始只要記住一點!

display:flex 這一定要宣告

HTML

<body>

<div class="container">

<div class="item item1">1</div>

<div class="item item2">2</div>

<div class="item item3">3</div>

</div>

</body>

CSS-Container 層

display: flex;

width:auto

height: 100px;

background-color: blue;

margin-top: 15px;

margin-bottom: 15px;

margin-left: 15px;

margin-right: 15px;

/* padding 指的是在container方框裡面, 向內縮小內容的px */

padding: 20px;

flex-direction: row ( 主軸排列方向 ) 放向 由左到右

CSS-item 層

item 子層樣式若要統一的話

width:150px ;

height:90px;

background: #00ffa2;

color: #033b56;

font-style: initial;

text-align: center;

font-size: 35px;

margin:10px auto;

margin-top: 10px;

margin-bottom: 15px;

margin-left: 10px;

margin-right:10px;

畫面顯示結果如下

July 23, 2022