CSS

定位➕margin负值 定位➕transform负值 定位➕margin：auto flex布局 table布局

- 占据空间： - visibility：hidden 隐藏该元素 - opacity：0 设置透明度为0 - 不占据空间： - display：null 页面元素彻底消失

flex是弹性布局，是现在主流的布局方式。 属性：row，column，flex-start，flex-end，center，space-around，space-between 工作中我常用：spa

id选择器(#box),选择id为box的属性 类选择器(.one),选择为one的所有元素 标签选择器(div),选择标签为div的所有元素 后代选择器(#box div),选择id为box元素内部

浏览器的渲染原理 html代码解析成dom树，css代码解析成css规则树 dom树和css规则树会组合成渲染树 我们的浏览器就是由渲染树绘制而成的 重绘，代码改变只造成了渲染树的改变，就会发生重新绘

rem布局 postcss-pxtorem是一款postCSS的插件，用来将px转换为rem 有了这个以后，写的时候只要写px，会自动转换为rem lib-flexible用于设置rem基准值 vw布

- pc短的浏览器，默认字体最小显示12px - transform：scale(0.5) - zoom(0.5) - 使用图片 - webkit-text-size-

vw和vh：相对于视口的大小，100vh等于视口的高度，100vw等于视口的宽度 适配于移动端 px：绝对单位，页面按精准像素显示 em：大小相对于父元素font-size:20px 1em=20px

- 共同点 - 都是css的预处理器 - 都有变量 - 都有变量作用域 - 有混入mixin - 有嵌套语法 - 有运算 - 有导入@impor

概念：块级格式化上下文。bfc就是css的一种属性，拥有了bfc就会有独立的渲染区域，从而不会影响外界 就像马路围起来了 如何触发bfc： position为absolute或fixed 然后 ove

边框属性 border-radius创建圆角边框 border-image用图片做边框 box-shadow为元素添加阴影 通过box-sizing进行切换为ie怪异盒模型 transform2D转换

flex:1是flex-grow,flex-shrink,flex-basis三个属性的缩写 flex-grow是用来放大盒子的 flex-shrink是用来缩小盒子的 flex-basis 0%覆盖

由四部分组成：content，padding，margin，border 默认是标准盒模型/W3c盒模型，实际宽度为width+padding+border 盒模型可以进行切换，通过box-sizin

1.父盒子开启flex，并设置justify-content：center和aligin-items：center 2.父盒子开启flex，子盒子设置margin：auto 3.子绝父相，子盒子利用定