css

1、如何实现不确定宽高的盒子上下左右居中

div{
      position:absolute;
      top:50%; //相对于父元素
      left:50%; //相对于父元素
      transform:translate(-50%,-50%); //相对于自己
    }

2、如何实现不确定宽高的图片上下左右居中

 img{
      position:absolute;
      top:0; /* 四周拉力相同 */
      right:0; /* 四周拉力相同 */
      bottom:0; /* 四周拉力相同 */
      left:0; /* 四周拉力相同 */
      margin:auto; /* 再设置 marign 自动 */
    }

3、纯css写倒三角的原理：

.kailong{
    width:0;
    height:0;
    border-right:50px solid transparent;
border-top:50px solid transparent;
        border-left:50px solid transparent;
    border-bottom:50px solid red;
}

4. 三栏布局

• 浮动
• 绝对固定定位
• flex弹性布局 （中间的div 用 flex:1; 不要用flex-grow:1）
• 网格布局（CSS最新增的，类似于bootstrap的栅格系统）
  1. 将属性 display 值设为 grid 或 inline-grid 就创建了一个网格容器，所有容器直接子结点自动成为网格项目
  2. 属性grid-template-rows用于定义行的尺寸，即轨道尺寸。轨道尺寸可以是任何非负的长度值（px，%，em，等）
  3. 属性grid-template-columns用于定义列的尺寸

  display: grid;
  grid-template-rows: 100px;
 grid-template-columns: 300px auto 300px;

5. CSS盒模型

概念：有2种，标准模型 + IE模型
css如何设置这2种模型

• box-sizing：border-box; IE模型
• box-sizing：content-box; 标准模型（默认）

js如何设置获取盒模型对应的宽和高：

• dom.style.width/height 这个只能取到内联样式的宽高
• dom.currentStyle.width/height 拿到渲染后的宽高，但这个是IE支持的，其他不支
• dom.getComputerStyle.width/height 拿到渲染后的宽高，兼容谷歌和火
• dom.getBoundingClientRect().width/height 这个也能拿到，有4个值，还有2个是距离顶部和左边的距离

6. BFC

• 概念：块级格式化上下文 ，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用
• 原理：如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器
• 如何创建BFC：
  ​ 1. 浮动元素，float 除 none 以外的值；
  ​ 2. 绝对定位元素，position（absolute，fixed）；
  ​ 3. display 不为none；
  ​ 4.overflow 除了 visible 以外的值（hidden，auto，scroll）
• BFC常见作用
  ​ 1. BFC清除浮动
  ​