人生歡樂有幾何？
憂愁又有幾何？
在不知不覺中，又是一年

往事慢慢地塵封
曾經漸漸地模糊
卻獨漏了自己的心
放任無奈，淹沒塵埃
我的執著承載不了所有一切你要的
只能任由寂寞纒繞著我
 
天真偷走了心，冷漠凍傷了肺，謊言把愛灌醉
 希望烘乾了眼淚，熱情滌去了憔悴。
在不知不覺中，又走過了四季長了一歲！
莫說無奈，別喊好累。
你的對手在看書，你的仇人在磨刀
你的閨蜜在減肥，隔壁老王在練腰
你還在發呆，讓你的對手有可趁之機嗎 ?
 
這些日子以來 ~
快樂已在時光的河裡溺斃
即使妳用期望的槳、使盡洪荒之力的划
幸福還是上不了岸
我用粉彩將年華畫成一幅
淡淡的風景
隱隱的心痛
連呼吸都 沉重

忘記沒有忘記的過去
習慣已經習慣的生活。

習慣一個人在家，
忘記時間，忘記存在，
忘記沒有忘記的過去。
習慣已經習慣的生活，
習慣一個人有種莫名的安全感，
卻又有種莫名的寂寞，
以前不習慣的但漸漸的都習慣了。
習慣一個人，因為一個人的世界，只有一個人懂。
一個人的世界或許很孤單，但是卻可以不用受傷害。 

Media Queries 媒體查詢
使用 Flex 模式配置版面
「RWD」彈性調適型的網頁設計
Media Queries 媒體查詢
隨著現今行動裝置的多樣化和普及，網頁的技術近年來也開始重視手機上的視覺效果。
於是出現(Responsive Web Design)簡稱RWD，響應式網頁設計的概念，又稱適應性網頁、自適應網頁設計、回應式網頁設計。
「RWD」彈性調適型的網頁設計，大部份就是指 CSS Media Queries 這個技術的應用。 「媒體查詢」是完成「響應式設計」最強大的工具，透過CSS，可以使得網站透過不同大小的螢幕視窗來改變網頁排版的方式，使得各種裝置的使用者，如電腦、平板、手機、電視都能夠呈現得更完美，由於是由同一份網頁內容轉變，以後要修改比較輕易。
在製作 Responsive Web Design 的網站時，大致上會區分為三個不同的 CSS 版型：
智慧型手機尺寸( 320 X 480 )
平板電腦尺寸( 401 X 641 ~ 768 X 1024 )
一般電腦螢幕尺寸( 768 X 1024 以上 )
你還可以使用 meta viewport 讓你的版面配置在行動裝置的瀏覽器上呈現得更完美。
viewport tag 的定義只對mobile device有用，用來控制 mobile device 顯示網頁內容時的一些設定。
<meta name=”viewport” content="width=device-width"> 設定說明與預設值 @viewport { width: device-width; }
使用 Flexbox + Media Queries 配置簡單的版面
新的 flexbox 技術重新定義了使用 CSS 版面配置的方法。
這裡只是一些讓你瞭解概念的例子而已：

 要如何讓痞客邦的影音檔，能連續播放？
假如你使用他人的 YouTube ~ 影片、歌曲，有可能在不知哪一年的哪一天會被移除?
喏、使用隨意窩，又會如何? 隨意窩的影片會加入廣告，假如你不是隨意窩的VIP會員，圖片、音訊檔、影音檔，會有流量限制，(XD...
那 ~ 改用痞客邦的影音檔又會有啥麼鳥事 呢?
接下來只告訴你如何做，不做詳細的解說~
貼成背景音樂，在 Script的前面，寫下一個註解標籤Tag <!-- -->， 醬就可以呼嚨過後台編輯器，程式碼不會被P客邦吃掉。

CSS 佈局模式

CSS 佈局模式
話說很久很久以前，有多久? 我已經忘記了，網頁開發者、 都習慣使用頁框 frame 和表格 table 來分割版面，之後常見有5種佈局模式。

block

inline

table

float

positioned

現在 CSS 3 又有了兩種新的佈局方式 Flexbox 和 Grid， 可用來取代 float 和 table mode
彈性盒子 Flexbox 會根據單一的行或列分配空間, 類似 float 調配控制元素的位置尺寸概念, 但更靈活好用!
格線 Grid 將佈局區分成 rows 和 columns, 有點類似 table 但比其更具有彈性。

關於 float 屬性
本質上 float 並不是用來協助我們佈局的, 它只是一個舊有的對齊屬性，跟表格(table)和圖像(img)的 Align屬性一樣，可用來實現文繞圖
<div id="block" height="100px"> <span style="float:left;">
浮貼左邊對齊
22222
</span>

表格	ALIGN="left"
	000	表格的左、右邊對齊 非浮動對齊 Float 效果卻和浮貼一樣 會紅杏出牆

<img style="float:right;">
由此範例可看出 ~ 這個浮動對齊的圖片，吃不飽時就劈腿， 溢出到了容器外面！ </div>

在使用 float 的時候經常會遇到一個奇怪且糟糕的事： 當被設定為浮動元素，其高度比包含它的父層容器還高時，就會劈腿出軌， 有個賤招 clearfix 密技（hack）可以解決這個問題，就是在父元素 #block 加入 overflow: auto; 或 overflow:hidden; 屬性。
#block {
overflow: auto;
}

加了 overflow 屬性之後，浮動元素(圖像)就不會再翻牆了。
這個清除浮動的賤招，有數個問題要注意:
#block 父元素的高度不可以是固定的高度，還有 position 絕對定位元素和浮動元素重疊，會出現捲軸滑軌，還有鄰居的外邊距對它無效， 要保持距離，要由浮動元素來決定。

