CSS权重
谈谈你盒模型的理解
CSS的加载顺序
布局的方案
垂直水平居中方案
- 已知宽度高度
  - 方案1
  - 方案2
- 已知或未知宽度高度
谈谈你对BFC的理解
清除浮动的方案
定位
如何实现反差色
offsetWidth

CSS权重

!important > 内联样式 > 内部样式 > 外部样式

谈谈你盒模型的理解

盒模型是CSS的基石，所有的盒子都拥有宽度、高度、内边距、边框和外边距；盒子模型分为两种，分别是：标准盒模型和怪异盒模型；这两种盒模型的区别主要在宽度和高度上的计算上，以宽度为例：

标准盒模型的宽度 = 内容的宽度
怪异盒模型的宽度 = 内容的宽度 + 左右内边距 + 边框的宽度

这两种盒模型通过CSS属性box-sizing可以相互转换，默认值是content-box，即标准盒模型，另一个值是border-box，即怪异盒模型

CSS的加载顺序

CSS的加载顺序是从右往左查找，这么查找的原因是这样查找时，复杂度比从左往右查找有小；CSS的覆盖顺序和class中的顺序无关，只和样式文件中书写的顺序有关。

.parent .children{}
.parent .children .item{}
.item{}
.children .item{}
.parent .children .item p{}
.children p{}

练习2：下面代码中，p标签是什么颜色？

<style>
  .red {
      color: red;
  }
  .blue {
      color: blue;
  }
</style>
<body>
    <p class="red blue">red or blue</p>
  <p class="blue red">red or blue</p>
</body>

答案：蓝色

布局的方案

垂直水平居中方案

已知宽度高度

方案1

<style>
  .box {
      width: 600px;
    height: 600px;
    background: red;
      position: relative;
  }
  .inner {
      width: 100px;
    height: 100px;
    background: blue;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
  }
</style>
<body>
    <div class="box">
      <div class="inner"></div>
  </div>
</body>

方案2

<style>
  .box {
      width: 600px;
    height: 600px;
    background: red;
      position: relative;
  }
  .inner {
      width: 100px;
    height: 100px;
    background: blue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50px, -50px);
  }
</style>
<body>
    <div class="box">
      <div class="inner"></div>
  </div>
</body>

已知或未知宽度高度

方案1

<style>
  .box {
      width: 600px;
    height: 600px;
    background: red;
      position: relative;
  }
  .inner {
    background: blue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
<body>
    <div class="box">
      <div class="inner">dasdasd</div>
  </div>
</body>

方案2

<style>
  .box {
      width: 600px;
    height: 600px;
    background: red;
      position: relative;
  }
  .inner {
    width: 100px;
    height: 100px;
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
</style>
<body>
    <div class="box">
      <span class="inner">dasdasd</span>
  </div>
</body>

方案3

<style>
  .box {
      width: 600px;
    height: 600px;
    background: red;
    text-align: center;
    line-height: 
  }
  .inner {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: blue;
  }
</style>
<body>
    <div class="box">
      <span class="inner">dasdasd</span>
  </div>
</body>

方案4

<style>
  .box {
      width: 600px;
    height: 600px;
    background: red;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inner {
    background: blue;
  }
</style>
<body>
    <div class="box">
      <span class="inner">dasdasd</span>
  </div>
</body>

方案5

<style>
  .box {
      width: 600px;
    height: 600px;
    background: red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .inner {
    display: inline-block;
    background: blue;
  }
</style>
<body>
    <div class="box">
      <span class="inner">dasdasd</span>
  </div>
</body>

谈谈你对BFC的理解

概念

BFC（Block Format Content）是块级格式化上下文，是一个独立的渲染区域。

规则

BFC内部去区域不会影响外部的区域
在垂直方向上的距离一个接一个排列
在垂直方向上的距离由margin决定
使用同一个BFC两个相邻的同级后父子级会发生margin折叠
计算BFC的高度时，浮动元素也参与计算

如何触发BFC
float不为none
overflow不为visible
positon为absolute和fixed
display：table-cell等
清除浮动的方案

.clearfixed::after {
    content: '.';
  display: block;
  visible: hidden;
  overflow: hidden;
  clear: both;
}

定位

static：默认值，不定位
relative：相对于自身的位置去定位，不会脱离文档流
absolute：相对于离他最近的那个具有定位属性的元素进行定位，会脱离文档流
fixed：相对于窗口的位置定位定位，会脱离文档流
sticky：在滚动过程中，当滚动到一定位置就会黏住。
使用条件：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

如何实现反差色

使用css3中新增属性：mix-blend-mode，该属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

mix-blend-mode: normal; //正常 mix-blend-mode: multiply; //正片叠底 mix-blend-mode: screen; //滤色 mix-blend-mode: overlay; //叠加 mix-blend-mode: darken; //变暗 mix-blend-mode: lighten; //变亮 mix-blend-mode: color-dodge; //颜色减淡 mix-blend-mode: color-burn; //颜色加深 mix-blend-mode: hard-light; //强光 mix-blend-mode: soft-light; //柔光 mix-blend-mode: difference; //差值 mix-blend-mode: exclusion; //排除 mix-blend-mode: hue; //色相 mix-blend-mode: saturation; //饱和度 mix-blend-mode: color; //颜色 mix-blend-mode: luminosity; //亮度 mix-blend-mode: initial; //初始 mix-blend-mode: inherit; //继承 mix-blend-mode: unset; //复原

offsetWidth

offsetWidth = （内容宽度+ 内边距 + 边框），无外边距，可通过 box-sizing 改变 offsetWith 的定义

CSS