[JS] 關於物件

JavaScript的簡單型別裡,包括了數值字串booleannullundefined。其它所有的值都是物件(object)。
陣列是物件、函式是物件、正規式是物件…都是物件。

物件是特性(Property)的容器,具有名稱與值。

物件實字(object literal)

物件實字提供一種建立新物件值的便利註記方式。是以一對大括號圍起的零或多對名稱/值(name/value)。

//例:
var your_name = {};

var your _name2 = {
  "first_name": "Carlos",
  "last_name": "Chang"
};

var flight = {
  airline: "Oceanic",
  number: 815,
  departure:{
    IATA: "SYD",
    time: "2004-09-22 14:55",
    city: "Sydney"
  },
  arrival:{
    IATA: "LAX",
    time: "2004-09-23 10:42",
    city: "Los Angeles"
  }
};

擷取

擷取的方式可用[](中括號)或.(點號)的方式來取值:

//例:
your_name2['first_name']  // "Carlos"
flight.departure.IATA     // "SYD"

//例:||字算子能用於填入預設值:
var middle = your_name2["middle_name"] || "(none)";
var status = flight.status || "unknown";

更新

物件裡的值,可透過指派來直接更新。

//例:如果物件裡已有特性名稱,則會取代特性值:
your_name2["first_name"] = "Duncan";

//例:如果物件裡還沒有特性名稱,則會增加到物件裡:
your_name2["middle_name"] = "Lester";
your_name2.nickname = "Curly";

flight.equipment = {
  model: 'Boeing 777'
};
flight.status = 'overdue';

參考

物件是透過參考(reference)而被傳遞。

//例:a、b、c各自參考到不同物件
var a = {}, b = {}, c = {};

//例:a、b、c均參考到同一個空物件
var a = b = c {};

原型

每個物件都聯繫到一個prototype物件,由此可繼承特性。所有從物件實字建立的物件,都聯繫到Object.prototype(JavaScript的標準物件)

反映

typeof運算子在判斷特性的型別時很有幫助。

typeof flight.number    // 'number'
typeof flight.status    // 'string'
typeof flight.arrival   // 'object'
typeof flight.manifest  // 'undefined'

//因為任何原型鍊上的特性都可產生值,例:
typeof flight.toString     // 'function',由prototype來的
typeof flight.constructor  // 'function',由prototype來的

//可用hasOwnProperty方法,在物件擁有指定特性時回傳true:
flight.hasOwnProperty('number')       // true
flight.hasOwnProperty('constructor')  // false

列舉

for in敘述,可用迴圈處理所有物件中的特性名稱。列舉(enumeration)將包括所有特性–甚至包括你沒興趣的函式特性、原型特性,所以需要過濾不需要的值。最常見的過濾器是hasOwnProperty方法,加上排除函式的typeof

var name;
for(name in another_your_name2){
  if(typeof another_your_name2[name] !== 'function'){
    document.writeln(name + ': ' + your_name2[name]);
  }
}

//名稱的順序沒有保證,如果想確保特性依照特定順序出現,最好完全別用for in敘述;請改為使用陣列,依照正確順序儲存特性名稱,並用for取代for in,如此也不用在原型鏈上大海撈針:
var i;
var properties = [
  'first_name',
  'middle_name',
  'last_name',
  'profession'
];
for(i = 0; i < properties.length: i += 1){
  document.writeln(properties[i] + ': ' your_name2[properties[i]]);
}

刪除

delete運算子可從物件中移除特性。如果物件裡有該特性,則移除,且不會影響原型聯繫(prototype linkage)裡的其它物件。

your_name2.nickname // 'Curly'
delete your_name2.nickname;

減少全域變數

減少全域變數的使用至最小化的其中一種方式,就是為應用程式建立唯一一個全域變數:

var MYAPP = {};

MYAPP.your_name2 = {
  "first_name": "Carlos",
  "last-name": "Chang"
};

MYAPP.flight = {
  airline: "Oceanic",
  number: 815,
  departure:{
    IATA: "SYD",
    time: "2004-09-22 14:55",
    city: "Sydney"
  },
  arrival:{
    IATA: "LAX",
    time: "2004-09-23 10:42",
    city: "Los Angeles"
  }
};

全域變數減少到單一名稱後,也顯著地降低與其他應用程式發生錯誤互動的風險了。

 

參考資料:”JavaScript優良部份”一書

[CSS] CSS Selector(CSS 選擇子)

