整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          CSS3增強(qiáng)用戶界面,有關(guān)溢出、縮放、輪廓與文本選中

          CSS3增強(qiáng)用戶界面,有關(guān)溢出、縮放、輪廓與文本選中的解決方案

          篇文章介紹CSS3中增強(qiáng)用戶界面的關(guān)于溢出、縮放、輪廓、鼠標(biāo)事件、文本選中等屬性的使用。這些屬性基本上得到了大部分瀏覽器的支持,可以在代碼中直接書寫。

          承接文章:CSS3盒模型尺寸計(jì)算方法,box-sizing屬性的使用,你知道嗎?

          技術(shù)等級(jí):中級(jí) | 適合有一定的CSS基礎(chǔ)的人士閱讀。

          希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號(hào),因?yàn)檫@些文章都是連載的,并且是經(jīng)過(guò)系統(tǒng)的歸納和總結(jié)的。塌下心來(lái)認(rèn)真閱讀,你一定會(huì)學(xué)到對(duì)你有用的知識(shí)。

          CSS3所提供的增強(qiáng)用戶界面的屬性以及與此相關(guān)的屬性比較多,小海前端(頭條號(hào))將分幾次對(duì)其進(jìn)行講解。所包含的所有增強(qiáng)用戶界面的屬性包括:

          • 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

          本篇文章為大家講解上述粗體顯示的五組增強(qiáng)用戶界面屬性。

          一、全新的溢出設(shè)置:

          CSS3技術(shù)將原有的overflow屬性劃分為兩個(gè)方向的溢出屬性。

          • overflow-x,設(shè)置水平方向的溢出解決方案。

          • overflow-y,設(shè)置垂直方向的溢出解決方案。

          這兩個(gè)屬性的取值和overflow屬性相同,可以取如下值:

          • auto,自動(dòng),當(dāng)發(fā)生溢出時(shí),才出現(xiàn)滾動(dòng)條。

          • visible,溢出的部分依然可見。

          • hiddle,溢出的部分隱藏。

          • scroll,若發(fā)生溢出,則強(qiáng)制顯示滾動(dòng)條。

          如果小伙伴們有不熟悉overflow屬性的用法的,可以參看小海前端(頭條號(hào))寫的《CSS三個(gè)重要的定位屬性,使用頻率超高,定位屬性詳解》一文。

          二、任意元素都可以縮放:

          什么叫做元素縮放呢?我們來(lái)看小伙伴們都非常熟悉的表單元素:多行文本域。

          <textarea name=”introduce” rows=”10” cols=”30”></textarea>

          下圖為我們展示了多行文本域在Google Chrome瀏覽器中的外觀。

          多行文本域自帶縮放調(diào)整功能

          我們可以清晰地看出,在多行文本域的右下角有一個(gè)可以用來(lái)調(diào)整控件尺寸的位置圖標(biāo),用戶利用鼠標(biāo)拖拽該圖標(biāo)就可以改變多行文本域的顯示大小。

          如果希望一個(gè)普通的塊級(jí)元素也具備該拖拽圖標(biāo),那應(yīng)該怎么解決呢?

          CSS3提供了resize屬性來(lái)完成該功能。

          CSS3技術(shù)使用resize屬性來(lái)設(shè)置對(duì)象是否具備縮放功能

          該屬性可以取如下值:

          • none,塊級(jí)元素不具備右下角拖拽圖標(biāo)。

          • horizontal,塊級(jí)元素具備只可以改變水平方向?qū)挾鹊耐献D標(biāo)。

          • vertical,塊級(jí)元素具備只可以改變垂直方向高度的拖拽圖標(biāo)。

          • both,塊級(jí)元素具備可以同時(shí)改變寬度和高度的拖拽圖標(biāo)。

          1、該屬性使用時(shí)必須結(jié)合溢出屬性。

          要想讓右下角的拖拽圖標(biāo)生效,必須設(shè)置塊級(jí)元素的溢出屬性,并且溢出屬性的取值還不得為visible。

          2、可以結(jié)合下列CSS3屬性來(lái)控制塊級(jí)元素拖拽的尺寸范圍。

          • min-width,設(shè)置可拖拽范圍的最小寬度。

          • max-width,設(shè)置可拖拽范圍的最大寬度。

          • min-height,設(shè)置可拖拽范圍的最小高度。

          • max-height,設(shè)置可拖拽范圍的最大高度。

          讓我們通過(guò)一個(gè)簡(jiǎn)單的實(shí)例來(lái)實(shí)現(xiàn)塊級(jí)元素的縮放效果。

          例:在頁(yè)面中有一個(gè)<div></div>塊級(jí)元素,其id屬性取值為box,內(nèi)部包含任意文本。設(shè)置該塊級(jí)元素的寬度為200像素,高度為200像素。通過(guò)CSS3設(shè)置要求該塊級(jí)元素能夠自由縮放,且寬度和高度不超過(guò)400像素。

          CSS代碼如下所示:

          #box{

          width:200px; height:200px;

          overflow:hidden;

          resize:both;

          max-width:400px;

          max-height:400px;

          }

          三、元素本身的輪廓:

          什么是元素輪廓呢?我們來(lái)看小伙伴們都非常熟悉的表單元素:文本域。

          <input type=”text” name=”nick” />

          下圖為我們展示了文本域在Google Chrome瀏覽器中獲得鼠標(biāo)焦點(diǎn)時(shí)的外觀。

          文本框獲得焦點(diǎn)時(shí)顯示的對(duì)象輪廓

          我們可以清晰地看出,當(dāng)文本域獲得鼠標(biāo)焦點(diǎn)時(shí),在其邊框位置處又一圈淡藍(lán)色的線條對(duì)其進(jìn)行包裹,這就是文本框的輪廓。

          CSS3提供了outline及其派生屬性來(lái)調(diào)整元素的輪廓,其派生屬性包括:

          • outline-width,設(shè)置元素的輪廓寬度。

          • outline-color,設(shè)置元素的輪廓顏色。

          • outline-style,設(shè)置元素的輪廓樣式。

          除此之外,CSS3還提供了用來(lái)設(shè)置輪廓偏移的屬性:

          loutline-offset,該屬性不是outline屬性的派生屬性,因此必須單獨(dú)使用。

          屬性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)焦點(diǎn)時(shí),將其自帶的輪廓隱藏。

          例:我們來(lái)為一個(gè)塊級(jí)元素設(shè)置輪廓效果。

          #box{

          outline:solid 1px #7a9cd3;

          outline-offset:10px;

          }

          下圖為我們展示了上段CSS代碼中輪廓的效果。

          輪廓線的偏移效果

          默認(rèn)情況下,輪廓會(huì)占據(jù)邊框的位置。由于outline-offset屬性的設(shè)置,可以看出,輪廓從邊框位置向外偏移了10像素的距離。

          四、對(duì)元素取消鼠標(biāo)事件:

          CSS3提供了一個(gè)名為pointer-events的屬性,用來(lái)設(shè)置對(duì)象不能成為鼠標(biāo)事件的目標(biāo)。

          該屬性的取值較多,但是大部分取值主流瀏覽器尚不支持,當(dāng)該屬性取值為none時(shí),對(duì)象就不再是鼠標(biāo)事件的目標(biāo)了。

          CSS3技術(shù)使用pointer-events屬性取值none來(lái)取消元素的鼠標(biāo)事件

          若設(shè)置了對(duì)象不再是鼠標(biāo)的事件目標(biāo),則該對(duì)象上綁定的事件代碼將不再生效。鼠標(biāo)單擊該對(duì)象時(shí),這個(gè)鼠標(biāo)動(dòng)作會(huì)自動(dòng)作用在該對(duì)象下方的對(duì)象上。

          五、是否允許選中文本:

          CSS3提供了一個(gè)名為user-select的屬性,用來(lái)設(shè)置在頁(yè)面中是否允許文本被選中。

          CSS3技術(shù)使用user-select屬性設(shè)置是否允許文本被選中

          該屬性可以取如下值:

          • none,對(duì)象內(nèi)部的文本不允許被選中。

          • text,對(duì)象內(nèi)部的文本允許被選中。

          • all,對(duì)象內(nèi)部的文本只允許作為一個(gè)整體被選中。

          在CSS2時(shí)代,要想讓頁(yè)面文本不允許被鼠標(biāo)選中,只能使用JavaScript技術(shù)編寫代碼。有了user-select屬性,實(shí)現(xiàn)這一效果變得更加簡(jiǎn)單。

          小海聲明

          在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過(guò)我寫的文章,逐步學(xué)到一定的知識(shí),甚至慢慢有了入門的感覺(jué)。這些文章都是我這幾年教學(xué)過(guò)程中的經(jīng)驗(yàn),每寫一篇時(shí)我都盡量把握好措辭,用簡(jiǎn)單易懂的語(yǔ)言描述,同時(shí)精心設(shè)計(jì)版面,讓版面更加豐富,激發(fā)閱讀興趣。所以,每一篇文章可能篇幅不長(zhǎng),但是都要耗費(fèi)小海老師很久的時(shí)間。

          希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號(hào),因?yàn)檫@些文章都是連載的,并且是經(jīng)過(guò)系統(tǒng)的歸納和總結(jié)的。塌下心來(lái)認(rèn)真閱讀,你一定會(huì)學(xué)到對(duì)你有用的知識(shí)。

          關(guān)注“小海前端”,我會(huì)繼續(xù)為大家奉上更加深入的前端開發(fā)文章,也希望更多的初學(xué)者跟著學(xué)下去,我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。

          文章預(yù)告

          明天的文章中,將為大家講解剩下的增強(qiáng)用戶界面的屬性,包括appearance和content屬性的使用。

          摸屏拓展控件。

          按鈕和滾動(dòng)條都放大,適合觸摸。

          orm表單

          使普通form表單變?yōu)閍jax提交方式的表單。

          ValidateBox(驗(yàn)證框)

          ComboBox(下拉列表框)

          自定義下拉框顯示一個(gè)可編輯的文本框和下拉面板在html頁(yè)面。

          ComboTree(樹形下拉框)

          樹形下拉框結(jié)合選擇控件和下拉樹控件。它與combobox(下拉列表框)類似,但是將下拉列表框的列表替換成了樹形控件。該控件支持樹狀態(tài)復(fù)選框,方便多選操作。

          ComboGrid(數(shù)據(jù)表格下拉框)

          數(shù)據(jù)表格下拉框結(jié)合了可編輯文本框控件和下拉數(shù)據(jù)表格面板控件,該控件允許用戶快速查找和選擇,并且該控件提供了鍵盤導(dǎo)航支持,對(duì)行進(jìn)行篩選。

          NumberBox(數(shù)值輸入框)

          數(shù)值輸入框是用來(lái)限制用戶只能輸入數(shù)值型數(shù)據(jù)的。他可以轉(zhuǎn)換一個(gè)輸入的元素到其他類型,比如:數(shù)字、百分比、貨幣等。更多的輸入類型定義依賴于'formatter'和'parser'函數(shù)。

          DateBox(日期輸入框)

          日期輸入框結(jié)合了一個(gè)可編輯的文本框控件和允許用戶選擇日期的下拉日歷面板控件。選擇的日期會(huì)自動(dòng)轉(zhuǎn)變?yōu)橐粋€(gè)有效的日期然后填充到文本框中。選定的日期也可以被格式化為預(yù)定格式。

          DateTimeBox(日期時(shí)間輸入框)

          和日期輸入框類似,日期時(shí)間輸入框允許用戶選擇日期和指定的時(shí)間并按照指定的輸出格式顯示。相比日期輸入框,它在下拉面板中添加了一個(gè)時(shí)間微調(diào)器。

          Calendar(日歷)

          日歷控件顯示一個(gè)月的日歷,允許用戶選擇日期和移動(dòng)到下一個(gè)或上一個(gè)月。默認(rèn)情況下,一周的第一天是周日。它可以通過(guò)設(shè)置'firstDay'屬性的值來(lái)更改設(shè)置。

          NumberSpinner(數(shù)字微調(diào))

          數(shù)字微調(diào)控件的創(chuàng)建是基于微調(diào)控件和數(shù)值輸入框控件的。他可以轉(zhuǎn)換輸入的值,比如:數(shù)值、百分比、貨幣等。它也允許使用上/下微調(diào)按鈕調(diào)整到用戶的期望值。

          TimeSpinner(時(shí)間微調(diào))

          時(shí)間微調(diào)組件的創(chuàng)建基于微調(diào)組件。它和數(shù)字微調(diào)類似,但是顯示的時(shí)間值。時(shí)間微調(diào)組件允許用戶點(diǎn)擊組件右側(cè)的小按鈕來(lái)增加或減少時(shí)間。

          Slider(滑動(dòng)條)

          滑動(dòng)條允許用戶從一個(gè)有限的范圍內(nèi)選擇一個(gè)數(shù)值。當(dāng)滑塊控件沿著軌道移動(dòng)的時(shí)候,將會(huì)顯示一個(gè)提示來(lái)表示當(dāng)前值。用戶可以通過(guò)設(shè)置其屬性自定義滑塊。


          主站蜘蛛池模板: 国产日韩一区二区三免费高清| 免费无码AV一区二区| 久久久国产精品亚洲一区| 无码中文字幕人妻在线一区二区三区 | 国模大胆一区二区三区| 国内精品无码一区二区三区| 国产一区二区成人| 中文字幕视频一区| 中文字幕人妻丝袜乱一区三区| 麻豆视传媒一区二区三区| 中文无码一区二区不卡αv| 久久国产精品无码一区二区三区| 日本亚洲国产一区二区三区| 亚洲国产激情一区二区三区| 国产激情一区二区三区在线观看| 国产精品一区视频| 日日摸夜夜添一区| 无码人妻一区二区三区兔费| 亚洲欧洲无码一区二区三区| 中文字幕无线码一区2020青青 | 国产成人综合一区精品| 亚洲一区中文字幕久久| 少妇特黄A一区二区三区| 91在线一区二区| 成人中文字幕一区二区三区| 天堂va在线高清一区| 成人久久精品一区二区三区| 日韩一区二区免费视频| 国产一区二区三区国产精品| 精品在线视频一区| 一区二区乱子伦在线播放| 伊人色综合一区二区三区| 亚洲韩国精品无码一区二区三区| 精品久久一区二区三区| 久久人做人爽一区二区三区| 国内精品一区二区三区在线观看 | 日韩精品无码一区二区三区AV | 国产一区二区精品久久岳√| 国产精品电影一区二区三区| V一区无码内射国产| 亚洲国产日韩一区高清在线|