CSS书写

清除浮动

• 浮动现象：
  当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线
  
  四种方法：
  （1）额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）
  
  如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。
  优点：通俗易懂，方便
  缺点：添加无意义标签，语义化差
  （2）父级添加overflow属性（父元素添加overflow:hidden）
  
  触发BFC后，实现了下面两条：
  1.浮动的元素会被父级计算高度（父级触发了BFC）
  2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
  这样也就清除了浮动
  优点：代码简洁
  缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素，因为设置了overflow:hidden
  （3）使用after伪元素清除浮动（推荐使用）
  
  优点：符合闭合浮动思想，结构语义化正确
  缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
  (4)使用before和after双伪元素清除浮动
  
  优点：代码更简洁
  缺点：用zoom:1触发hasLayout.

BFC实现两栏布局

• 定义
  BFC(Block Formatting Contexts)即块级格式化上下文，首先得是块元素，其次具备触发条件之一的才可以是BFC。

• BFC触发条件
  根元素；html标签本身就是一个BFC
  float的值不为none
  overflow的值不为visible
  display的值为inline-block/table-cell/table-caption/flex/inline-flex
  position的值为absolute或fixed

• 两栏布局
  

两栏布局

• float + margin浮动布局
  
  right部分不需要设置宽度，直接会自适应右侧所有

• 浮动布局+负外边距（双飞翼布局的两栏版）
  
  左侧固定栏指定一个右侧的100%的负外边距，为整个屏幕的宽度，这就使得main的最左侧可以与屏幕最左侧对齐。
  此时main的宽度是100%，因此需要为其子内容content指定一个左侧的外边距用于空出左侧栏的位置，即左侧栏的宽度100px
  注意：高度不要设置在子div里，设置到标签选择器里div{height:500px};

• 绝对定位
  

• flex
  

三栏布局

• 绝对定位 absolute
  

• 浮动+负外边距（双飞翼布局）
  注意，左右中间均左浮动，且中间会包含一个content
  中间栏的div写在最前面,left、right写下面
  

• 浮动定位法
  中间写最下面，左右上面
  

• flexbox
  

div{
  height:500px;
}
#container{
  display:flex;
}
#left{
  background:red;
  flex:0 0 100px;
}
#right{
  background:blue;
  flex:0 0 200px;
}
#center{
  background:pink;
  flex:1 1;
}

中间部分放中间，类比于absolute

• 圣杯布局（双飞翼布局的前身）
  
  前面的实现都一样，三栏都向左浮动，middle的宽度为100%，left的margin-left为-100%，right的margin-left为其自身宽度的负值。
  但此时左右边栏实际上是在middle上方的，会遮盖middle内容。
  此时为container设置一个左右的padding，分别为left和right的宽度。此时整体都是向中间压缩的
  然后对left与right使用position:relative，使其相对现在的位置分别向左、向右移动，从而占据container利用padding空出来的位置。

各种居中

（1）水平居中

• 行内元素居中（text-align）
  
• 块状元素居中
  I. 定宽块状元素居中
  满足定宽（块状元素的宽度width为固定值）和块状两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中。
  II.不定宽块状元素居中
  方法1：
  使用 display : table；然后设该元素“左右margin”值为“auto”来实现居中。
  原因：利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
  方法2：
  改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。
  
  （2）垂直居中
  垂直居中可分为父元素高度确定的单行文本，以及父元素高度确定的多行文本
  I.父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高，指在文本中，行与行之间的 基线间的距离 )
  II.父元素高度确定的多行文本
  方法1：
  使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
  
  方法2：
  设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性。但这种方法兼容性比较差， IE6、7 并不支持这个样式。
  

水平垂直居中

• flex justify-content + align-items
  

绘制0.5px的线段

.test{
  background:red;
  width:100%;
  height:1px;
  transform:scale(0.5);
}

css动画 绘制loading

div{
  margin:100px auto;
  width:2px;
  height:2px;
  border-radius:1px;
  box-shadow:0 -12px 0 3px black,
    0 12px 0 1px #333,
    -12px 0 0 1px #333,
    12px 0 0 1px #333,
    -9px -9px 0 1px #333,
    9px -9px 0 2px #333,
    -9px 9px 0 1px #333,
    9px 9px 0 1px #333;
  animation:loading 2s linear 0s infinite;  
}
@keyframes loading{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

<div id="loading">      
</div>

垂直居中1

• 绝对定位 + 负外边距（兼容性好，但是需要提前知道居中元素尺寸）
  
• 绝对定位 + transform
  
• 绝对定位 + auto
  
• padding实现
  
• flex实现
  
• display：table-cell 和 vertical-align