ZG前端学习系统day04 2020-11-5

• 盒子模型存在的两个问题（父子关系外边距塌陷和兄弟关系外边距塌陷问题
  父子关系外边距塌陷问题：当标签嵌套的时候对里面的元素添加margin-top会作用在外面父盒子上面。 父元素的上外边距会与子元素的上外边距会发生合并，共用了一个外边距，取两者较大的值作用在父元素身上
  解决方法：1 给父元素添加一个边框 2 对父元素添加上内边距代替子元素的上外边距 3 BFC规范（可以给外面的父盒子添加overflow：hidden）
  兄弟关系外边距塌陷问题：当上面的盒子添加margin-bottom 和下面的盒子添加margin-top 两者之间的间距是两数之间的最大值
  解决方法：1 把上边距 和下边距同时加在一个盒子上 2 BFC规范（可以在某一个套一个盒子 给外围盒子添加overflow：hidden 触发BFC规范）

• background背景
  背景颜色：background-color:英文单词 #16进制 rgb（） rgba（）
  背景图片 : background-image:url();
  背景图和img的区别：
  1 背景图是作用在css 而图片是用过html添加
  2 背景图只是用作修饰，然而图片表示的是重要的信息
  3 文字不能写在img上 而背景图可以·
  背景的平铺方式 background-repeat ：5个可选值 none去除背景
  背景的位置 background-position： x y；
  可以用方向关键词 百分比 像素（图片从左上角开始连） 默认值 是center 写一个值的时候另一个采用默认值center
  复合写法：

• 复杂的css选择器
  后代选择器 名1 名2 { } 既有儿子也有孙子。。。。
  子代选择器 名1 > 名2{ } 只有儿子
  交集选择器 名1名2{ }(无空格）
  伪类选择器 （针对于a标签 ）L V H A
  名：link{}没有访问之前
  名：hover{}当鼠标悬放的
  名：visited{}当鼠标点击但是未松开时
  名：active{} 当鼠标点击完之后

• 复杂标签的优先级和权重
  行内（1000）id（100）class（10）标签（1）通配符（0） ！important提高权重要比行内还要高

复杂选择器的权重： 组成单一选择器的权重之和，除群组选择器之外

• css选择器的三大特性：
  1 层叠性 一个属性标签设有2个相同的选择器，相同的样式前者会被后者取代 就近原则
  2 继承性 子元素会继承父元素的一些样式
  text- line- font-
  备注：a标签不可以继承父元素的color属性
  标题标签继承不了父元素的font-size
  3 优先级

·