在CSS中,如何選取相對應的html元素呢?這就是所謂的CSS Selector,從w3schools列出了非常多的selector,以下會一一為各位解說,另外要請注意的是,我會標示IE8及IE9是否支援,請斟酌使用。

Selector 範例 對應html範例 IE8支援 IE9支援
.class .intro
會擷取出所有class是intro的元素
<p class=”intro”></p> 1376633837_camera_test 1376633837_camera_test
#id #firstname
擷取id是firstname的元素
<span id=”firstname”></span> 1376633837_camera_test 1376633837_camera_test
* *
擷取所有元素
  1376633837_camera_test 1376633837_camera_test
element p
會擷取所有的p元素
<p>…</p> 1376633837_camera_test 1376633837_camera_test
element,element div, p
會擷取所有的div及p元素
<div>…</div>
<p>…</p>
1376633837_camera_test 1376633837_camera_test
element element div p
擷取在<div>…</div>元素內部的所有<p>元素
<div>
 <section>
   <p>…</p>
 
</section>
 <p>…</p>
 
<p>…</p>
</div>
1376633837_camera_test 1376633837_camera_test
element>element div>p
擷取在<div>…</div>元素內部的直接子元素<p>
<div>
 <section>
   <p>…</p>
 </section>
 <p>…</p>
 
<p>…</p>
</div>
1376633837_camera_test 1376633837_camera_test
element+element div+p
擷取在<div>…</div>元素後的第一個<p>元素
<p>…</p>
<div>
 <section>
   <p>…</p>
 </section>
 <p>…</p>
 <p>…</p>

</div>
<p>…</p>
<p>…</p>

1376633837_camera_test

1376633837_camera_test
[attribute] [target]
擷取含有target屬性的元素
<a href=”#” target=”_blank”>test1</a>
<a href=”#”>test2</a>
1376633837_camera_test 1376633837_camera_test
[attribute=value] [target=_blank]
擷取含有target=”_blank”屬性的元素
<a href=”#” target=”_blank”>test1</a>
<a href=”#” target=”_parent”>test2</a>
1376633837_camera_test 1376633837_camera_test
[attribute~=value] [title~=word]
擷取含有title=”word”屬性的元素
<div title=”word”>test1</div>
<div title=”aword”>test2</div>
1376633837_camera_test 1376633837_camera_test
:link a:link
擷取未訪問過的連結
<a href=”#”>test1</a> 1376633837_camera_test 1376633837_camera_test
:visited a:visited
擷取訪問過的連結
<a href=”#”>test1</a> 1376633837_camera_test 1376633837_camera_test
:active a:active
擷取按住的連結
<a href=”#”>test1</a> 1376633837_camera_test 1376633837_camera_test
:hover a:hover
擷取滑鼠移過去時的連結
<a href=”#”>test1</a> 1376633837_camera_test 1376633837_camera_test
:focus input:focus
擷取當標記點focus在input欄位上的元素
<input type=”text”> 1376633837_camera_test 1376633837_camera_test
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         

 

[CSS] overflow顯示水平捲軸

在進入主題之前,還是先來說明overflow的意義吧。其實很簡單,就是當一個區域(例如<div>)裡的內文,超過其所限定的時候,該如何處理,overflow提供了autohidden,只舉我常用的來說明。

一、垂直捲軸

先看此html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
    .theDiv{
      border:1px solid black;
      width:300px;
      height:200px;
    }
    </style>
    </head>
    <body>
    <div class="theDiv">
      這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文
    </div>
  </body>
</html>

顯示如圖:
原始html
div的寬度設定為300px,而高度為200px。顯而易見地,內文超出了此區域,而且會如圖示一樣,內文往下穿越div區域了。

這時就需要垂直捲軸了,也非常常用,只要修改.theDiv的css即可:

.theDiv{
  border:1px solid black;
  width:300px;
  height:200px;

  overflow:auto;  /* 新增這行:當溢位時,自動顯示捲軸 */
}

顯示如圖:
顯示垂直捲軸
完美,內文在div正常顯示出來,且出來垂直捲軸了。

這沒有什麼問題。但有的時候(某些情況需求),我們需要顯示水平捲軸,但水平捲軸似乎不容易出現。

二、水平捲軸

先看此html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .scrollable {
        border:1px solid black;
        width:500px;
        height:200px;
      }

      .items{
        width: 800px;
        border:1px solid red;
      }
    </style>
  </head>

  <body>

    <div class="scrollable">
      <div class="items">這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文
      </div>
    </div>
  </body>
