css常见区别

1. width:auto 和width:100%的区别

• width:auto
  • 会使元素box的宽度等于父元素的content box的宽度。
• width:100%
  • 会使元素撑满整个父元素，margin、border、padding、content区域会自动分配水平空间。

2. line-height: 1.5 和 line-height:150%的区别

• line-height：1.5

  • 子元素会根据自己的font-size计算自己的line-height

• line-height: 150%

  • 子元素会直接继承父元素计算好的line-height

例子1：父元素 -> font-size： 14px，子元素 -> font-size：26px

• line-height： 1.5时，父元素line-height = 14px * 1.5 = 21px, 子元素line-height = 26px * 1.5 = 39px

• line-height : 150%时， 父元素line-height = 14px * 150% = 21px, 子元素的line-height = 父元素的line-height = 21px

3. transition 和 animation 的区别

 transition关注的是CSS property的变化，property值和时间的关系是一个三次贝塞尔曲线。

animation作用于元素本身而不是样式属性，使用关键帧的概念，应该说可以实现更自由的动画效果。