另一個清除浮動定位 clear 屬性
當我們使用 float 元素排版時，由於區塊是浮動的，所以若下一個區塊未使用 float 屬性的話，可能在排版上會往上跑，造成跑版的現象，而使用 clear 可以適當地解決這個問題。
比較一下、以下的例子

若在 "段落 二" 加上clear屬性，clear:both 或 clear:left， 就可以擺脫 Float 浮動元素的糾纏，自成一行

使用 float 配置版面

使用 float 來實現頁面的版面配置是很常見的。
下面是一個將側欄 Aside 設定為靠右浮動的典型例子 ~

 HTML 

<div>
<header><img ....> </header>
<aside> Aside </aside>
<article class="art"> article-1 .... </article>
<article class="art"> article-2 .... </article>
<footer> Footer </footer>
</div>

靠右浮動側欄 Aside 的寬度為200px，為了不要和側欄疊在一起， article 設定預留了 200px 的外間距空間。
當浮動側欄 Aside 的高度，比 article 這些「固定」的內容還要高時就會紅杏出牆，為了防止劈腿出軌，footer 加上清除浮動定位屬性 clear:both;。

Box Model（區塊模型）

 
輕鬆一下 ~


 

置中對齊 篇

垂直 置中對齊 Vertical Align
使用 CSS 語法要設定一個 div 水平置中，是很常見到的需求，而水平置中很好處理，不外乎就是設定margin:0 auto;或是text-align:center;,就可以輕鬆解決掉水平置中的問題。
但一直以來最麻煩對齊問題，都是「垂直置中」這個討人厭的設定， 「垂直置中」的方法、起碼有10種以上，騎牛也有20種，不用學太多，夠用就好。
以下將介紹幾種 CSS 垂直置中的方式
設定 absolute + margin負值的技巧
範例物件一塊高、200px，寬、300px 的 div元素， 將屬性設定成 position: absolute; 絕對位置
<div id="block"> 高、200px，寬、300px </div>
設定 #block 的座標位置 right 和 top 各50%，這樣 DIV物件的右上角，剛剛好就會是畫面的正中央位置， 接著再將要置中物件的 marign-top、margin-right 各設定為自身負一半的高度，把 div 位移至垂直及水平置中，網頁的正中央
#block {
height: 200px;
width: 300px;
background-color: black;
position: absolute; /*絕對位置*/
top: 50%; /*從上面開始算，下推 50% (一半) 的位置*/
right: 50%; /*從右邊開始算，左推 50% (一半) 的位置*/
margin-top: -100px; /*高度的一半*/
margin-right: -150px; /*寬度的一半*/
}

設定 absolute + translate 的技巧
絕對定位置中的另一個移位方式，此方式置中的定位物件不需要固定的寬跟高。
利用 transform:translate(50%, 50%) 位移置中物件自身寬與高的 50% 就能達成置中的目的了。

設定 absolute + margin auto 的技巧

這個方式比較特別一點，當物件設定絕對定位之後，預設它是抓不到整體可運用空間的範圍，所以 margin: auto 此時會失效，但當你設定了 top: 0; bottom: 0 時，絕對定位物件就抓到可運用的空間了，這時你的 margin: auto 就生效了，如果你的絕對定位物件需要水平置中於父層，那你同樣可以設定 left: 0; right: 0; 來讓絕對定位物件取得空間可運用範圍，再讓 margin-left 與 margin-right 設定為 auto 即可置中。

設定 absolute + %百分比 的技巧

利用 %百分比平均分配邊距，以達成置中。



以下要介紹的定位方法，不再是作用在#block 區塊 DIV 物件本身， 而是包含在#block 區塊內的元素(內容物件)
HTML

<div id="block"> ❤️❤️❤️ ❤️❤️❤ </div>

設定行高 Line-height 的技巧

適用：單行文字垂直置中
若將行內元素 line-height 設成和高度一樣的數值，則內容的行內元素就會被垂直置中
注意 :是行內元素垂直置中，不是垂直對齊哦!

❤垂直置中️❤

❤垂直置中️ + 水平置中❤

設定行高 Line-height + inline-block 的技巧

適用：多行文字垂直置中

設定行高 ( line-height ) 只會使單行文字被垂直置中， 倘若要讓多行文字被垂直置中，可以嗎? 答案是 ~ 要把內層的多行物件，包裹成一個行列區塊 inline-block

 

設定Display: table-cell 的技巧

使用 display 屬性將 div 設定成表格的儲存格(td)，這樣就能利用支援儲存格垂直對齊的 vertical-align: middle 屬性來將資料垂直置中了。

設定Flex + margin 的技巧

在父層物件 #block 設定 display: Flex，接著在需要垂直置中(#inline)的物件上設定 margin: auto 即可自動置中囉。

設定Grid + margin 的技巧

這個設定是否感覺和上一個一樣 ? 只差display: Grid，其實格線Grid和Flex盒子， 有些屬性，是一樣的，都可以做到垂直置中，其他的 Grid和Flexbox 屬性以後再討論。

使用 calc 的技巧

利用 calc() 這個「計算」函數，將百分比即時且動態的計算出實際要的置中高度位置。

練完基本功之後 ..
再來玩痞客邦的版面配置

清涼如水的月光下、誰在獨白
且將 滿廂愁緒於落花下深埋
清涼如水的月光下、誰在獨白
且將 滿廂愁緒於落花下深埋
 
邀月共飲
 這一杯
我敬你
漫不經心
闖入
我的生命
又
不動聲色地
擾動
我的生活
再
漫無目的
從我的視線裡消失
來
乾了這杯
我們
 不提心事