</html>

顯示如圖:(請注意,內層div的寬度是設定的比外層div還要來得大)
尚未顯示水平捲軸
因為內層div設定的較大,所以看圖上可看出,紅色框框超出了黑色框框,但我們真正的顯示範圍是要在黑色框框內,超出的必需以水平捲軸來顯示,所以需要修改.scrollable的css:

.scrollable {
  border:1px solid black;
  width:500px;
  height:200px;

  overflow: auto;  /* 新增這行 */
}

修改完後顯示如圖:
顯示水平捲軸

大功告成!
所以在設定水平捲軸的顯示時,有三個地方要注意:
1、需要用兩層div(div只是以此為例,你也可以用其它的元素)來圍住
2、內層div的寬度需大於外層
3、外層div設定overflow:auto

[CSS] float、clear、overflow搭配運用

float屬性非常重要,而且有時也常常會讓人困惑為什麼會這樣?但其實它在CSS中,在定位、排版也扮演非常重要的角色。務必瞭解。它是一般在講的浮動定位。有float:leftfloat:right兩種可供選擇,它會將該元素整個往左、往右移並脫離網頁原先流向,並且會讓周圍的元素圍繞它。此篇文章還會稍微提到clearoverflow

最近這幾篇都發一些比較基本觀念性質的,但我覺得這些都非常重要,等你熟悉之後,再去學css整理術、bootstrap、compass、fire.app等好玩的framework或工具。若對基本觀念尚未熟悉,先看些基本的教學會讓你更容易入門,且有趣。

先看html範例吧(尚未加上float屬性):

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .theDiv{
        width:400px;
        border:1px solid black;
      }
      .navigation{
        border:1px solid black;
        width:100px;
      }
      .para{
        border:1px solid red;
        width:80px;
      }
    </style>
  </head>

  <body>
    <div class="theDiv">
      <ul class="navigation">
        <li>項目一</li>
        <li>項目二</li>
        <li>項目三</li>
      </ul>
      <p class="para">段落一</p>
    </div>
  </body>
</html>

顯示如下:
尚未加上float的網頁原先流向

 

一、將.navigation設成浮動定位向左:

.navigation{
  border:1px solid black;
  width:100px;

  float:left;  /* 新增這行:浮動定位向左 */
}

顯示如圖:
浮動定位向左
.navigation設定浮動定位向左後,已脫離原先的網頁流向,而”段落一”則會圍繞在它周圍。注意紅色框線的異常,其實段落一原來的位置會在接近”項目一”的地方,但因為.navigation是浮動向左,所以”段落一”會被推擠往下。

如果我不設定”段落一”的width:

.navigation{
  border:1px solid black;
  width:100px;

  float:left;  /* 還是設定成浮動向左 */
}
.para{
  border:1px solid red;
  width:80px;  /* 移除這行 */
}

顯示如圖:
浮動定位向左
此時”段落一”內文會在右邊,且紅色線框會佔據整個上層寬度(因為沒設width),所以”段落一”會在右邊而不是在底下了。

 

二、將.navigation設定浮動定位向右:

.navigation{
  border:1px solid black;
  width:100px;

  float:right;  /* 新增這行:浮動定位向右 */
}

顯示如圖:
浮動定位向右
列表(.navigation)整個向右浮動了,”段落一”也會跟著往上移了,但最外圍的div(.theDiv)黑色框線卻沒有將它包圍住,這也是因為列表(.navigation)已經脫離它網頁流向的關係,所以最外圍的div其實不太想理它了。

這問題有兩種解決方式

第一:我們來將”段落一”多增加些內文並且將寬度移除:
浮動定位向右
有看出端倪了嗎?最外圍的div(.theDiv)會跟隨著紅色框線的高度而變動,以致於”看起來”有將列表(.navigation)給包圍住。

第二:針對最外圍的div (.theDiv)設定overflow:hidden

.theDiv{
  width:400px;
  border:1px solid black;
				
  overflow:hidden;  /*新增這行:若溢位時,則隱藏*/
}
			
.navigation{
  border:1px solid black;
  width:100px;

  float:right;  /* 列表還是向右浮動定位 */
}

顯示如圖:
浮動定位向右,並設定overflow
經由設定overflow:hidden,最外圍的div(.theDiv)會將列表(.navigation)給包圍住了。至於為什麼,其實這我不太會解釋,忘了以前從哪看來的,哈。

 

