css筆記之高階技巧

2022-08-30 10:45:15 字數 1855 閱讀 5504

所謂的介面樣式, 就是更改一些使用者操作樣式, 比如 更改使用者的滑鼠樣式, 表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制,因此我們就放棄了。 防止表單域拖拽

設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。

cursor :  default  小白 | pointer  小手  | move  移動  |  text  文字
滑鼠放我身上檢視效果哦:

<

ul>

<

li style

="cursor:default"

>我是小白

li>

<

li style

="cursor:pointer"

>我是小手

li>

<

li style

="cursor:move"

>我是移動

li>

<

li style

="cursor:text"

>我是文字

li>

ul>

盡量不要用hand 因為 火狐不支援 pointer ie6以上都支援的盡量用

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

outline : outline-color ||outline-style || outline-width
但是我們都不關心可以設定多少,我們平時都是去掉的。

最直接的寫法是 : outline: 0;

resize:none 這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文字域。

右下角可以拖拽:

<

textarea

>

textarea

>

右下角不可以拖拽:

<

textarea

style

="resize: none;"

>

textarea

>

以前我們講過讓帶有寬度的塊級元素居中對齊,是margin: 0 auto;

以前我們還講過讓文字居中對齊,是 text-align: center;

但是我們從來沒有講過有垂直居中的屬性, 我們的媽媽一直很擔心我們的垂直居中怎麼做。

vertical-align 垂直對齊, 這個看上去很美好的乙個屬性, 實際有著不可捉摸的脾氣,

vertical-align : baseline |top |middle |bottom
設定或檢索物件內容的垂直對其方式

vertical-align 不影響塊級元素中的內容對齊,它只針對於 行內元素或者行內塊元素,特別是行內塊元素, 通常用來控制和表單等

和文字對齊

所以我們知道,我們可以通過vertical-align 控制和文字的垂直關係了。 預設的會和文字基線對齊。

去除底側空白縫隙

有個很重要特性你要記住: 如果乙個元素沒有基線,比如或者表單等行內塊元素,則他的底線會和父級盒子的基線對齊。

這樣會造成乙個問題,就是底側會有乙個空白縫隙。解決的方法就是:

1.給img vertical-align:middle | top等等。 讓不要和基線對齊

CSS基礎之高階

今天是學習css的第二天,進一步學習了盒模型 text文字 背景 浮動的四個屬性,其中浮動最是重點。盒模型 padding border margin padding top 20px 上 padding right 30px 右 padding bottom 20px 下 padding left...

PHP Mysql程式設計之高階技巧

筆者做了以下的嘗試。php data time 199 23 59 59 localhost query id mysql query select date add data time interval 1 year connect id data time mysql result 程式設計客棧...

CSS高階技巧

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