CSS高階技巧
CSS高階技巧
CSS使用者介面樣式
所謂的介面樣式， 就是更改一些使用者操作樣式， 比如 更改使用者的滑鼠樣式， 表單輪廓以及防止表單域拖拽等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了。
滑鼠樣式cursor
設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。
cursor : default 小白 | pointer 小手 | move 移動 | text 文字
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:text">我是文字</li>
</ul>
輪廓 outline
是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我們都不關心可以設定多少，我們平時都是去掉的。
最直接的寫法是 ： outline: 0; 或者 outline: none;
<input type="text" style="outline: 0;"/>
resize：none 這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文字域。
右下角可以拖拽：
<textarea></textarea>
右下角不可以拖拽：
<textarea style="resize: none;"></textarea>
vertical-align 垂直對齊
以前我們講過讓帶有寬度的塊級元素居中對齊，是margin: 0 auto;
以前我們還講過讓文字居中對齊，是 text-align: center;
但是我們從來沒有講過有垂直居中的屬性
設定或檢索物件內容的垂直對其方式。
vertical-align 不影響塊級元素中的內容對齊，它只針對於 行內元素或者行內塊元素，特別是行內塊元素，通常用來控制圖片/表單與文字的對齊。
圖片、表單和文字對齊
所以我們知道，我們可以通過vertical-align 控制圖片和文字的垂直關係了。 預設的圖片會和文字基線對齊。
去除圖片底側空白縫隙
有個很重要特性你要記住： 圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊。這樣會造成一個問題，就是圖片底側會有一個空白縫隙。
解決的方法就是：
-
給img vertical-align:middle | top等等。 讓圖片不要和基線對齊。
- 給img 新增 display：block; 轉換為塊級元素就不會存在問題了。
溢位的文字隱藏
word-break:自動換行
normal 使用瀏覽器預設的換行規則。
break-all 允許在單詞內換行。
keep-all 只能在半形空格或連字元處換行。
主要處理英文單詞
white-space
white-space設定或檢索物件內文字顯示方式。通常我們使用於強制一行顯示內容
normal : 預設處理方式nowrap : 強制在同一行內顯示所有文字，直到文字結束或者遭遇br標籤物件才換行。
可以處理中文
text-overflow 文字溢位
text-overflow : clip | ellipsis
設定或檢索是否使用一個省略標記（...）標示物件內文字的溢位
clip : 不顯示省略標記（...），而是簡單的裁切
ellipsis : 當物件內文字溢位時顯示省略標記（...）
單行文字溢位顯示省略號：注意一定要首先強制一行內顯示，再次和overflow屬性 搭配使用
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
多行文字溢位顯示省略號：
有較大相容性問題，適合於webkit核心瀏覽器或移動端。（移動端大部分是webkit核心）
overflow:hidden;
text-overflow:ellipsis;
/*彈性伸縮盒子模型顯示*/
display: -webkit- box;
/*限制在一個塊元素內顯示的文字行數*/
-webkit-line-clamp: 2;
/*設定或檢索伸縮盒子物件的子元素排列方式*/
-webkit-box -orient: vertical;(垂直居中)
實際開發中更推薦讓後臺人員作此效果。
css三角做法
寬度和高度設定為0，只給邊框粗細
div {
width: 0;
height: 0;
行高和字型大小可不寫，為了照顧低版本瀏覽器
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;
}
其他邊框設定為透明，左邊框給顏色，此做法得從左向右指的三角
常見佈局技巧：
1.margin負值運用
讓每個盒子margin左移-1px 正好壓住相鄰盒子邊框，實現細線邊框。
此做法滑鼠經過盒子顯示邊框時會有右邊框顯示不出的後果，可提高盒子層級解決（如果沒有定位，則加相對定位，保留盒子位置，然後加z-index）
2.文字圍繞浮動元素顯示，不會被壓住