HTML5開發系列(9) 之 CSS高階技巧

2021-08-28 06:06:56 字數 1040 閱讀 9034

1.1     cursor:default  預設的滑鼠樣式

1.2    cursor:pointer  小手的樣子

1.3     cursor:text    勾選文字的樣式;

1.4   cursor:move   拖動的樣式;

比如input預設有一臉色的輪廓線;

和border(邊框)很像;

一般情況下都是去掉這種樣式的;

input
預設是可以拖動改變文字域大小的,在實際開發中是去掉這個屬性的;

resize:none;

vertical-align :垂直對齊屬性,但是對於塊元素是無效的;

有baseline    、top、 middle、bottom 四種對齊方式;

只有對行內元素和行內塊才有效,必須保證在一行顯示的才行;

控制文字和垂直關係;

文字輸入區域

和表單等行內塊元素的底線會和父盒子的基線對齊;所以在有些瀏覽器上回有縫隙;

解決方法:

1.可以顯示轉換成塊元素;

2.預設是vertical-align:baseline;但是這種有縫隙,所以該成top midden  bottm都可以解決縫隙問題;

6.1 自動換行  

work-break:break-all      允許才分單詞進行換行;

keep-all  必須是帶有連字元才能換行;

6.2 一行顯示

while-space:nomal  預設是這樣;

while-space:nowrap  強制一行顯示;

6.3 省略顯示

1.首先要一行顯示;強制的   while-space:nowrap;

2.隱藏超出的部分     overflow: hidden;

3.設定省略號         text-overflow: ellipsis;

HTML5開發系列(6) 之 CSS三大特性

當同乙個標籤定義了多個樣式的時候,就存在樣式屬性衝突,樣式屬性相同則被覆蓋 當css樣式衝突的時候會執行後定義的樣式,如果樣式屬性不衝突則分開執行 我是於給div 當給父類設定相關的屬性後,子標籤會繼承父類的這些屬性顯示出來,但是不是所有的屬性樣式都是可以繼承的 可以繼承的屬性有 text font...

HTML5前端開發入門之CSS浮動流

1.什麼是浮動元素的脫標?脫標 脫離標準流 當某乙個元素脫標以後,那麼這個元素看上去就像被從標準流中刪除了一樣,這個就是浮動元素的脫標 2.浮動元素脫標之後會有什麼影響?如果前面乙個元素浮動了,而後面乙個元素沒有浮動,那麼這個時候前面的乙個元素就會蓋住後面的乙個元素 1.浮動元素排序規則 1.1相同...

HTML5前端開發入門之CSS定位流

1.定位流分類 1.1相對定位 1.2絕對定位 1.3固定定位 1.4靜態定位 預設情況下元素就是靜態定位 2.什麼是相對定位?相對於自己在原來標準流中的位置進行移動 格式 position relative top 20px left 20px 3.相對定位注意點 3.1相對定位是不脫離標準流的,...