web-3

Eating

  • 藍翊庭
  • 網頁 & Python
  • 班聯

講師

好多

  • Margin & Padding 
  • CSS 單位
  • Display 
  • Position
  • Transform
  • Flexbox
  • 反正主要是教布局
  • Can I Use

目錄

MARGIN

&

PADDING

圖片說明

元素寬度

語法說明

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

padding-top: 5px;
padding-right: 10px;
...

margin: 10px;                /* 四邊都 10px */
margin: 10px 20px;           /* 上下 10px，左右 20px */
margin: 10px 20px 30px 40px; /* 上右下左 順時針方向 */
/* padding也可以 */

語法說明

margin: 16px 18px;
padding: 8px 12px;
border: 4px solid black;
width: 320px; /*錯的!!*/
/* width 是包含了 content 和 border 的寬度*/

小技巧

margin: 10px auto;

可以置中東西

(父元素寬度確定時)

CSS Units

單位 說明 適用情況
px 最常用的東東反正就是一個像素 大小不會隨著別的東西改變：邊框粗細、線條粗細…
vw /vh  相對網頁視窗口的寬/高度，100 vw 代表跟網頁視窗口寬度相同 我要讓他填滿整個螢幕?
rem 相對 html 元素中定義的字體大小，預設 1 rem =  16 px 現代網頁最常用且推薦的單位：字體大小、區塊寬度...
% 相對父元素，像是 width:50%; 代表寬度是父元素寬度的一半 排版布局的時候常用：內外邊距、區域大小

