398day（overflow，vertical，滑鼠樣式，輪廓，精靈圖）
阿新 • • 發佈：2018-11-21
《2018年11月5日》【連續398天】
標題：overflow，vertical，滑鼠樣式，輪廓，精靈圖；
內容：
/*overflow: visible / auto / hidden / scroll */
/*cursor: pointer/text/move/default;*/去輪廓：
input,
textarea {
outline: none;
}textarea {
resize: none; /*防止拖拽*/
outline: none;
}/* vertical-align : top /middle / bottom /baseline;*/ /*注意基線對齊時的邊框問題*/ /*只針對行內元素和行內塊元素，尤其是行內塊元素，主要用於圖片和表單的對齊*/
white-space: nowarp; /*強制一行顯示*/text-overflow: clip / ellipsis; /*後者是超出文字省略號代替*/精靈圖：
將背景小圖集合到大圖上，這樣瀏覽器只需請求一次即可；
使用：
縮圖：原圖600*669
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } span { display: inline-block; background: url(images/abcd.jpg) no-repeat; } .a1 { width: 117px; height: 121px; background-position: -370px -270px; } .a2 { width: 126px; height: 114px; background-position: -124px -413px; } .a3 { width: 115px; height: 113px; background-position: 0 -9px; } .a4 { width: 125px; height: 123px; background-position: -247px -270px; } .a5 { width: 112px; height: 110px; background-position: -96px -141px; } .a6 { width: 115px; height: 107px; background-position: -474px -9px; } </style> </head> <body> <span class="a1"></span> <span class="a2"></span> <span class="a3"></span> <span class="a4"></span> <span class="a5"></span> <span class="a6"></span> </body>
