CSS总结（下）

• 01-复习
  • 权重关系

    

• 02-状态伪类
  状态伪类: 权重是10 当四个状态同时存在是要遵循lvha顺序
  清除浏览器缓存快捷键: ctrl+shift+del
  在a标签中，网址必须要加http:// 不加，就会报404加载不出来
  • 未访问状态（link）

    

  • 访问后状态（visited）

    

    
    出于隐私的考虑,访问后的状态只能设置字体颜色
  • 鼠标移入状态（hover）

    

  • 鼠标按下（触发）状态（active）

    

  • 四种状态

    

• 03-常用两种状态伪类
  • 默认状态和hover

    

• 04-行高和文本垂直居中
  • 行高
    • 设置文本在元素中垂直方向的位置
    • 当盒子没有设置固定高度时,高度会随着行高的变化而变化，高度就是行高的值
      • 因为文本始终要保持垂直居中于盒子.
    • 当盒子设置固定高度时,高度不会随着行高的变化而变化
  • 垂直居中
    • 反推:当希望一个元素中的文本垂直居中于这个元素时,行高等于盒子的高度
• 05-行间距
  • 文本分为四条线:顶线,中线,基线,底线
  • 行间距: 多行文本,行与行之间的间距,是基线到基线之间的距离
• 06-a标签导航
  • 练习

    

• 07-复合属性值font
  • 当单属性和复合属性同时存在是时,要先写复合属性再写单属性,否则会被复合属性中的值层叠掉

    

  • 单属性: 一个属性名对应一个属性值

    

  • 复合属性: 一个属性名对应多个属性值

    

• 08-复合属性之border
  • 单属性

    

  • 复合属性

    

• 09-复合属性之background
  先写复合属性，在写单属性
  • 单属性

    

  • 复合属性

    

• 10-切图和背景图导航
  • ps基本使用
    • 标尺

      

    • 图片缩放
      • Alt+鼠标滚轮或者ctrl+加号或者减号
    • 切图
      Ctrl单击切片是切换切片
      • 切片工具

        

      • 例题

        

• 11-盒子模型之padding
  盒子在网页中的尺寸= content区域(设置的宽高)+padding区域+border区域
  • 盒子模型

    

  • 盒子模型之内边距padding

    

    • 设置盒子与内容之间的间距
    • 当盒子设置内边距后，会撑大盒子的尺寸
    • 为了保证盒子尺寸不变,又需要有内边距的效果,要相应的从盒子的宽高减去撑大的尺寸
  • 盒子模型值边框border

    

  • 单属性

    

  • 复合属性（顺时针）

    

• 12-新浪导航
  • 例题

    

• 13-padding减宽度的场景
  • 当块元素没有设置固定宽度时,宽度和父元素一样
    • 给该元素设置水平方向的padding时,不会撑宽盒子,会从content自动减去padding值,宽度的尺寸是不变的
  • 当块元素设置固定宽度时.此时设置水平方向的padding,盒子的尺寸会变大
• 14-盒子模型之margin

  

  • 外边距margin: 是设置盒子与盒子之间的间距
• 15-外边距合并
  • 垂直排列的两个块元素,分别给上面的盒子设置向下的外边距和给下面的盒子设置向上的外边距
  • 此时会形成外边距合并,当两个值相同时,就是该值,当两个值不同时是较大的那个值