三、將.para分別設定成浮動向左、浮動向右

.para{
  border:1px solid red;
  width:80px;
				
  float:left;  /* 浮動定位向左 */
}

顯示如圖:
向左浮動定位
因為”段落一(.para)”設定浮動向左,所以最外圍的div(.theDiv)也就沒有去理它了,同理,可將最外圍的div(.theDiv)設定overflow:hidden,就會再將”段落一(.para)”給包圍住了。

.para{
  border:1px solid red;
  width:80px;
				
  float:right;  /* 浮動定位向右 */
}

顯示如圖:
浮動定位向右
段落一向右浮動,而最外圍的div(.theDiv)未將它包圍住。同理可針對最外圍div(.theDiv)設定overflow:hidden將它包圍起來。

 

四、關於clear:both

clear可以設定的屬性有:leftrightboth
其旨在告訴該元素的左邊(left)、右邊(right)、兩邊(both)都不可以有任何東西,若有的話,該元素會自動往下移。

請重新看此html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .theDiv{
        width:400px;
        border:1px solid black;
      }
      .navigation{
        border:1px solid black;
        width:100px;
        float:right
      }
      .para{
        border:1px solid red;
        width:80px;
      }
      .footer{
        border:1px solid orange;
      }
    </style>
  </head>

  <body>

    <div class="theDiv">
      <ul class="navigation">
        <li>項目一</li>
        <li>項目二</li>
        <li>項目三</li>
      </ul>
      <p class="para">段落一</p>
      <div class="footer">這是底部</div>
    </div>
  </body>
</html>

​顯示如圖:
準備要設定clear
.navigation有設定浮動向右,然後增加了.footer的div,但.footer卻橫跨過.navigation了,要避免此狀況,只要針對.footer設定clear:both即可:

.footer{
  border:1px solid orange;
				
  clear:both;  /* 新增這行 */
}

顯示如圖:
設定clear:both
.footer區域往下移,因為左右兩邊不可以有任何東西。

參考資料:
htmldog:Page Layout

[CSS] display屬性

display屬性決定了html元素的顯示特性,常見設定值有:inlineblockinline-blocknone,這幾個是比較重要且常用的。

將依以下順序介紹:
1、如何區分html標籤是屬於行內元素(inline)區塊元素(block)
2、inline-block
3、display:none與visibility:hidden的差異

一、如何區分html標籤是屬於行內元素或區塊元素

只要你將兩個相同元素寫下來後,看第二個會不會段行,就可以知道該元素是屬於inline行內元素或是block區塊元素了,例:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
    .theDiv{
      width:200px;
      border:1px solid black;
    }
    .para{
      border:1px solid black;
    }
    .link{
      border:1px solid red;
    }
    </style>
  </head>

  <body>
    <div class="theDiv">
      <p class="para">這是段落一</p>
      <p class="para">這是段落二</p>
      <a class="link" href="#">這是連結一</a>
      <a class="link" href="#">這是連結二</a>
    </div>
  </body>
</html>

顯示如圖,可見<p>是block區塊元素(因為會斷行)、<a>是inline行內元素(在同一行內繼續顯示,沒有斷行):
判斷是block區塊元素或inline行內元素
另外要注意的是,當一個元素是inline行內元素時,就無法使用margin-topmargin-bottomheight,就算你設定了,其實也不會有任何效果喔。當然你可以將<a>改成區塊元素(display:block),這樣它就擁有block區塊元素的特性(會斷行、可設定margin-topmargin-bottomheight)。

二、inline-block

例如以上範例的<a>元素,我們希望它不要斷行,但能擁有block區塊元素的特性,只要將它設定成display:inline-block這個行內區塊元素即可。例:

.link{
  border:1px solid red;

  display: inline-block;  /* 新增這行,設定行內區塊元素(inline-block) */
  margin-top:100px;       /* 這增這行,這時設定margin-top就會有其效果了 */
}

三、display:none與visibility:hidden的差異

以上的.para修改成以下:

.para{
  border:1px solid black;

  display:none;  /* 新增這行 */
}

顯示如圖:(會發現<p>消失了,且連結的部份會往上移取代原先<p>的位置)
將display設定none

若將.para修改成以下:

.para{
  border:1px solid black;

  visibility: hidden;  /* 新增這行 */
}

顯示如圖:(會發現<p>雖然消失了,但仍”佔位”原來的位置)
將visibility設成hidden

參考資料:
htmldog:Display

