目录
一、CSS之精灵图
目的：为了有效减少服务器接受和发送请求的次数，提高页面的加载速度。
核心：
1.主要针对背景图片使用，就是把多个小的背景图片整合到一张大的图片上去。
2.这个大的图片就叫精灵图，sprites或者雪碧图。
3.移动背景图片的位置，可以使用background-position
4.移动图片的距离就是目标图片的x坐标和y坐标，网页中越往下y轴越大，往上往左移动是负值。
5.使用精灵图要精准测量，每个小背景图片的位置和大小。
background: url(index.png) no-repeat -182px 0;
缺点：
1.图片本身比较大。
2.图片本身放大缩小都会失真。
3.一旦图片制作完毕想要更换非常麻烦。
二、字体图标
iconfont,主要用于显示网页中通用，本质是文字，灵活性，轻量级，可以改变颜色，大小，加阴影，兼容性，适用于结构与样式简单的小图标。
icmoon网站。
将icmoon中的fonts文件复制粘贴，然后在style里面引入字体声明。
三、CSS之三角
用到了定位，子绝父相。
小三角被包含在大盒子里，right:-20px, 距离右边的1距离。
四、用户界面之鼠标界面
cursor: default/pointer/movetext/not-allowed
默认样式小箭头/小手/移动/禁止
五、用户界面之取消表单轮廓和防止拖拽文本框
textarea文本框 ，resize:none 防止拖拽
input表单，outline:none 取消表单轮廓
六、vertical-align实现行内块和文字垂直居中
图片和文字垂直居中，只针对行内元素或者行内块元素有效。
vertical-align:baseline(默认，元素放在父元素的基线上)|top|middle|bottom
七、图片底部空白缝隙解决方案
造成原因：默认和文字的基线对齐（基线：文字中最矮的）
解决方案1：提倡使用的
vertical-align:bottom
解决方案2：转换成块级元素，display:block
八、文字溢出省略号显示
1.单行文字
满足三个条件：
1.先强制一行内显示文本white-space:nowrap(默认normol自动换行1)
2.超出的部分隐藏，overflow:hidden
3.文字用省略号代替超出的部分text-overflow:ellipsis
2.多行文字
<!-- 多行文本溢出省略号，兼容性问题 适合于webkit浏览器或移动端（大部分是webkit内核）
overflow:hidden
text-overflow:ellipsis
display:-webkit-box 弹性伸缩盒子模型展示
-webkit-line-clamp:2限制在一个块元素显示文本的行数
-webkit-box-orient:vertical设置或者检索伸缩盒对象的子元素的排列方式-->
九、布局技巧
1.margin负值巧妙运用
left是往右边走，负值往左边走，
为每一个盒子添加border,相邻的边遇到会变粗。
解决方案：让每个盒子margin往左边走，下一个盒子margin-1px会压住相邻盒子边框。
第一个小li执行完样式，然后依次第二个第三个。。。
设置鼠标经过每一个盒子的时候盒子边框会变色，鼠标经过的时候相对定位占有位置，（相对定位会压住标准流或者浮动的盒子），父盒子要有相对定位，因为小盒子里面可能有绝对定位的元素。所以要提高层级z-index
2.文字围绕浮动元素巧妙运用
浮动出现最初目的就是做文字环绕作用。浮动的元素不会压住文字。
3.行内块的巧妙运用
之前可能用小li
大盒子里面包含小a，（转换成行内块元素）
4.CSS三角巧妙运用
1.盒子的宽度和高度设置为0,上边框设置大些，右边框设置小点，下和左边框设置为0，上下左边框颜色设置为transparent透明色
2.简写：
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
十、CSS初始化
不同浏览器对某些标签的默认值不同1，为了消除不同浏览器对HTML文本呈现的文本差异，照顾浏览器的兼容性。
CSS初始化是指重设浏览器的样式，也称CSS reset。每个网页都必须进行CSS初始化。
1009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
