iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
3

前言

其實本來打算讓「混淆CSS篇」結束了。(共計三篇)
但又想到一些蠻基礎可以補充的觀念~
所以就繼續寫下去了!
希望可以用更口語的方式讓大家理解和記得/images/emoticon/emoticon42.gif


今天講的真的很簡單!是基礎中的基礎!!如果這個觀念沒有建立好的話,後面應該都蠻痛苦的!
放在第四章節真是不好意思...其實這麼基礎應該放前面一點才對!


元素的大小

如果你是使用chrome瀏覽器的話,滑鼠右鍵>檢查,就可以看到這樣的資訊。

元素大小

這些是什麼呢~?
我用另一張我自己的解釋給大家看一下!

元素說明

  • 衣服:也就是說你穿得越厚,你跟別人的距離當然就越遠~體積也會越大!
    例如說,你穿了超誇張的布偶裝上班(誰會這樣做啦!)你想跟同事擁抱那就很難~離太遠了(咦)
  • 皮膚:預設值一般來說都是0,其實我覺得要解釋成 角質增生的皮 也是可以啦...反正腳皮越厚就...(就怎樣!?不要亂教啊!!)
    不過元素的皮可以有各種樣貌啦~
    solid啊~dotted啊~反正各種皮膚,例如長痘痘的什麼的...(再說下去主題還是IT嗎?)
  • 肥油:這個我覺得完全不用解釋了吧!?你我身上都很多啊(誒!)肥油越多~當然也會增加體積喔!
  • 本體:就是你原本身為一個體重標準的人類應該有的樣子!例如說我的height是163cm(當然網頁不適用公分!)

真希望我有本體和margin就好了...(茶)

margin

與margin相關的語法有四個,分別是:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
    這四個語法控制了這個元素與其他元素的「外部」距離(衣服)
    或是你也可以直接寫在一起:
margin: 上 右 下 左;

依順序分別控制!
如果懶得寫四個,也可以寫兩個:

margin: 上下 左右;

如果你只寫了三個,那他就會是:

margin: 上 左右 下;

padding

與padding相關的語法一樣也有四個,分別是:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
    這四個語法控制了這個元素有多少肥油(會不會看完這章節大家打死不用padding!?)/images/emoticon/emoticon04.gif
    一樣,你也可以直接寫在一起:
padding: 上 右 下 左;

懶得寫四個,也可以寫兩個:

padding: 上下 左右;

只寫了三個,就會是:

padding: 上 左右 下;

border

很重要: border和border-radius不要搞混了喔!!
雖然長得很像,但他們控制的東西不太一樣...務必留意!

- border-style

border樣式很多...大家可以先到這邊看一下
又能細寫成border-top-styleborder-right-styleborder-bottom-styleborder-left-style,就是說樣式可以分開個別設定!

- border-weight

線框的寬度。也就是我範例中說的角質層有多厚!(誒!)

- border-color

線框的顏色。應該...不用說明吧0.0
也都是可以各自設定的~!

或是你也可以用綜合寫法:

border: 寬度 色票 樣式;
/*順序可以換*/

下一篇再介紹進階的東西好了...
有時候一下子不要吞太多,不然可能會全部卡在一起!
混淆CSS系列是給新手看的~
如果你只想做設計或是只想寫後端,也不認為協作是要去了解隊友在做什麼的話!!!(兇)

就...也不會怎樣......(弱掉)

/images/emoticon/emoticon29.gif


上一篇
與工程師的協作之路-icon篇(下)
下一篇
與工程師的協作之路-Functional map 與 UI flow
系列文
學什麼就寫什麼,知道什麼就分享什麼31

1 則留言

1
tacodrem
iT邦新手 5 級 ‧ 2018-10-25 11:48:31

補充一下margin跟padding四個設定值的方向記法
從上開始, 按照順時針就會是
上 右 下 左
/images/emoticon/emoticon39.gif

嘿丟!就是順時針~

↑↑↓↓←←→→BA

我要留言

立即登入留言