常用四單位(我覺得常用啦

範例

100px

100%

100vw

400px

據說 px 以前是真的一像素，你用 ctrl+滾輪放大網頁他也沒用（只會放大字體）。但反正現在 px 也會跟著網頁放大了所以她跟 rem 的差別沒那麼明顯？除了某些奇怪的時刻。

範例

height: 160px;

height: 10rem;

Display 

Display 決定元素「如何呈現」以及「如何與其他元素排列」。

種類 說明
block  獨佔一行，可設定寬高、邊距，最常見? div、p、h1~h6 等等標籤預設會是這個。
none 完全消失完全不影響其他人
inline & inline-block 類似文字的排列?會與同一層的文字一起排列。span、a、img 等等標籤預設是這個。inline-block 則是在 inline 基礎上讓你可以用 Margin 這種 block 專有的屬性?
flex 好東西但有點難等下會講。

常用display(我覺得常用

範例

H1 和 p 都是 block 各占一行 / p 中的文字都是 inline 排列

全都改成 inline (所以標題的邊距失效了

範例

改成 inline-block，h1 的邊距又回來了

改成 none 就直接沒了

語法說明

display: flex;
display: none;
display: inline;
display: inline-block;
display: block;

Position

position 控制元素「如何定位」，也就是元素在頁面或父容器中的位置行為。

單位 說明
static 預設值，元素正常排列，top/right/bottom/left 無效，反正就是一個一個往下排。
relative 相對定位，可以用 top/right/bottom/left 偏移(相對自身)，跟 static 類似，但若指定 left:10px; 他會往右邊移 10px 
absolute 絕對定位，相對最近的已定位父元素 ( relative、fixed ) 定位，不會影響其他元素。
fixed 相對視窗口定位。

常用position (我覺得常用

範例

    position: absolute;
    left: 40px;
    top: 40px;
    position: relative;
    left: 20px;

relative 的元素仍佔位，但 absolute 的元素會浮起來

蠻清楚的教學

Transform

transform 對元素進行「視覺層面的變形」不改變布局不影響其他元素，效能較好用於製作動畫，其操作包含：

  • 平移（translate）
  • 縮放（scale）
  • 旋轉（rotate）
  • 傾斜（skew）

範例

transform: translate(50px, 20px) rotate(30deg) scale(0.75);

向右移動50px向下20px旋轉30deg縮放0.75倍

實作

好多

  • 打開 google 翻譯網站
  • 開始仿造他
  • 先不要管 icon
  • 記得 css 要分檔案寫
  • 盡量用 rem 但不用也沒差啦
  • 從上面那一個欄位開始
  • 不要省著不用 div
  • 然後發現做不出來

目標

範例

範例

語法說明

<div class=" nato">
	<a>
		google 翻譯
	</a>
	<div class="te"></div>
	<div>
		<button>設定</button>
		<button>帳號</button>
	</div>
</div>
<div class=" ma">
	<div class=" tp-btn">
		<button>文字</button>
		<button>圖片</button>
		<button>文件</button>
		<button>網站</button>
	</div>
	<div class=" text-are">
		<div class=" la">
			<div>
                <span>偵測語言</span>
                <span>中文</span>
                <span>英文</span>
				<span>日文</span>
			</div>
			<div>
				<span>英文</span>
				<span>中文</span>
				<span>日文</span>
			</div>
		</div>
	</div>
</div>
...

Flexbox

Flexible Box Layout 用來排列、對齊和分配容器內的元素，尤其適合一維布局。

範例

你可能發現了根本不知道要讓按鈕跑到最右邊?

因為目前讓元素水平放的方法只有 display:inline; 他就只會照順序往右邊排(ㄜ你如果直接用絕對定位那另當別論啦)

反正用 inline 的話只要網頁變小他就換行了?

而且要讓右邊的按鈕垂直置中也很麻煩，要一直調整 margin 或 padding

所以要來學新東西！

Flex 是以一個「軸向」為基礎

去決定「子元素」在那個軸上面的分布

語法說明-direction

display: flex
/* 啟用 flex 布局  */
flex-direction: row | row-reverse | column | column-reverse
/* 決定軸向 +x -x +y -y */

軸向設定

開 F12 後有這個介面可以點(但我是沒用過啦)

範例-direction

開 f12 後有這個介面可以用(但我是沒用過啦)

row +x

row-reverse -x

column +y

column-reverse -y

語法說明-justify-content

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

他是針對「軸向」的分布

所以如果軸是垂直的(column)

justify 就是調整垂直的分布

去按按看就好了很好理解

範例-justify-content

justify-content: space-between;

justify-content: flex-end;

語法說明-align-items 

flex-wrap: nowrap ;
 /* 設定不換行 */
align-items : flex-start / flex-end / center / baseline / stretch

搭配 flex-wrap: nowrap ; 用，要給父子元素都設個固定高度他是設定「沿著軸向的分布」

center

end

start

center

end

start

範例-align-items

flex-direction: row;  align-items: flex-end;

center

end

start

語法說明-align-content

flex-wrap: wrap ;
 /* 設定換行 */
align-content : flex-start / flex-end / center / space-between / space-around / stretch

搭配 flex-wrap: wrap ; 用，wrap 就是沿著軸排過去之後超出範圍會自動換行，align-content 是設定不同行的對齊。

wrap

範例-align-content

space-around / space-between

範例

回去寫 google 翻譯

div .header

a

div

.header {
  background-color: #fefefe;
  height: 4rem;
  border-bottom: 1px solid black;
  position: fixed;
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

button

.header > a {
  font-size: 2rem;
  margin-left: 1rem;
}

.header > div {
  margin-right: 1rem;
}

.header > div > button {
  margin: 0px 10px;
  height: 3rem;
  padding: 0.2rem 1rem;
  font-size: 1.2rem;
}

Flexbox

Flex 的功能不只這些，他還有一個重要的性質叫做「彈性」(好我其實不知道她叫啥我隨便講的)

它可以讓子元素放大或縮小?

範例

像是下面這個例子，假設我想要讓「確認」這個按鈕寬度固定佔 5rem，旁邊的 input 則使用剩下的空間，這種需求就可以用 flex 實現

這需要用到 flex-grow 這個屬性，這是一個設定在「子元素」上的屬性，用來設定這個子元素是否要在有剩餘空間時變大填滿(同時設定要以多大的比例去放大)，預設為 0

display: flex;
height: 4rem;
gap: 1rem;
flex-grow: 1;
width: 5rem;

div

input

button

範例

如果同時設定很多個子元素的 flex-grow 他們就會按照設定的比例「分配空白區域」。

如果分別設定：flex-grow: 1;/flex-grow: 1;/flex-grow: 2;

1000px

200px

200px

200px

400px

他們三個會依照 1:1:2 的比例分配剩餘的 400px

也就是第一個分到 400*1/4=100px

第二個一樣分到 100px

第三個分到 400*2/4=200px 最後三個就剛好填滿 1000px

300px

300px

300px

400px

總之 flex-grow 就是設定當螢幕比較大時，不同元素要分到的比例?(設成0就是不放大嘛)

另外有一個東西叫 flex-shrink 是設定當空間不夠時要按照多少的比例縮小以符合父元素空間。

flex-shrink 預設是 1 代表會縮小同等尺寸。

另外我們可以用 flex-basis 設定預設寬度，不過我個人通常是會直接設定 width 屬性，他是一樣的意思。

像是設定 flex-basis:300px 就代表預設是 300px

而 width:300px 可以得到一樣的效果。

下周

  • 理論上會是實作
  • 要做第一堂說的那個
  • 就是讓大家一直問問題
  • 然後會講 github page
  • 讓大家把自己的網站丟上去

沒了!

很棒

參考

來寒訓

對齁

2026建北電資聯合寒訓－冰凍三尺，非一日資寒 報名表單

web-3

By 翊庭jx06 T

Made with Slides.com

web-3

  • 74

More from 翊庭jx06 T