iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
自我挑戰組

CSS、JS-30天研究筆記 系列

藉由30天分享CSS或JS筆記,強迫自己更加了解這二者特性、觀念與應用技巧。

鐵人鍊成 | 共 31 篇文章 | 23 人訂閱 訂閱系列文 RSS系列文
DAY 1

【day1】關於HTML塊級與行內元素以及CSSdisplay屬性

一、塊級元素(block-level elememts),特點:* 自動換行* 能設置寬高* margin和padding上下左右的值都可以設置 二、行內元素...

2018-10-02 ‧ 由 Amy 分享
DAY 1

【day2】關於CSS height高度屬性

今天分享一個height的特性與一個實用的文字編排設定! 一、關於height的百分比 height:100%如果在一個div設置一張背景圖,並設置widt...

2018-10-02 ‧ 由 Amy 分享
DAY 2

【day3】關於CSS content屬性

一、 content 與替換元素:content 屬性生成的物件稱為“匿名替換元素”(anonymous replaced element)。content 生...

2018-10-03 ‧ 由 Amy 分享
DAY 3

【day4】關於CSS padding屬性

一、特性: 不支持負數值 支持百分比單位,且上下左右均是相對於父級的「寬度」計算。請問以下範例,box2的width與hight會是多少px? <st...

2018-10-04 ‧ 由 Amy 分享
DAY 4

【day5】關於CSS margin屬性

一、特性:1.支持負數值2.一般情況下,對於元素的可視尺寸沒有影響3.支持百分比值,且上下左右均是相對于父級的「寬度」計算。4.某些情況下,margin-top...

2018-10-05 ‧ 由 Amy 分享
DAY 5

【day6】關於CSS border

border-width 不支持百分比,一般使用上會設置固定的数值。屬性值: thin:等於 1px。 medium(默认值)等於3px thick:等於4...

2018-10-06 ‧ 由 Amy 分享
DAY 6

【day7】「CSS box、JS、JQ尺寸設置對應表」與「16進位色碼與RGB對照圖」

CSS box、JS、JQ尺寸設置對應表 CSS Box JS JQ content 無 .width()、.height() conte...

2018-10-07 ‧ 由 Amy 分享
DAY 7

【day8】關於 CSS的line-height與vertical-align 屬性

如何讓圖示和文字垂直對齊?大概會讓人直覺想到設置vertical-align:middle吧!但在「CSS世界」書中提到,middle 指的是基線往上 1/2...

2018-10-08 ‧ 由 Amy 分享
DAY 8

【day9】用CSS讓加載中...動起來

運用content屬性搭配Unicode字符,可以達成一些特別的效果。下方例子是運用content屬性加上"\A"(即換行字符),做出圖片或...

2018-10-09 ‧ 由 Amy 分享
DAY 9

【day10】CSS堆疊順序(stacking order)

一、 堆疊順序(stacking order),指的網頁元素發生疊層時,解決顯示順序衝突的表現規則。 二、z-index特性: 只有和定位元素(positio...

2018-10-10 ‧ 由 Amy 分享