今日学习CSS知识总结(一）

• background-size:cover;
  背景图大小以最适合的比例显示

• overflow:hidden;
  超出部分隐藏

• 从性能优化角度来说，目标元素前缀越短越好，因为浏览器渲染时，选择器的顺序是从右到左

• less可以嵌套

 .header{
		.nav{
				.content{
		}
	}
}

• 使元素水平排列方法
  ①float：left/right;
  ②display：inline-block;
  ③flex

• 子元素浮动，子元素脱离文档流，如果父元素不设置高度，父元素的高度无法被子元素撑开

• 清除浮动的影响的方法
  ①clear：both；
  ②clearfix伪元素

• display：block;
  将选择标签转为块级标签

• box-sizing:border-box;
  保证设置的width,height是最后盒子大小

• display:flex;
  justify-content:flex-start;
  靠左对齐

• flex控制主轴和交叉轴

• letter-spacing设置字符间距

• overflow:visible;
  按实际效果显示，不剪切超出范围内容

• 行内标签设置宽高没有用，设置行高line-height有用

• 行内标签
  a, span,i，input，textarea,strong,li等

• 雪碧图
  雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。

• CSS3中的动画
  ①transition,修改样式就按动画轨迹去处理
  ②animition使用：使透明度从0变化到1,0%

@keyframes name{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}