精灵图
为了减少服务器接收和发送请求的的次数
background-position
一般情况下，向上向左均是负的
background: url(images/icons.png) no-repeat -1103px -333px;
字体图标
展示为图标，本质为文字
结构样式简单的使用字体图标，复杂的使用精灵图
字体图标追加（.json）
CSS三角
.box2 {
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: orange;
}
用户界面
鼠标样式cursor
default：小白（默认）
pointer：小手
move： 移动
text：文字
not-allowed：禁止
表单轮廓outline
outline：0；
outline：none；
取消表单轮廓线
防止拖拽文本域resize
resize：none；
vertical-align
针对行内或行内块元素，使其垂直对齐
场景：图片和文字垂直对齐
baseline：默认。放置在父元素的基线上
top：与行内最高元素的顶端对齐
middle：放置在父元素的中部
bottom：与行内最低元素的顶端对齐
bug：图片底部空白缝隙
原因：默认基线对齐
方法1：vertical-align:botom/middle/top
方法2：display:block
溢出文字省略号显示
单行文本
三个条件：
强制一行
white-space：nowrap；默认自动换行normal
溢出隐藏
overflow：hidden；
省略号代替
text-overflow：ellipsis；
多行文本
布局技巧
margin负值
消除相邻盒子边框叠加的问题
文字围绕浮动元素
行内块元素
父盒子添加text-decoration：center；则父盒子内的所有元素均水平居中。
三角强化
直角三角形：bottom去掉，top加大
.box2 {
width: 0;
height: 0;
border: 50px solid transparent;
border-right-color: orange;
border-style: solid;
border-width: 100px 50px 0 0;
}
CSS初始化
/* 清楚所以标签的内外边距 */
`* {`
margin: 0;
padding: 0;
}
/* em和i斜体文字不倾斜 */
em,
i {
font-style: normal;
}
/* 去掉li的小圆点 */
li {
list-style: none;
}
/* 取消图片底部的空白缝隙 */
img {
vertical-align: middle;
}
/* 鼠标经过button变为小手 */
button {
cursor: pointer;
}
/* 链接a去掉下划线，颜色为666 */
a {
color: #666;
text-decoration: none;
}
/* 点击a时颜色为红色 */
a:hover {
color: red;
}