CSS3 新用戶界面屬性

在 CSS3 中,新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓等

  1. resize
  2. box-sizing
  3. outline-offset
CSS3 Resizing

默認值:none
繼承:no
JavaScript 語法:object.style.resize=“both”

語法:resize: none|both|horizontal|vertical

none 用戶無法調整元素的尺寸
both 用戶可調整元素的高度和寬度。
horizontal 用戶可調整元素的寬度
vertical 用戶可調整元素的高度

CSS3 Box Sizing

CSS3 box-sizing 屬性可以設置 width 和 height 屬性中包含了 padding(內邊距) 和 border(邊框)

不使用 CSS3 box-sizing 屬性:

默認情況下,元素的寬度與高度計算方式如下:
width(寬) + padding(內邊距) + border(邊框) = 元素實際寬度
height(高) + padding(內邊距) + border(邊框) = 元素實際高度

這就意味着我們在設置元素的 width/height 時,元素真實展示的高度與寬度會更大(因爲元素的邊框與內邊距也會計算在 width/height 中)

默認值 content-box
繼承性 no
JavaScript 語法: object.style.boxSizing=“border-box”

語法
box-sizing: content-box|border-box|inherit;

content-box: 這是由 CSS2.1 規定的寬度高度行爲
寬度和高度分別應用到元素的內容框,在寬度和高度之外繪製元素的內邊距和邊框
border-box :爲元素設定的寬度和高度決定了元素的邊框盒
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度
inherit: 規定應從父元素繼承 box-sizing 屬性的值

CSS3 Outline Offset

屬性定義及使用說明

outline-offset屬性設置輪廓框架在 border 邊緣外的偏移
Outlines在兩個方面不同於邊框:

  1. Outlines 不佔用空間
  2. Outlines 可能非矩形

默認值:0
繼承:no
JavaScript 語法:object.style.outlineOffset=“15px”*

語法:outline-offset: length|inherit:

length 輪廓與邊框邊緣的距離
inherit 規定應從父元素繼承 outline-offset 屬性的值

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章