css小技巧

• rem ~ px ~ em如何选用

  1. 拿不准的时候，用rem设置字号，用px设置边框，用em设置其他大部分属性。
  2. 使用无单位的值设置行高。

• 猫头鹰选择器(相邻选择器)

body * + * {
/*设置body里所有元素的上边距*/
    margin-top: 1.5em;
  }

• 全局修改盒模型为border-box

:root {
    /* ←---- 根元素设置为border-box */
    box-sizing: border-box;
  }
  
*,
::before,
::after {
    /* ←---- 告诉其他所有元素和伪元素继承其盒模型 */
    box-sizing: inherit;
}

/*加上这段代码,height 和 width 会指定元素的实际宽和高。改变内边距不会影响它们.
可以在必要时选中第三方组件的顶级容器，将其恢复为content-box.这样组件的内部元素会继承该盒模型.*/
.third-party-component {
  box-sizing: content-box;
}