day19李大人part1

day19

一：transform的相关位移，旋转，放大缩小针对的是块级元素

二：计算属性

width：calc（百分比 - px）；

注意：减号之间必须有空格

三：移动端

3·1 flexble.js的使用
1引入flexble的js
2观察设计图大小，修改js中对应的width和height
3正常量取设计图大小，将值设置成rem的单位就行，值都除以100

3·2 多背景图使用(多个背景之间用逗号隔开)
background:小背景图的样式，大背景图的样式

四：图片整合/css sprites/雪碧图/精灵图

将很多小图标，整合到一张图片身上，通过background-poisition来调整位置
优点：

• 减少http的请求次数

• 减少图片的体积

缺点：

• 频繁修改背景图位置，比较繁琐

五：浏览器内核(浏览器的解析代码的机制)

• -ie浏览器 Trident
• 火狐 Gecko 代码开源
• 苹果 & 谷歌旧版本 webkit
• 谷歌新版本及欧鹏 Blink

六：透明属性

• opacity 会模糊盒子以及文字
  专门针对ie： filter: alpha(opacity=value);

value的取值为1-100; 1表示完全透明 100不透明，取值是正数，如10 20

• rgba 不会模糊文字

七：权重

• !important 权重最高，不到万不得已不使用
  {color:red !important}

• vertical-align 针对内联块级元素

  baseline 基线
  bottom 底线
  middle 中线
  top 顶线

八： 解决图片底部3px留白

img添加浮动/转换成块/设置vertical-align的值除baseline之外
页面头部优化

向搜索引擎说明你的网页的关键词； 告诉搜索引擎你的站点的主要内容；

触发条件：

1. float的值为left/right
2. position的值fixed和absolute
3. display的值inline-block/table-cell/flex/inline-flex
4. overflow的值hidden/auto/scroll

BFC特点：

1. 在BFC的区域。浮动元素的高度会计算在内
2. BFC的区域，不会与浮动盒子重叠