css 学习总结

1. 清除浮动
  - clear:both
  - 父级添加 over-flow:hidden;
  - after伪元素 clear:both; 
  - before和after双伪元素清除浮动
     ```css
      .clearfix:after,.clearfix:before{
        content: "";
        display: table;
      }
      .clearfix:after{
        clear: both;
      }
      .clearfix{
        *zoom: 1;
      }
    ```
2. 实现一个两边宽度固定中间自适应的三列布局

```less
  .foo{
    width:100%;
    display:flex;
    .left,.right{
      flex:0 1 200px;
    }
    .center{
      flex:1
    }
  }
  .foo1{
    width:100%;
    display:table;
    .left,.right{
      display:table-cell;
      width:200px
    }
    .center{
      width: auto;
      display:table-cell;
    }
  }
  .foo2{
    width:100%;
    &::after{
      content: '';
      clear:both;
      visiable:hidden;
    }
    .left,.right{
      width:200px
    }
    .left{
      float:right;
    }
    .right{
      float:left;
    }
    .center{
      width: auto;
    }
  }
```

3. rem，px，em
  1. rem 
    相对于html根元素大小
  2. px 相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
  3. 相对于父级元素大小

4. 盒模型
  - W3C盒子模型 margin + border + padding + content
  - 在IE盒子模型中，width表示content+padding+border这三个部分的宽度
  - box-sizing 控制盒模型的解析模式 默认为content-box; border-box 为IE盒子模型。
5. css 选择器

  id,class,标签,相邻,子选择,后代选择器,通配符,属性选择,伪类选择器

6. 

7. 语义化
  1. 为了在没有css代码时，也能呈现很好的内容结构，代码结构，以至于达到没有编程基础的非技术人员，也能看懂一二。（其实，就是为了不穿CSS外衣，裸奔依然好看）。
  2. 提高用户体验，比如：title，alt用于解释名词和图片信息。
  3. 利于SEO，语义化能和搜索引擎建立良好的联系，有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。
  4. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
  5. 便于团队开发和维护，语义化更具可读性，如果遵循W3C标准的团队都遵循这个标准，可以减少差异化，利于规范化。

8. css伪元素有哪些
  :active，将样式添加到被激活的元素。
  :focus，将样式添加到被选中的元素。
  :hover，当鼠标悬浮在元素上方是，向元素添加样式。
  :link，将特殊的样式添加到未被访问过的链接。
  :visited，将特殊的样式添加到被访问的链接。
  :first-child，将特殊的样式添加到元素的第一个子元素。
  :lang，允许创作者来定义指定的元素中使用的语言。
  伪元素：
  :first-letter，将特殊的样式添加到文本的首字母。
  :first-line，将特殊的样式添加到文本的首行。
  :before，在某元素之前插入某些内容。
  :after，在某元素之后插入某些内容。
  :first/last/only-of-type
  :nth-child(n)

9. border-box和content-box
  1. border-box 元素的width和height觉得元素的高宽 + padding + border
  2. content-box 元素的width和height觉得元素的高宽

10. float和position的区别
  1. 共同点：对内联元素设置baifloat或absolute属性，可以让元素脱离文du档流（zhi块级元素也可以），并dao且可以设置其宽高。
  2. 不同点：float仍会占据其位置，position会覆盖文档流中的其他元素。

11. css选择器的优先级
  - !important > style > id > class > 标签  

12. margin塌陷
  - 父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值.

13. 居中div
  1. 浮动方式
  ```css
    <!-- 不定宽高 -->
    .children-foo{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
    }
    <!-- flex -->
    .parent-foo{
      width:100%;
      height:600px;
      display:flex;
      align-items:center;
      vertical-align:middle;
      justify-content:center;
    }
    <!-- table -->
    .parent-foo{
      display:table-cell;
      vertical-align:center;
      text-align:center;
    }
    .children-foo{
      display:inline-block;
    }
    <!-- 绝对定位 -->
    .parent-foo{
      display:relative;
      width:100px;
      height:100px;
    }
    .children-foo{
      width:20px;
      height:20px;
      display:absolute;
      left:0;
      top:0;
      bottom:0;
      right:0;
      margin:auto;
    }
  ```

14. div:
  
  - inline
  - block
  - inline-block
  - flex
  - grid
  - table
  - table-cell
  - list-item
  - none

15. position

  - relative
  - absolute
  - fixed
  - static(默认)

16. css 三角形

  ```css
    .foo{
      width:0;
      height:0;
      border-left:40px soild transparent; // transparent 有颜色值时右三角
      border-right:40px soild transparent; // transparent 有颜色值时左三角
      border-top:40px soild transparent; // transparent 有颜色值时下三角
      border-bottom:40px soild transparent; // transparent 有颜色值时上三角
    }
  ```

17. 初始化样式
  - 原因： 浏览器兼容问题导致标签值默认样式不同
  - 初始化方案: 在默认的HTML元素样式上提供了跨浏览器的高度一致性,修复浏览器自身bug
    1. reset.css 全部设置为初始值或0
    2. normal.css 设置为 

18. 浏览器兼容问题
  - 默认padding,margin不一样
  - ie浏览器中双边距bug 
  - 超链接访问后hover样式消失
  - 设置较小高度标签是,在IE6,IE7中高度超出自己设置高度

19. visibility中collapse属性
  - chorme 中和hidden属性一致
  - ie，firefox，opeara中和display:none一致

20. BFC 
  BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
  因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
  同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

21. css 动画
  - transition 渐变
    1. transition-property: width,...
    2. transition-duration: 动画时间
    3. transition-timing-function 动画方式: linear,ease,ease-in,ease-out,ease-in-out
    4. exp: 
    ```css
      .base {
        width: 100px;
        height: 100px;
        display: inline-block;
        background-color: #0EA9FF;
        border-width: 5px;
        border-style: solid;
        border-color: #5daf34;
        transition-property: width,height,background-color,border-width;
        transition-duration: 2s;
        transition-timing-function: ease-in;
        transition-delay: 500ms;
          /*简写*/
          /*transition: all 2s ease-in 500ms;*/
        &:hover {
            width: 200px;
            height: 200px;
            background-color: #5daf34;
            border-width: 10px;
            border-color: #3a8ee6;
        }
      }
    ```
  - transform 转变动画
    - transform-functions：旋转(rotate)：倾斜(skew)：移动(translate)： 缩放(scale)
      exp:
      ```css
        .base2{
          transform:none;
          transition-property: transform;
          &:hover {
              transform:scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
          }
        }
      ```
  - animation 动画
    - animation-name:
    - animation-duration:
    - animation-timing-function:
    - animation-delay:
    - animation-iteration-count:
    - animation-direction:
    -  @keyframes animation-name-foo{}