CSS学习笔记

好记性不如烂笔头，这篇文章记录我平时工作学习过程中关于CSS的笔记，会经常更新，比较简洁，作为以后个人复习的资料。

• 一个css动画的库：animate.css
• 关于hover，hover一个box1，对他的兄弟元素box2做改变，

.box1:hover +.box2 {
    width: 100px;
}

去掉 + ，那就是对box1的子元素做改变

• 像serif  san-serif 是字体族，所以设置的时候不加单引号

body {
    font-family: 'Open sans', sans-serf;    
}

• 水平垂直居中

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

//css
//第一种（absolute)
    .parent {
      height: 500px;
      width: 500px;
      border: 1px solid #000;
      position: relative;
    }
    .child {
      height: 50px;
      width: 50px;
      border: 1px solid #999;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -25px;
      margin-top: -25px;
    }
    
//第二种(transform)
.parent {
      height: 500px;
      width: 500px;
      border: 1px solid #000;
      position: relative;
    }
    .child {
      height: 50px;
      width: 50px;
      border: 1px solid #999;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
//第三种(flex)
.parent {
      height: 500px;
      width: 500px;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .child {
      height: 50px;
      width: 50px;
      border: 1px solid #999;
    }

• 让一张图片和一段文字居中对齐

//html
    <div class="parent">
      <img src="https://ws1.sinaimg.cn/large/006tKfTcly1fpaf6killaj3012012a9t.jpg" alt="">
      <div class="text">这是一段文字</div>
    </div>
    
//css (两个元素都为inline-block或者inline时，vertical-align才生效）
//第一种
    .parent {
      height: 500px;
      width: 500px;
      border: 1px solid #000;
    }
    .text {
      display: inline-block;
      vertical-align: middle;
    }
    img {
      width: 50px;
      height: 50px;
      display: inline-block;
      vertical-align: middle;
    }
    
//第二种（flex）
    .parent {
      height: 50px;
      border: 1px solid #000;
      display: flex;
      align-items: center;
    }
    .text {
    }
    img {
      width: 50px;
      height: 50px;
    }

• postCSS插件，补全各种浏览器前缀
• 各种高度https://juejin.im/entry/582eb...
• 两个inline-block之间会有空隙，解决方法有两种：父元素fontsize设为0 或者删掉inline-block元素之间的空格
• 清除浮动https://segmentfault.com/a/11...
• flex讲解 https://zhuanlan.zhihu.com/p/...
• ul li + li {} 选择除了第一个li的其余li