任务九-主线

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特性（可设置宽高，内外边距）
  • 缝隙问题
    • font-size: 0;
• 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
  • 使用HTML实体
  • 使用CSS：before
• CSS icon
• SVG
  • img src=svg
  • SVG sprites