box-sizing、resize、outline-width、outline-style、outline-color、outline
常見使用者介面屬性
本節重點主要介紹以下的使用者介面屬性
瀏覽器支援，如下圖所示
resize屬性規定使用者是否可以調整元素尺寸，常用屬性值如下
注意：
如果希望此屬性生效，需要設定元素的 overflow 屬性，值可以是 auto、hidden 或 scroll
resize開發嚴謹相容寫法：
在日常開發裡，如果**嚴謹要求度較高，最好依次加上瀏覽器相容字首，例如通過resize屬性，讓文字域可以沿水平方向拖大。**為：
resize案例：
resize常見應用場景：
去除文字域textarea自帶樣式
語法：outline:none;
box-sizing 屬性允許以確切的方式定義適應某個區域的具體內容，通俗理解就是定義盒子模型。
瀏覽器相容：
**中的數字表示支援該屬性的第乙個瀏覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支援該字首屬性的第乙個瀏覽器版本號
分類：
盒子模型分為標準盒模型和ie怪異盒模型
區別：
標準盒模型的width和height就是content的寬高；而ie盒模型的width和height則是由content+padding+border組成。
開發寫法：
為了相容不同的瀏覽器，我們通常使用box-sizing來將標準盒模型變為ie盒模型（反之也可以，只要統一標準就行）
簡介：在乙個宣告中設定所有的輪廓屬性，外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似，但和元素邊框border完全不同，外輪廓線不占用網頁布局空間，不一定是矩形，屬於一種動態樣式，對於表單元素只有元素獲取到焦點或被啟用時呈現，如果在其他元素中設定，一般可起到突出元素的作用。
語法：
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
outline外輪廓線整合屬性（類似於border）
案例：
設定普通元素輪廓線
案例：
設定表單元素輪廓線
案例：
設定表單元素輪廓線正確寫法
這裡需要結合css3的焦點聚焦選擇器:focus
:focus 選擇器
用於選取獲得焦點的元素，接收鍵盤事件或其他使用者輸入的元素都允許 :focus 選擇器
重點屬性outline-offset：
簡介：
outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓
案例：
設定輪廓線與邊框之間的距離
注意：
外輪廓線不占用網頁布局空間，此時再次聚焦時，輸入框邊框外側10px出現輪廓線
CSS3 增強使用者介面
前言 在 css3 中，增加了一些新的使用者介面特性來調整元素尺寸 框尺寸 外邊框等，本節來依次介紹下。內容 主要介紹以下的使用者介面屬性 瀏覽器支援，如下圖所示 resize屬性規定使用者是否可以調整元素尺寸，常用屬性值如下 注意 如果希望此屬性生效，需要設定元素的 overflow 屬性，值可以...
CSS3使用者介面
使用者介面 css3 規範新增了 ui模組，該模組用來控制與使用者介面相關效果的呈現方式，詳細資料參閱 css3 ui css3對盒模型進行了改善，定義了 box sizing 屬性，該屬性能夠事先定義盒模型的尺寸解析方式，基本語法如下所示 box sizing content box border...
CSS3多列和使用者介面
css3 多列 建立多個列來對文字進行布局 就像報紙那樣 column count 3 把 div 元素中的文字分隔為三列 column gap 70px 規定列之間的間隔 column rule 1px outset ff0000 規定列之間的寬度 樣式和顏色規則 css3 使用者介面 resiz...