如果文章對您有幫助,請您不吝分享,
這將是我繼續寫下去的原動力啊!感謝。

二代健保補充性保費

2013年1月1日開始,由於因為二代健保的補充性保費正式上路的關係。
未來(1)累積逾當月投保金額之獎金;(2)非所屬投保單位給付之薪資所得;(3)執行業務所得;(4)股利所得;(5)利息所得;(6)租金所得等六大類所得。
每筆收入超過5000元,健保局將就源扣除2%的健保費用。

對執行業務所得(稅賦代碼50、9a、9b三者為主),勢必會被扣繳補充性保費,
只要是兼差所產生的執行業務所得費用,只要超過5000元(單筆),便會被扣繳補充性保費
如果案主願意,且工作型態屬於兼差,並非常態性,或許可以請案主幫忙拆單,單筆執行業務所得收入盡量壓在每月5000元以下。

拆單例子:
你是一個有在公司上班,下了班之後接點外邊工作的上班族。平日固定一個月接一個案件,總收入不會超過5000元,突然有某個月的接案量較大,一口氣接了好幾個案子,單月總收入超過5000元,若一次領取得扣補充性保費,但,如果分期支領,一個月只領不到5000元額度的稿費,便可避開被扣2%補充性保費的機會。前提是案主同意,千萬不可勉強。

參考資料:
二代健保來了,全職或兼差Soho該如何繳納/規避補充性保費?

[HTML] iPhone及iPad的加入主畫面,及瀏覽器的shortcut icon

以下2種效果分別是怎麼辦到的呢?

1、在iPhone及iPad經由”加入主畫面”,在主畫面上直接產生icon連結
在iPad或iPhone上的主畫面上顯示icon連結

只要準備好相關的圖例:144 * 144、114 * 114、72 * 72、57 * 57,共四張圖檔的png檔,在<head>裡設定以下代碼(只要更改href屬性確定有指到您所設定的圖即可):

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-144.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-114.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-72.png">

<link rel="apple-touch-icon-precomposed" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-57.png">

設定完後,即可測試囉,例圖:
分享按鈕按下後,就可看到加入主畫面的圖示

以上就大功告成啦!

 

2、shortcut icon

shortcut icon

只要在<head>加入以下代碼即可:

<link rel="shortcut icon" href="http://carlos-studio.com/wp-content/uploads/2013/07/favicon.ico">

注意檔名好像一定要是favicon.ico,此檔案是16 * 16的ico圖檔,可從favicon.cc來快速製作。


綜合以上的代碼,其實就是加入底下的代碼至<head>裡,指定好圖檔路徑即完成。

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-144.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-114.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-72.png">

<link rel="apple-touch-icon-precomposed" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-57.png">

<link rel="shortcut icon" href="http://carlos-studio.com/wp-content/uploads/2013/07/favicon.ico">

[CSS] position定位

css icon

CSS裡有一個非常重要的屬性,就是position,善用它,將無往而不利。
主要目的是在做定位,共有四種可選:staticfixedrelativeabsolute,以下就依這四個屬性值來稍做解釋。

先來一個簡單的HTML範例代碼:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  
    <style>
      .theDiv{
        border:1px solid black;
        width:200px;
      }

      .p_margin_set_zero{
        margin:0;
        width:100px;
      }

      .theP{
        background-color: #b1b1b1;
        border:1px solid black;
        width:100px;
      }
    </style>
  </head>
  <body>

    <div class="theDiv">
      <p class="p_margin_set_zero">this is p1</p>
      <p class="p_margin_set_zero theP">this is p center</p>
      <p class="p_margin_set_zero">this is p2</p>
    </div>

  </body>
​</html>

很容易地,以上html就是呈現出下圖:
static定位

1、static

所有的html預設定位都是static,也就是依網頁原本的流向,不做任何變動。所以其實以上面原來的範例來說,<div><p>其實都是position:static;

 

2、fixed:鎖定定位

將某個html的元素,postion設定成fixed,即position:fixed;,是表示此html是固定在視窗畫面上,即使畫面捲軸移動,該特定元素還是會定在畫面上。例:將.theDiv改成以下:

.theDiv{
  border:1px solid black;
  width:200px;

  position:fixed;  /*新增這行*/
}

然後隨意新增網頁內容至有捲軸出現為止,試著移動捲軸看看,會發現<div class="theDiv">還是會定在畫面原來的位置上,例如圖:
fixed定位

 

3、relative:相對定位

