css學習之路 四 高階技巧

2022-06-05 11:54:09 字數 1373 閱讀 3504

一、元素的顯示與隱藏

1.通過設定display屬性

display:none;  //設定元素隱藏

display:block;  //設定元素為塊級元素,同時也有顯示的效果

2.通過設定visibility可見性(了解)

visibility:visible ;  物件可視

visibility:hidden;   物件隱藏

3.通過overflow(溢位)屬性(重點)

總結,第一種元素被隱藏後不會佔據位置;第二種元素被隱藏後仍然佔據位置,使用較少;第三種主要用於隱藏超出的部分,也用於清除浮動

二、使用者介面樣式顯示

1.滑鼠樣式cursor,通過給cursor設定屬性值來實現

2.輪廓線outline,用來凸顯元素,位於邊框邊緣的外圍  //表單預設是有輪廓線的,其它的需要手動設定

outline : outline-color ||outline-style || outline-width 

3.防止拖拽文字域resize

一般設定成 resize:none  //表示不可拖拽

三、垂直對齊

1.vertical-align:middle  //垂直居中,只針對行內元素以及行內塊元素

2.讓溢位的文字用省略號的形式顯示

/*1. 先強制一行內顯示文字*/

white-space: nowrap;

/*2. 超出的部分隱藏*/

overflow: hidden;

/*3. 文字用省略號替代超出的部分*/

text-overflow: ellipsis;

四、精靈圖sprites(重要)

解決方式:精靈圖

解決原理:將多個碎片化的背景圖合成一張大的背景圖,這樣對於背景圖而言,瀏覽器就只用請求一次。

具體實現方式:

1.由美工也就是ui將精靈圖製作出來

2.對於元素需要使用精靈圖的某個部分時,首先要確定小圖在精靈圖的什麼位置position,以及小圖的寬高

3.屬性設定

background-image

background-repeat

background-position(最關鍵的屬性)

五、實現元素水平居中的方式:

1.margin:auto  //前提是這個元素是塊級元素,並且還要有寬度

2.絕對定位+margin-left:自身寬度的一半

CSS高階技巧

1.滑鼠樣式cursor 設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動 text 文字 2.溢位的文字隱藏 word break 自動換行 white space設定或檢索物件內文字顯示方式。通常我們使用於強制...

CSS高階技巧

所謂的介面樣式,就是更改一些使用者操作樣式,比如 更改使用者的滑鼠樣式,表單輪廓.防止表單域拖拽等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制。設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動 text 文字 ...

CSS高階技巧

在css中有三個顯示和隱藏的單詞比較常見,我們要區分開,他們分別是 display visibility 和 overflow。他們的主要目的是讓乙個元素在頁面中消失,但是不在文件原始碼中刪除。display 顯示 display 設定或檢索物件是否及如何顯示。display none 隱藏物件 與...