学习记录（八）

2020.4.5-2020.4.12

复习的知识

• 浮动 float

  • 只会影响后面的元素
  • clear属性只会操作块标签，对内联标签不起作用

• 定位 position

  • sticky 黏性定位：
    在指定的位置，进行黏性操作，多用于制作导航栏

• margin 塌陷和 margin 合并

  • 塌陷： 父盒子与子盒子谁的margin-top 谁大就用谁的值
  • 合并： 上面的盒子的margin-bottom和下面盒子的margin-top，它们之间的上下距离就为较大的那个值

• BFC规范

  • 可以形成一个独立的容器。不受到外界的影响，从而解决一些布局问题。
  • 触发条件：
    float 除 none 以外的值
    position 值为 absolute 或 fixed
    display 值为 inline-block, table-cells, flex
    overflow 除了 visible 以外的值
  • 可以解决的问题
    margin叠加问题即margin合并问题
    margin传递问题即margin塌陷问题
    浮动问题，使父元素不受子元素的浮动影响

学习到的新知识

• 3D

  • perspective ：景深，离屏幕多远的距离去观察元素，值越大幅度越小。
  • perspective-origin : 景深的基点位置，观察元素的角度。
  • transform-origin: center center -50px; （z轴只能写数值，不能写单词）
  • transform-style : 3D空间
    flat :默认值2D
    preserve-3d : 3D，产生一个三维空间
  • backface-visibility : 背面隐藏
    hidden、visible (默认值)