9 1 CSS高階技巧

2022-09-23 03:42:09 字數 4496 閱讀 2846

元素的顯示和隱藏

css使用者介面樣式

vertical-align

溢位的文字隱藏

css精靈技術

滑動門20.1 元素的顯示和隱藏

20.1.1 display來控制顯示和隱藏(重點)

display: none;

隱藏物件,並且不保留位置

display: block;

除了轉換為塊級元素外,同時還有顯示元素的意思

20.1.2 visibility顯示和隱藏

visibility: visible;    物件可視

visibility: hidden; 物件隱藏,保留位置

20.1.3 overflow 溢位(重點)

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

overflow: hidden; 不顯示超出物件尺寸的內容,超出隱藏

overflow: scroll; 不管內容是否超出物件尺寸,總是顯示滾動條(傻瓜)

overflow: auto; 超出顯示滾動條,不超出不顯示滾動條(智慧)

顯示和隱藏 小結:屬性區別

用途

display

隱藏物件,不保留位置

配合js做特效,比如下拉選單,原先沒有,滑鼠經過,顯示出來。應用極為廣泛

visibility

隱藏物件,保留位置

使用較少

overflow

只是隱藏超出的部分

1. 可以清除浮動 2. 保證盒子裡面的內容不會超出該盒子範圍

**a裡面可以放塊級元素。**

20.2css使用者介面樣式

20.2.1 滑鼠樣式cursor

cursor: default;       小白,預設

cursor: pointer; 小手

cursor: move; 移動

cursor: text; 文字

cursor: not-allowed; 禁止

更多滑鼠樣式20.2.2 輪廓線outline

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

樣式寫法和border同理,順序沒有要求。

實際開發中一般直接統一把表單設定為無輪廓線:(如果有文字域也要設定)

input input 

兩者選一個。

20.2.3 防止使用者拖拽文字域resize

resize: none;
使用者介面樣式 小結:屬性作用用途

滑鼠樣式

更改滑鼠樣式cursor

樣式很多,重點記住pointer

輪廓線

表單預設outline

outline 輪廓線,我們一般直接去掉,border邊框,我們倒是經常使用

防止拖拽

主要針對文字域resize

防止使用者隨意拖拽文字域,造成頁面佈局混亂,我們用resize: none;

20.3 垂直居中vertical-align

vertical-align 只針對行內元素或者行內塊!

vertical-align: baseline | top| middle| bottom;
再複習一下:

一行文字有四條線組成:

頂線、中線、基線、頂線。

注意:vertical-align 不影響塊級元素中的內容對齊,它只針對於行內元素或者行內塊元素,

特別是行內塊元素,經常用來控制/表單與文字的對齊。屬性設定到上。

20.3.1 【vertical-aign 控制/表單與文字的對齊】

例子(這個太可愛了,一定要截過來。awsl~)

20.3.2 【去除底側空白縫隙】

原理:因為或者表單等元素,它的底線預設是和父級盒子的基線對齊的。所以底側會產生一個空白縫隙。

解決方法  一:讓不要和基線對齊。

vertical-align: middle |top | bottom    只要不寫基線baseline就好。
解決方法 二:將img行內塊轉化為塊元素。行內元素才會有預設基線對齊的設定。

display: block;  將行內塊轉換為塊級元素。
20.4 溢位的文字用省略號顯示20.4.1(三步缺一不可)white

white-space: nowrap;  它的預設屬性是white-space: normal;

原理:如果white-space不寫no-wrap,那麼就能換行了,換行了肯定能顯示全內容,那還怎麼實現溢位文字用省略號顯示?

20.4.2(三步缺一不可

overflow: hidden;
原理:超出隱藏。

20.4.3 (三步缺一不可

text-overflow: ellipsis;    省略號~
原理:文字用省略號替代超出的部分。

20.5css精靈技術(sprite)(重點)

當使用者訪問一個**時,需要向伺服器傳送請求,因為網頁是設定在伺服器上的,網頁上的每張影象都要經過一次請求才能展現給使用者。

然而,一個網頁中往往會用到很多小的背景影象作為裝飾,當網頁中影象過多時,伺服器就會頻繁地接受和傳送請求,

會大大降低頁面的載入速度。

這時,精靈技術就應運而生,就是為了有效地減少伺服器接受和傳送請求的次數,提高頁面的載入速度。

用法:

製作精靈圖(瞭解)(裝飾背景很多張才用,沒幾張就不要用,增加維護成本。)

知道了css精靈技術其實是將網頁中的一些背景影象整合到一張大圖中(精靈圖),那我們要做的,就是把小圖拼合成一章大圖。

建議

我們精靈圖上放的都是小的裝飾性質的背景。插入不能往上放。

我們可以橫向擺放也可以縱向擺放,但是每個之間留有適當的空隙。

在我們精靈圖的最底端,留一片空隙,方便我們以後新增其他精靈圖。

流程:ps---->新建---->設定寬高(畫素)解析度設定為72畫素/英寸(這樣代表圖上的1畫素就是網頁裡面的1px)然後背景色啥的...---->拖拽圖層到空白背景剪貼簿上,原則參照上面的黃色背景建議,

做完後,

---->儲存為,選擇png格式儲存,選中預設選項,確定。

20.6 滑動門

基本**如下,明白原理就好。

首頁 html樣式

a a span

解析

a設定背景左側, padding撐開合適寬度(這裡用padding-left)。

span設定背景右側,padding撐開合適寬度(這裡用padding-right),剩下由文字繼續撐開寬度。

之所以a包含span 則是因為整個導航都是可以點選的。

css常用技巧1

border transparent 透明 transition all 0 2s 動畫效果,all指的是所有屬性,如width trans...