HTML与CSS

回流与重绘

CSS盒模型

标准盒子模型

width等于内容宽

IE盒子模型

width=内容宽+padding+border

BFC

隔离的独立容器

触发条件

• 浮动元素,float不为none

• 绝对定位元素,position为absolute或者fixed

• display 为 inline-block、table-cells、flex

• 设置了overflow,但是不为visible

作用

• 清除浮动

• BFC子元素margin不重叠

布局

左边固定，右边自适应

<!-- html -->
<div id="parent">
      <div id="child1">自适应自适应自适应自适应自适应自适应</div>
      <div id="child2">自适应自适应自适应自适应自适应自适应</div>
</div>
<!-- css-->
<style>
    /* 绝对定位 */
    #child1 {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 0;
      top: 0;
      background-color: lime;
    }
    #child2 {
      margin-left: 100px;
      background-color: red;
    }
    /* flex */
    #parent {
      display: flex;
    }
    #child1 {
      flex-basis: 100px;
      background-color: lime;
    }
    #child2 {
      background-color: red;
    }
</style>

居中

文本垂直居中

line-height=height

文本水平居中

text-align:center

水平垂直居中

<!-- html -->
<div class="parent">
      <div class="child">div</div>
</div>
<!-- css-->
<style>
    /* flex */
    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 100px;
    }
    /* 绝对定位+transform */
    .parent {
      width: 100px;
      height: 100px;
    }
    .child{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    /* 绝对定位+margin */
    .parent {
      width: 100px;
      height: 100px;
    }
    .child{
      width: 40px;
      height: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -10px;
      margin-left: -20px;
    }
</style>