CSS基礎知識
- 元素的顯示與隱藏
- display 顯示
- visibility 可見性
- overflow 溢位
- CSS用戶界面樣式
- 滑鼠樣式cursor
- 輪廓線 outline
- 防止拖拽文本域resize
- vertical-align 垂直對齊
- 圖片、表單和文字對齊
- 去除圖片底側空白縫隙
- 溢位的文字省略號顯示
- white-space
- text-overflow 文字溢位
- CSS精靈技術（sprite)
- 為什么需要精靈技術
- 精靈技術講解
元素的顯示與隱藏
display 顯示
display 設定或檢索物件是否及如何顯示
語法
display: none 隱藏物件
display：block 除了轉換為塊級元素之外，同時還有顯示元素的意思
特點
隱藏之后，不再保留位置
visibility 可見性
設定或檢索是否顯示物件
語法
visibility：visible ; 物件可視
visibility：hidden; 物件隱藏
特點
隱藏之后，繼續保留原有位置
overflow 溢位
檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容
屬性值及描述
visible 不剪切內容也不添加滾動條
hidden 不顯示超過物件尺寸的內容，超出的部分隱藏掉
scroll 不管超出內容否，總是顯示滾動條
auto 超出自動顯示滾動條，不超出不顯示滾動條
CSS用戶界面樣式
滑鼠樣式cursor
設定或檢索在物件上移動的滑鼠指標采用何種系統預定義的游標形狀
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移動</li>
<li style="cursor:text">我是文本</li>
<li style="cursor:not-allowed">我是文本</li>
</ul>
輪廓線 outline
是繪制于元素周圍的一條線，位于邊框邊緣的外圍
語法
outline : outline-color ||outline-style || outline-width
防止拖拽文本域resize
文本域右下角不可拖拽語法
<textarea style="resize: none;"></textarea>
vertical-align 垂直對齊
有寬度的塊級元素水平居中對齊，是margin: 0 auto;
讓元素中的文字居中對齊，是 text-align: center;
語法
vertical-align : baseline|top|middle|bottom
vertical-align不影響塊級元素中的內容對齊，它只針對于行內元素或者行內塊元素，通常用來控制圖片/表單與文字的對齊
圖片、表單和文字對齊
默認的圖片會和文字基線對齊
去除圖片底側空白縫隙
原因
圖片或者表單等行內塊元素底線會和父級盒子的基線對齊
解決方法
給img vertical-align:middle | top| bottom等等，讓圖片不和基線對齊
給img 添加 display：block; 轉換為塊級元素就不會存在問題了
溢位的文字省略號顯示
/*1. 先強制一行內顯示文本*/
white-space: nowrap;
/*2. 超出的部分隱藏*/
overflow: hidden;
/*3. 文字用省略號替代超出的部分*/
text-overflow: ellipsis;
white-space
white-space設定或檢索物件內文本顯示方式，用于強制一行顯示內容
white-space:normal ；默認處理方式
white-space:nowrap ； 強制在同一行內顯示所有文本，直到文本結束或者遭遇br標簽物件才換行
text-overflow 文字溢位
設定或檢索是否使用一個省略標記（…）標示物件內文本的溢位
text-overflow : clip ；不顯示省略標記（...），而是簡單的裁切
text-overflow：ellipsis ； 當物件內文本溢位時顯示省略標記（...）
CSS精靈技術（sprite)
為什么需要精靈技術
為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度
精靈技術講解
CSS 精靈其實是將網頁中的一些背景影像整合到一張大圖中（精靈圖），各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖，background-image、background-repeat、background-position屬性進行背景定位
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/48069.html
標籤：其他