CSS常见样式入门（下）
- 背景
- background: 简写属性，作用是将背景属性设置在一个声明中
- background-attachment ：背景图象是否固定或随着页面的其余部分滚动
- background-color: 设置元素的背景颜色
- background-image: 把图像设置为背景
- background-position: 设置背景图象的起始位置(默认左上角）
- x y
- x% y%
- [top| center|bottom|] [left|center|right]
- background-repeat: 设置背景图象是否以及如何重复
- no-repeat: 背景图片在规定位置
- repeat-x： 图片横向重复
- repeat-y：图片纵向重复
- repeat：全部重复
- background-size: 设置背景的大小（兼容性）
- 100px 100px
- contain
- cover
- CSS sprite
- 指将不同的图片/图标合并在一整图上
- 使用CSS Sprite可以减少网络请求，提高网页加载性能
- 隐藏or透明
- opacity：0；透明度为0，整体
- visibility：hidden；和opacity：0类似
- display：none；消失，不占用位置
- background-color：rgba（0，0，0，0）只是背景色透明
- inline-block：
- 即呈现inline特性（不占据一整行，宽度由内容宽度决定）
- 又呈现block特性（可设置宽高，内外边距）
- 缝隙问题
- line-height
- line-height: 2（本身文字高度的两倍）
- line-height: 100%（相对父元素文字高度的两倍）
- height=line-height：来垂直居中单行文本
- 盒模型
- 标准盒模型
- IE盒模型：width指的是包含边框
- 区别：W3C标准中padding、border所占的空间不在width，height范围内，大家俗称的IE盒模型width包括contend尺寸+padding+border
- ie679怪异模式
- chrome，ie9+
- 使用css3新样式box-sizing
- box-sizing : content-box: w3c标准盒模型
- box-sizing: border-box “IE“盒模型
icon的实现方式
- 需求：一个页面上有很多小图标
- 使用image实现
- img的大小设置
- img的的vertical align
- 多次网络请求
- 最好加上head标签
- CSS Sprites
- 用命令行：sprity create build resourcee/*png -s style.css
- photoshop
- 用在线工具 css sprites generator
- 无法缩放
- 不好修改
- Icon Font
- 制作字体文件
- 声明font-family
- 使用本地链接
- 使用网络链接
@font-face{
src: url(‘’);
src: url(‘’) format(‘embedded-opentype’),
url(‘’) format(‘woff’),
url(‘’) format(‘truetype’),
url(‘’) format(‘svg’);
}
- 使用font-family
- CSS icon
- SVG
