css基础知识回顾,查漏补缺

行高特性

  1. line-height=height可以实现垂直局中
  2. line-height>height 文字偏下
  3. line-height<height 文字偏上
  4. font行高可以跟单位也可以不跟,如果不跟,则是是的倍数

背景

  1. background-repeat: repeat,no-repeat,repeat-x,repeat-y
  2. background-position: x y (方位名词与顺序无关)

查看注意事项

  • 精确单位,和混合单位
  • background-attachment: scroll |fixed
  • 背景复合属性 背景颜色,背景图片地址,背景平铺,背景图像滚动,背景位置
  • 半透明 rgba(0,0,0, 0.3)
  • 精灵图减少服务器的加载图片次数

css特性

  1. 层叠性,就近原则,后来居上
  2. 继承性inherit, text-, line- ,color可继承
  3. 优先级 继承通配符*< 元素<类选择器,伪类<id<行内样式<!important
  4. 继承的权重为0
  5. 复合选择器有权重的叠加

盒子模型

边框 边距

边框border

  1. 复合写法 border: 边框宽度,样式,颜色 没有顺序 solid
  2. 细线边框 border-collapse:collapse合并细线

内边距padding

  1. padding会影响盒子的大小
  2. 指定高度height不指定宽度 padding不会撑开宽度的盒子

外边距margin

  1. 和padding类似

  2. 外边距合并,塌陷问题

解决方法

  1. 可以为父元素定义上边框
  2. 可以刻父元素定义上内边距
  3. 可以为父元素添加overflow:hidden
  1. 使用通配符解决浏览器的默认的内外边距·* {padding:0;margin:0}

圆角边框

border-radius 根据圆半径的大小变化