css阶段

一、盒子水平、垂直居中

总共3种方式：flex布局、定位、flex+margin。

1、flex布局

  <body>
    <div class="parent">
        <div class="child">Demo</div>
     </div>
  </body>

  <style>
    .parent{
      width:100vw;
      height:100vh;
      /* 水平、垂直居中*/
      display: flex;
      justify-content: center;
      align-items: center;
      .child{
        width:300px;
        height:300px;
      }
    }
  </style>

2、定位

<body>
  <div class="parent">
    <div class="child">Demo</div>
  </div>
</body>

<style>
  .parent {
    /* 定位时，子绝父相*/
    position: relative;
    width: 100vw;
    height: 100vh;
  }
  .child {
    /*定位到中心右下角的位置，再通过移动居中*/
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
  }
</style>

3、flex+margin布局

<body>
  <div class="parent">
    <div class="child">Demo</div>
  </div>
</body>

<style>
  .parent {
    /* 父盒子使用flex定位*/
    display: flex;
    width: 100vw;
    height: 100vh;
  }
  .child {
    /* 子盒子使用margin：auto*/
    margin: auto;
    top: 50%;
    left: 50%;
  }
</style>

二、盒子模型

盒子模型分为4个部分：内容（content），内边距（padding）、边框(border)、外边距(margin)。

1、W3C标准盒子

box-sizing默认是content-box模式，width设置内容的宽度，盒子的 “实际宽度= width + padding + border”。

盒子模型.png

2、IE/C3/怪异盒子模型

将box-sizing设置为border-box模式，盒子将开启内减模式，width就是盒子的实际宽度。

<body>
  <div class="box"></div>
</body>

<style>
  .box {
    width: 300px;
    height: 300px;
    /*开启盒子的内减模式*/
    box-sizing: border-box;
  }
</style>

三、子盒子的flex属性

子盒子的flex属性内置包含3个属性：flex-grow、flex-shrink以及flex-basis。flex:1=' flex-grow:1 '+' flex-shrink:1 '+' flex-basis:0% '。

1、flex-grow属性

flex-grow属性表示当子盒子 < 父盒子时，将父盒子横向的剩余空间，按照每个子盒子的flex-grow值进行分配。

例如，1个父盒子中有3个子盒子，父盒子宽度1000px，子盒子宽度200px。此时，我们给第一个子盒子的flex-grow设置为1、其余盒子的flex-grow设置为0，则第一个盒子将分配到父盒子全部剩余空间（400px）,此时，该盒子的宽度为（200+400=600px），其余盒子宽度为200px。

<body>
  <div class="parent">
    <div class="children">1</div>
    <div class="children">2</div>
    <div class="children">3</div>
  </div>
</body>

<style>
  .parent {
    display: flex;
    width: 1000px;
    height: 500px;
    background-color: aquamarine;
  }
  .children {
    width: 200px;
    height: 300px;
    background-color: coral;
  }
  .parent .children:nth-child(1) {
    /*第一个盒子将继承父盒子全部的横向剩余空间*/
    flex-grow: 1;
  }
</style>

盒子.png

2、flex-shrink属性

flex-shrink属性表示当子盒子 > 父盒子时，每个子盒子按照设置的flex-shrink值进行按比例缩减。

例如，1个父盒子中有3个子盒子，父盒子宽度500px，子盒子宽度200px。此时，我们给3个盒子一次设置flex-shrink属性为1、2、1，则每个盒子将依次按照25px((200x3-500)/4x1)、50px((200x3-500)/4x2)、25px((200x3-500)/4x1)进行减少。

<body>
  <div class="parent">
    <div class="children">1</div>
    <div class="children">2</div>
    <div class="children">3</div>
  </div>
</body>

<style>
  .parent {
    display: flex;
    width: 500px;
    height: 500px;
    background-color: aquamarine;
  }
  .children {
    width: 200px;
    height: 300px;
    /*除第二个盒子以外，全部按照1份缩减*/
    flex-shrink: 1;
    background-color: coral;
  }
  .parent .children:nth-child(2) {
    /*第二个盒子，按照2份缩减*/
    flex-shrink: 2;
  }
</style>

缩减.png

3、flex-basis属性

flex-basis用于设置盒子的宽度，当basis和width同时存在时，以basis为准。

例如，当1个父盒子内有3个子盒子，每个子盒子width设置为200px,但是没个子盒子的flex-basis均设置为100px,则每个子盒子的实际宽度均为100px。

<body>
  <div class="parent">
    <div class="children">1</div>
    <div class="children">2</div>
    <div class="children">3</div>
  </div>
</body>

<style>
  .parent {
    display: flex;
    width: 500px;
    height: 500px;
    background-color: aquamarine;
  }
  .children {
    width: 200px;
    height: 300px;
    /*每个子盒子的实际宽度以 flex-basis设置的100px为准*/
    flex-basis: 100px;
    background-color: coral;
  }
</style>

四、CSS3的新属性

CSS3的新属性有很多，常用的有以下几种：

box-sizing属性
flex属性
border-radius属性
transition属性
background-size属性
等等

五、BFC模式

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

1、BFC模式可以解决什么问题

1.1、外边距重叠问题

问题描述：上线排列的2个盒子，同时设置上下边距，会产生重叠。

例如：当2个盒子上下排列，并且分别设置上、下边距为50px与30px，则他们之间的距离不是累加（50+30=80px），而是以最大的边距（50px）为准。注意，这不是bug，而是规范这样规定的。

<body>
  <div class="box top"></div>
  <div class="box bottom"></div>
</body>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  .top {
    /*两个盒子之间的实际间距以最大的50px为准*/
    margin-bottom: 50px;
  }
  .bottom {
    margin-top: 30px;
  }
</style>

1.2、清除浮动问题

问题描述：当子盒子开启float模式以后，由于脱离文档（标准）流，会引起父盒子塌陷，影响子盒子以及后面盒子的布局。

例如：当两个盒子上下排列时，上面的盒子的子盒子开启float模式以后，由于脱离文档流，会引起上面的父盒子塌陷，导致下面的盒子上移，两个盒子重叠。

<body>
  <div class="container">
    <div class="top"></div>
  </div>
  <div class="bottom"></div>
</body>

<style>
  .container {
    width: 300px;
  }
  .top {
    /*子盒子开启浮动，脱标*/
    float: right;
    width: 100px;
    height: 200px;
    background-color: red;
  }
  .bottom {
    width: 300px;
    height: 100px;
    background-color: blue;
  }
</style>

未开启浮动前，container高度为200px。

未浮动.png

开启浮动后，container盒子塌陷，高度为0px，上下两个盒子重叠。

浮动后.png

2、如何触发BFC模式

根元素的float属性不为none
position属性为absolute或fixed
overflow属性不为visible

面试题总结--CSS阶段