css高级技巧
精灵图
为什么需要精灵图
有效减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称）CSS Sprites、CSS雪碧）
核心原理：将网页中一些小背景图像整合到一张大图中，这样只需要一次请求即可
使用精灵图：使用background-position属性，移动的是这个目标图片的x和y坐标
精灵图使用：
- 使用ps切片选择需要的切片
- 找到w、h、x、y属性，用css实现
缺点
- 图片文件比较大
- 图片本身放大缩小会失真
- 一旦图片制作完毕想要更换比较复杂
字体图标
字体图标iconfont，展示的是图片，本质是文字
优点
- 轻量级：比图像小，随字体加载出来，减少了服务器请求
- 灵活性：可以改变颜色、阴影、透明效果、旋转等
- 兼容性：几乎支持所有浏览器
不能替代精灵技术，只是对工作中图标部分技术的提升和优化
字体图标的下载
使用
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?cv7dvn');
src: url('fonts/icomoon.eot?cv7dvn#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?cv7dvn') format('truetype'),
url('fonts/icomoon.woff?cv7dvn') format('woff'),
url('fonts/icomoon.svg?cv7dvn#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
使用的元素中声明font-family: "icomoon"
字体图标的追加
- 把压缩包里的selection.json在网页里打开
- 选择新的图标
- 重新下载
CSS三角
让盒子的长宽为0，四个边框不为0，则会生成一个正方形其中四个三角形
-->将其中一个边框设定颜色，其他位transparant，就会出现单独的三角形
div{
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;
}
行高和字体大小是为了兼容性
CSS用户界面样式
鼠标样式
li {cursor: pointer}
- default: 小白箭头 默认
- pointer：小手
- move：移动
- text：文字
- not-allowed：禁止
轮廓线
默认选中输入（input/textarea标签）框的时候，会有个蓝色的外框线
给表单添加outline:0/none
input{outline:0 ;}
防止拖拽文本域
默认文本框（textarea）拖动右下角是可以拉大的，会影响布局
textarea{resize: none;}
文本框的前标签和后标签应放在同一行，使光标在左上角，可以通过加padding改变位置
vertical-align使用
经常用于设置图片或者表单和文字垂直对齐
vertical-align :baseline |top |middle |bottom
- baseline：默认，元素放置在父元素的基线上
- top： 元素的顶端和行中最高元素的顶端对齐
- middle：把元素放置在父元素中部
- bottom： 把元素的顶端与行中最低的元素顶端对齐
块级元素无法使用veritcal-align，有时需要先把块级元素转化为行内块元素
图片底部空白缝隙
原因是行内块元素会和文字基线对齐
- 给图片添加vertial-align: middle |top |bottom（推荐）
- 把图片转换成块级元素display:block
溢出的文字省略号
- 单行文本溢出
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;
常见布局技巧
margin负值：
可以用于解决相邻盒子边框重叠后变粗的问题
float要放在margin：-1前面
当鼠标经过时改变边框颜色，会出现边框被其他边框压住的问题
-->如果没有定位，加相对定位，如果有定位，则加z-index提高层级
文字围绕浮动元素
浮动元素周围的文字会自动围绕该元素，可以用于实现左图右文字的模块或者新闻中图片样式
行内块元素巧妙应用
页码的布局
行内块默认有大小，且自带距离，使用text-align：center即可水平居中对齐
<!-- 给父亲添加text-align:center即可实现所有子元素水平居中 -->
.box {
text-align: center
}
.box a{
display: inline-block;
width: 36px;
height:36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-align: center;
line-height: 36px;
text-decoration: 36px;
color: #333;
}
三角的巧妙应用
实现某些价格标签中的斜三角
.box {
width: 0;
height: 0;
/* 只保留右边边框 */
border-color: transparent red transparent transparent;
border-style: solid;
/* 上大右小 */
border-width: 22px 8px 0 0;
}
CSS初始化
不同浏览器对某些标签的默认值是不同的，为了清除不同浏览器对html文本呈现的差异，照顾浏览器的兼容性，需要初始化
Unicode编码字体：
把中文字体的名称用相应的unicode编码代替，有效的避免浏览器解释css代码时出现乱码
"5B8B\4F53"表示宋体/黑体
京东初始化代码：
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal;
}
/* 去掉li 的小圆点 */
li {
list-style: none;
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle;
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623;
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666;
}
.hide,
.none {
display: none;
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1;
}