若某個html元素設定成position:relative;,則表示可以使用topbottomleftright這四種屬性,來針對原來位置做移動,且不影響周圍其它元素的位置。例將.theP改成以下:

.theP{
  background-color: #b1b1b1;
  border:1px solid black;
  width:100px;

  position:relative;  /*新增這行*/
  top:10px;           /*新增這行*/
}

顯示如下圖,往下挪了10px,但並不影響其它周圍元素的位置(可將top改成用margin-top看其差異喔):
relative定位

 

4、absolute:絕對定位

將某個html設定position:absolute;,則表示此元素已脫離網頁原先流向,它會去找上層有設position:relative;的元素,再搭配topbottomleftright來對此元素做定位。例如將.theDiv及.theP分別改設成以下:

.theDiv{
  border:1px solid black;
  width:200px;

  position:relative;  /*新增這行*/
}

.theP{
  background-color: #b1b1b1;
  border:1px solid black;
  width:100px;
				
  position:absolute;  /*新增這行:採絕對定位*/
  top:0;              /*新增這行:往上層找到relative之後,距離上邊界為0px*/
  right:10px;         /*新增這行:往上層找到relative之後,距離右邊界為10px*/
}

經由以上CSS的設定後,如圖(且發現”this is p2″會往上移了):
absolute定位

哈,相信這樣應該對position已經不會太陌生了,現在就是練習練習再練習了。

 

參考資料:
htmldog:Page Layout

勞務報酬所得稅

什麼是勞務報酬?

勞務報酬是指通過勞動應得的收入。勞務報酬所得是指個人獨立提供設計、裝潢、安裝、製圖、化驗、測試、醫療、法律、會計、咨詢、講學、新聞、廣播、翻譯、審稿、書畫、雕刻、影視、錄音、錄像、演出、表演、廣告、展覽、技術服務、介紹服務、經濟服務、代理服務的勞務時取得的所得。

勞務報酬所得稅如何計算?

一般來說,兼差跟正職一樣,每年報稅的時候也會收到扣繳憑單,依照正常手續報稅即可。
但是,若是按件計酬的兼差,通常會在交件時填寫「勞務報酬單」,而且會先扣繳10%的稅額,但若稅額低於2,000元(意即報酬低於20,000元)則不用先被扣繳,等到明年一月時,雇主就會將所有已扣稅或未扣稅的資料申報給國稅局,二月時勞工會收到雇主寄的扣繳憑單,上面會清楚標示是否有先扣稅,五月時,勞工再將這些資料加在整個所得稅中一起申報。

舉例來說,小林的太太接了A公司一個一萬元的案子,B公司一個三萬元的案子,林太太將會實收A公司的一萬元(稅額1,000元,不預扣),並於隔年報稅時,併入所得總額中申報;但只會收到B公司扣除10%稅額(3,000元)後的款項,只拿到27,000元,隔年申報綜合所得稅時,列入已經扣繳的稅額申報,多退少補(如果林太太總共需繳納8,000元的稅,她只要再繳5,000元即可,如果她只需繳2000元的稅,國稅局還會把多扣的1,000元退回。),林太太絕對不會吃虧。

參考資料:
搞懂勞基法保障,助你兼職永遠不吃虧

[HTML] 大圖縮小圖是行不通的

昨日因為要做一個簡單的logo,所以做了以下這張圖,大小為144px正方形,我用PS製作:
(原圖144px正方形)
apple-touch-icon-144                   

再來我想改成其它尺吋,以再特定用途時,可以切換不同尺吋的圖,所以從原圖(144px正方形)直接用更改圖片大小的方式,改成分別是114px正方形、72px正方形、57px正方形各自的圖檔來輸出:以下依序

(114px正方形)                                      (將左圖直接設定寬度至144px來顯示:方便觀查對照)
apple-touch-icon-114                                  apple-touch-icon-114

(72px正方形)                                        (將左圖直接設定寬度至144px來顯示:方便觀查對照)
apple-touch-icon-72                                             apple-touch-icon-72

(57px正方形)                                         (將左圖直接設定寬度至144px來顯示:方便觀查對照)
apple-touch-icon-57                                                  apple-touch-icon-57

發現:
1、字母、四周圓角在直接使用圖片縮尺吋的方式,開始有模糊、鋸齒狀出現。
2、色差上精緻度也被破壞掉。

所以我想還是要先設定好尺吋再重新製作才行、或者使用向量式類型的軟體來製作。
我不是視覺設計師,只是一些心得,分享給客倌們。