CSS3 可以對一個區塊更細微的設定,
以下介紹三個功能 :
1. resize :
能設定是否讓使用者改變區塊的寬高。
resize: both;
長跟寬使用者都能改變。
resize: none;
長跟寬使用者都不能改變。
box-sizing: border-box;
能直接設定寬高不考慮內距與邊線,
假設一個矩形有設定內距與邊線,
內距為 5px ,邊線 1px,
一般寬如果設定為 20px,
矩形總寬算式為 : (5+1*2)+20,
得知矩形總寬為 32px 。
但如果使用 box-sizing,
總寬就會是 20px ,那內距與邊線不見了嗎?
不是,瀏覽器自動幫你在 20px 的矩形內設定內距為 5px 、邊線 1px,
即總寬不超過 20px ,但必須注意內文空間是否夠,
扣掉 12px 後只剩 8px 。
outline: 2px solid red;
outline-offset: 15px;
設定這兩行就可以改變區塊的外框線,
外框線跟邊框線不同,邊框線是緊貼區塊,
而外框線是設定離區塊多遠的線段。