2014-01-30

[CSS] display inline, block 與 inline-block

inline 行內 (例如: <b>,<span>),具有以下特性:
  • 會連接在文字及 inline 元素之後
  • 不具有 width, height 以及上下的 padding, margin (padding-top, padding-bottom, margin-top, margin-bottom)
  • 寬度、高度會內縮至所含文字所使用的空間

block 區塊 (例如: <p>,<div>),具有以下特性:
  • 會獨佔父元素一整行的空間
  • 具有完整 width, height 及 padding, margin 屬性
  • 當不指定寬度時,預設寬度會擴張至一整列
  • 當不指定高度時,預設高度會內縮至子元素所使用的空間

inline-block 行內-區塊 (例如: <img>,<button>),同時具備 inline 與 block 的特性:
  • 會連接在文字及 inline 元素之後
  • 具有完整 width, height 及 padding, margin 屬性
  • 當不指定寬度、高度時,預設會內縮至所含文字所使用的空間

[CSS] Selector Meaning

SelectorMeaning
ABA and B
A, BA or B
A Bforeach B whose parents contains A
A > Bforeach B whose parent is A
A + Bforeach B whose previous sibling is A
A ~ Bforeach B whose previous siblings contains A

[C#] 圖片縮圖

System.Drawing namespace 提供對 GDI+ 基本繪圖功能的存取,可以方便處理圖片的操作,下面是一個處理圖片縮圖的範例:

//using System.Drawing;

var image = Image.FromFile(@"D:\001.jpg");

int width = 120, height = 100;
float targetRatio = (float)width / (float)height;
float imageRatio = (float)image.Width / (float)image.Height;


if(imageRatio < targetRatio)
{
    width = Math.Max(1, height * image.Width / image.Height);
}
else
{
    height = Math.Max(1, width * image.Height / image.Width); 
}


var thumbnail = image.GetThumbnailImage(width, height, null, IntPtr.Zero);

thumbnail.Save(@"D:\thumb.jpg");

這個方式可以容易的做到圖片縮圖,但使用這個方式會很佔用記憶體,在處理尺寸大的圖片時有可能會出現 out of memory,而且在 MSDN 有以下的警示:
Classes within the System.Drawing namespace are not supported for use within a Windows or ASP.NET service. Attempting to use these classes from within one of these application types may produce unexpected problems, such as diminished service performance and run-time exceptions. For a supported alternative, see Windows Imaging Components.
2014-01-21

[JavaScript] 匿名 function 進階應用

前幾天 JS 新手村的同事說看不懂下面的程式,下面用了幾個問句解釋了他的疑惑。
(function(model){
    //...
})(model || model={});

JS 要如何宣告一個 function 呢?
function a(){
    //...
}

那改成變數的方式宣告呢?
var a = function(){
    //...
};

要怎麼呼叫上面宣告的 function?
a();

再來把 a 換成等於右邊的 function 宣告。
function(){
    //...
}();

上面的寫法不符合語法,再加上 () 吧!
(function(){
    //...
})();


接著 model || model={} 是透過 or 判斷句的特性,遇到第一個為真就回傳,看看下面的例子:
var a = 1 || 2 || 3;  // 1
var a = 0 || 2 || 3;  // 2
var a = 0 || 0 || 3;  // 3



為什麼要用這種寫法呢??

首先 JS 沒有所謂的 block 變數,在 for 內宣告的變數,外面也能直接存取,唯一能侷限變數存取域的只有 function,在 function 內宣告的變數只有內部能存取,外部是看不見的,所以透過這個方法可以避免變數命名衝突的問題。

再來透過傳入 function 的變數,外部是無法在更動的,變數的參考點在呼叫 function 就固定下來,外部無法在異動內部所存取的參考點,這樣可以避免參考的變數內容被其他套件程式修改,而造成執行錯誤。

[Less] 簡單做到背景漸層

對選顏色不擅長,又想在網頁做出 CSS 漸層效果,Less 提供了兩個方便的函數 lighten(加亮顏色)、darken(加深顏色),透過這兩個函數就可以輕鬆產生漸層所需要的色差,然後調整百比值就可以控制漸層的色階。

.toolbar {
    @color: #914;
    @lighten: lighten(@color, 3%);
    @darken: darken(@color, 3%);

    background-color: @color;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken));
    background-image: -webkit-linear-gradient(top, @lighten, @darken);
    background-image: -moz-linear-gradient(top, @lighten, @darken);
    background-image: -ms-linear-gradient(top, @lighten, @darken);
    background-image: -o-linear-gradient(top, @lighten, @darken);
    background-image: linear-gradient(to bottom, @lighten, @darken);
}

上面除了用 linear-gradient 來產生漸層,額外還加上了 background-color 這個保險,讓不支援 CSS3 的 browser 也能有基本的底色。


這樣寫還是有點麻煩,如果包成 mixin 會更方便,如下:
.bg-vertical-gradient(@color, @amount:3%) {
    @lighten: lighten(@color, @amount);
    @darken: darken(@color, @amount);

    background-color: @color;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken));
    background-image: -webkit-linear-gradient(top, @lighten, @darken);
    background-image: -moz-linear-gradient(top, @lighten, @darken);
    background-image: -ms-linear-gradient(top, @lighten, @darken);
    background-image: -o-linear-gradient(top, @lighten, @darken);
    background-image: linear-gradient(to bottom, @lighten, @darken);
}

.toolbar {
    .bg-vertical-gradient(#914);
}

.banner {
    .bg-vertical-gradient(#702, 5%);
}