CSS高階技巧

2021-10-14 07:52:17 字數 1143 閱讀 4222

1.1 dispaly設定或檢索物件是否以及如何顯示

dispaly:none 隱藏物件(隱藏元素,不保留位置)

dispaly:block 除了轉換為塊級元素之外,還有顯示元素的意思

1.2 visibility可見性

visibility:visible; 物件可見

visibility:hidden; 物件隱藏(隱藏元素,保留位置)

1.3 overflow溢位:檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容(只隱藏超出大小的部分)

visible 不剪下內容也不新增滾動條

hidden 不顯示超過物件尺寸的內容

scroll 不管是否超出內容 總是顯示滾動條

auto 若超出自動顯示滾動條 不超出不顯示滾動條

2.1 滑鼠樣式cursor:

default 小白 預設

pointer 小手

move 移動

text 文字

not-allowed 禁止

2.2 輪廓線outline

是繪製與元素周圍的一條線,位於邊框邊緣的外圍,可以起到突出元素的作用

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

先去掉邊框:outline:0 outline:none

2.3 防止拖拽文字域:

vertical-align垂直對齊(只針對於行內元素或者行內塊元素) 去除底側空白縫隙

有寬度的塊級元素居中對齊 margin:0 auto;

文字居中對齊 text-align:center;

vertical-align:baseline|top|middle|bottom

4.溢位文字省略號顯示

4.1 white-space 設定或檢索物件內文字顯示方式,通常我們使用與強制一行顯示內容

white-space:normal; 預設處理方式

white-space:nowrap; 強制在同一行內顯示所有文字,直到文字結束或者遭遇br標籤換行

4.2 text-overflow 文字溢位

text-overflow: clip; 不顯示省略標記 而是簡單的裁切

text-overflow: ellipsis; 當物件內文字溢位時顯示省略標記

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 隱藏物件 與...