整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
篇文章介紹CSS3中增強用戶界面的關(guān)于溢出、縮放、輪廓、鼠標(biāo)事件、文本選中等屬性的使用。這些屬性基本上得到了大部分瀏覽器的支持，可以在代碼中直接書寫。
承接文章：CSS3盒模型尺寸計算方法，box-sizing屬性的使用，你知道嗎？
技術(shù)等級：中級 | 適合有一定的CSS基礎(chǔ)的人士閱讀。
CSS3所提供的增強用戶界面的屬性以及與此相關(guān)的屬性比較多，小海前端（頭條號）將分幾次對其進行講解。所包含的所有增強用戶界面的屬性包括：
box-shadow
box-sizing
overflow-x
overflow-y
resize
outline
outline-width
outline-style
outline-color
outline-offset
pointer-events
user-select
appearance
content
counter-increment
counter-reset
quotes
本篇文章為大家講解上述粗體顯示的五組增強用戶界面屬性。
一、全新的溢出設(shè)置：
CSS3技術(shù)將原有的overflow屬性劃分為兩個方向的溢出屬性。
overflow-x，設(shè)置水平方向的溢出解決方案。
overflow-y，設(shè)置垂直方向的溢出解決方案。
這兩個屬性的取值和overflow屬性相同，可以取如下值：
auto，自動，當(dāng)發(fā)生溢出時，才出現(xiàn)滾動條。
visible，溢出的部分依然可見。
hiddle，溢出的部分隱藏。
scroll，若發(fā)生溢出，則強制顯示滾動條。
如果小伙伴們有不熟悉overflow屬性的用法的，可以參看小海前端（頭條號）寫的《CSS三個重要的定位屬性，使用頻率超高，定位屬性詳解》一文。
二、任意元素都可以縮放：
什么叫做元素縮放呢？我們來看小伙伴們都非常熟悉的表單元素：多行文本域。
<textarea name=”introduce” rows=”10” cols=”30”></textarea>
下圖為我們展示了多行文本域在Google Chrome瀏覽器中的外觀。
多行文本域自帶縮放調(diào)整功能
我們可以清晰地看出，在多行文本域的右下角有一個可以用來調(diào)整控件尺寸的位置圖標(biāo)，用戶利用鼠標(biāo)拖拽該圖標(biāo)就可以改變多行文本域的顯示大小。
如果希望一個普通的塊級元素也具備該拖拽圖標(biāo)，那應(yīng)該怎么解決呢？
CSS3提供了resize屬性來完成該功能。
CSS3技術(shù)使用resize屬性來設(shè)置對象是否具備縮放功能
該屬性可以取如下值：
none，塊級元素不具備右下角拖拽圖標(biāo)。
horizontal，塊級元素具備只可以改變水平方向?qū)挾鹊耐献D標(biāo)。
vertical，塊級元素具備只可以改變垂直方向高度的拖拽圖標(biāo)。
both，塊級元素具備可以同時改變寬度和高度的拖拽圖標(biāo)。
要想讓右下角的拖拽圖標(biāo)生效，必須設(shè)置塊級元素的溢出屬性，并且溢出屬性的取值還不得為visible。
min-width，設(shè)置可拖拽范圍的最小寬度。
max-width，設(shè)置可拖拽范圍的最大寬度。
min-height，設(shè)置可拖拽范圍的最小高度。
max-height，設(shè)置可拖拽范圍的最大高度。
讓我們通過一個簡單的實例來實現(xiàn)塊級元素的縮放效果。
例：在頁面中有一個<div></div>塊級元素,其id屬性取值為box，內(nèi)部包含任意文本。設(shè)置該塊級元素的寬度為200像素，高度為200像素。通過CSS3設(shè)置要求該塊級元素能夠自由縮放，且寬度和高度不超過400像素。
CSS代碼如下所示：
#box{
width:200px; height:200px;
overflow:hidden;
resize:both;
max-width:400px;
max-height:400px;
}
三、元素本身的輪廓：
什么是元素輪廓呢？我們來看小伙伴們都非常熟悉的表單元素：文本域。
<input type=”text” name=”nick” />
下圖為我們展示了文本域在Google Chrome瀏覽器中獲得鼠標(biāo)焦點時的外觀。
文本框獲得焦點時顯示的對象輪廓
我們可以清晰地看出，當(dāng)文本域獲得鼠標(biāo)焦點時，在其邊框位置處又一圈淡藍色的線條對其進行包裹，這就是文本框的輪廓。
CSS3提供了outline及其派生屬性來調(diào)整元素的輪廓，其派生屬性包括：
outline-width，設(shè)置元素的輪廓寬度。
outline-color，設(shè)置元素的輪廓顏色。
outline-style，設(shè)置元素的輪廓樣式。
除此之外，CSS3還提供了用來設(shè)置輪廓偏移的屬性：
loutline-offset，該屬性不是outline屬性的派生屬性，因此必須單獨使用。
屬性outline的取值格式如下所示：
outline:<outline-style> <outline-width> <outline-color>
要想去掉表單元素中自帶的輪廓屬性，可以設(shè)置outline屬性的取值為none。
input[type=text]:focus{
outline:none;
}
上段代碼設(shè)置當(dāng)type屬性取值為text的<input />標(biāo)記獲得鼠標(biāo)焦點時，將其自帶的輪廓隱藏。
例：我們來為一個塊級元素設(shè)置輪廓效果。
#box{
outline:solid 1px #7a9cd3;
outline-offset:10px;
}
下圖為我們展示了上段CSS代碼中輪廓的效果。
輪廓線的偏移效果
默認情況下，輪廓會占據(jù)邊框的位置。由于outline-offset屬性的設(shè)置，可以看出，輪廓從邊框位置向外偏移了10像素的距離。
四、對元素取消鼠標(biāo)事件：
CSS3提供了一個名為pointer-events的屬性，用來設(shè)置對象不能成為鼠標(biāo)事件的目標(biāo)。
該屬性的取值較多，但是大部分取值主流瀏覽器尚不支持，當(dāng)該屬性取值為none時，對象就不再是鼠標(biāo)事件的目標(biāo)了。
CSS3技術(shù)使用pointer-events屬性取值none來取消元素的鼠標(biāo)事件
若設(shè)置了對象不再是鼠標(biāo)的事件目標(biāo)，則該對象上綁定的事件代碼將不再生效。鼠標(biāo)單擊該對象時，這個鼠標(biāo)動作會自動作用在該對象下方的對象上。
五、是否允許選中文本：
CSS3提供了一個名為user-select的屬性，用來設(shè)置在頁面中是否允許文本被選中。
CSS3技術(shù)使用user-select屬性設(shè)置是否允許文本被選中
該屬性可以取如下值：
none，對象內(nèi)部的文本不允許被選中。
text，對象內(nèi)部的文本允許被選中。
all，對象內(nèi)部的文本只允許作為一個整體被選中。
在CSS2時代，要想讓頁面文本不允許被鼠標(biāo)選中，只能使用JavaScript技術(shù)編寫代碼。有了user-select屬性，實現(xiàn)這一效果變得更加簡單。
在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設(shè)計版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認真閱讀，你一定會學(xué)到對你有用的知識。
關(guān)注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅持的走下去。
明天的文章中，將為大家講解剩下的增強用戶界面的屬性，包括appearance和content屬性的使用。
摸屏拓展控件。
按鈕和滾動條都放大，適合觸摸。
orm表單
使普通form表單變?yōu)閍jax提交方式的表單。
ValidateBox（驗證框）
ComboBox（下拉列表框）
自定義下拉框顯示一個可編輯的文本框和下拉面板在html頁面。
ComboTree（樹形下拉框）
樹形下拉框結(jié)合選擇控件和下拉樹控件。它與combobox(下拉列表框)類似，但是將下拉列表框的列表替換成了樹形控件。該控件支持樹狀態(tài)復(fù)選框，方便多選操作。
ComboGrid（數(shù)據(jù)表格下拉框）
數(shù)據(jù)表格下拉框結(jié)合了可編輯文本框控件和下拉數(shù)據(jù)表格面板控件，該控件允許用戶快速查找和選擇，并且該控件提供了鍵盤導(dǎo)航支持，對行進行篩選。
NumberBox（數(shù)值輸入框）
數(shù)值輸入框是用來限制用戶只能輸入數(shù)值型數(shù)據(jù)的。他可以轉(zhuǎn)換一個輸入的元素到其他類型，比如：數(shù)字、百分比、貨幣等。更多的輸入類型定義依賴于'formatter'和'parser'函數(shù)。
DateBox（日期輸入框）
日期輸入框結(jié)合了一個可編輯的文本框控件和允許用戶選擇日期的下拉日歷面板控件。選擇的日期會自動轉(zhuǎn)變?yōu)橐粋€有效的日期然后填充到文本框中。選定的日期也可以被格式化為預(yù)定格式。
DateTimeBox（日期時間輸入框）
和日期輸入框類似，日期時間輸入框允許用戶選擇日期和指定的時間并按照指定的輸出格式顯示。相比日期輸入框，它在下拉面板中添加了一個時間微調(diào)器。
Calendar（日歷）
日歷控件顯示一個月的日歷，允許用戶選擇日期和移動到下一個或上一個月。默認情況下，一周的第一天是周日。它可以通過設(shè)置'firstDay'屬性的值來更改設(shè)置。
NumberSpinner（數(shù)字微調(diào)）
數(shù)字微調(diào)控件的創(chuàng)建是基于微調(diào)控件和數(shù)值輸入框控件的。他可以轉(zhuǎn)換輸入的值，比如：數(shù)值、百分比、貨幣等。它也允許使用上/下微調(diào)按鈕調(diào)整到用戶的期望值。
TimeSpinner（時間微調(diào)）
時間微調(diào)組件的創(chuàng)建基于微調(diào)組件。它和數(shù)字微調(diào)類似，但是顯示的時間值。時間微調(diào)組件允許用戶點擊組件右側(cè)的小按鈕來增加或減少時間。
Slider（滑動條）
滑動條允許用戶從一個有限的范圍內(nèi)選擇一個數(shù)值。當(dāng)滑塊控件沿著軌道移動的時候，將會顯示一個提示來表示當(dāng)前值。用戶可以通過設(shè)置其屬性自定義滑塊。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
