前端自学整理——CSS高级技巧

精灵图

1. 使用精灵图的目的

• 一次加载完成所有图片，减少服务器接收和发送请求的次数，提高页面的加载速度

2. 使用方法：background-position
   

字体图标

使用方法：

1. 官网（icomoon.io）下载字体包
2. 将fonts文件解压至根目录下
3. 引入@font-face 样式
4. 在demo.html中复制相应字
5. 在样式内引入字体，与上面font-face一致

代码：

@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?3a2xdr');
    src:  url('../fonts/icomoon.eot?3a2xdr#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?3a2xdr') format('truetype'),
      url('../fonts/icomoon.woff?3a2xdr') format('woff'),
      url('../fonts/icomoon.svg?3a2xdr#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
  }

CSS制作三角图标

制作方法：

1. 将全部边框颜色设成透明，设定所有边框都有高度

2. 指定某个边框有颜色
   border-width: 100px;
   border-color: transparent transparent transparent red;
   

CSS用户界面样式

1. 鼠标样式属性cursor
2. 轮廓线属性outline
3. 防止拖曳文本域属性resize

vertical-align属性

元素对齐的四要素
元素由顶线、中线、基线和底线标定，顶线与底线的距离加上上下间距等于行高

• 用于设置图片或者表单（行内块元素和行内元素）和文字垂直对齐
• vertical-aligncenter；可设置行内元素垂直居中
• vertical-align:top；可消除图片底部的空白缝隙（display:block也有同样的效果）
  代码验证：

代码：（除了基线对齐，其余都可取消空隙）

div {
	border:1px solid red;
	width: 300px;
	background-color: blue;
}
.one {
	/*默认的是基线对齐*/
	vertical-align: baseline;
}
.two {
	/*让图片的中线 对齐 文字的中线  垂直居中*/
	vertical-align: middle;
}
.three {
	/*让图片的顶线 对齐 文字的顶线 顶部对齐*/
	vertical-align: top;
}

CSS常见的布局技巧

1. margin负值使用
   让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框，使盒子间紧密贴合，没有缝隙
   鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）
2. 文字围绕浮动元素
3. 行内块性质的使用

• 底部页码在页面中间显示:
  • 把这些链接盒子转换为行内块，并且给父级添加 text-align:center; 行内块元素会水平会居中

4. CSS三角高级

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

将border-width设置可以添加非等腰直角三角形效果

CSS3新增伪元素选择器

• ::before ::after
• 基本原理：在基础元素的前后创建一个虚拟的伪元素（在文档结构中找不到）
• 必须要有content:""属性
• 可以借此理解清除浮动的语法：
  .clearfix:before,.clearfix:after {
  content:"";
  display:table;
  }.clearfix:after {
  clear:both; }

CSS3新增box-sizing属性

• box-sizing：content-box;border-box;
• content-box=width+padding+border
• border-box=width

CSS3新增过渡属性

• transition: 要过渡的属性 花费时间 运动曲线 何时开始;