最近稍微学习了一些 CSS 的基础知识，了解了一个大概。现在对最近学的这些知识做一个梳理总结，加强一下学习的记忆。

CSS 的历史

1. CSS ，Cascading Style Sheets，层叠样式表。是由李爵士的同事提出的。
   
2. 层叠的意思。
   
   • 样式层叠：可以同时对同一选择器做样式声明。
     
   • 选择器层叠：可以用不同的选择器对同一个元素做样式声明。
     
   • 文件层叠：可以使用多个CSS文件对同一HTML文件做声明。
     
3. CSS 版本
   目前运用最广泛的是CSS2.1版本，现在开始已经不是以一整个版本升级了，而是分成各个模块，各个模块自主升级。
   

文档流

1. 英文是Normal Flow，也就普通流，文档流是中文翻译。简单说指的就是元素按照它在HTML中的位置进行排布的过程。
   
2. 流动方向。
   
   • inline： 元素从左到右，到达最右才会换行。
     
   • block：元素从上到下，每一个都另起一行。
     
   • inline-block：元素也是从左到右，到达最后换行，但是不会把元素分成两块。
     

盒模型

1. content-box：内容盒。content-box的宽度就是内容的宽度。
   
2. border-box：边框盒。border-box的宽度是内容的宽度+padding的宽度+border的宽度。
   

CSS 布局

CSS 目前用的大概是三种布局。

1. Float 布局。
   
   • 子元素上加 float:left; 和 width
     
   • 父元素上加 .clearfix
     .clearfix::after{ content:''; display: block; clear: both; }
     
2. Flex 布局
   
   • 父元素container的样式
     
     • 让一个元素变成Flex容器
       display: flex | inline-flex;
       
     • 改变items的流动方向（主轴）
       flex-direction: row | row-reverse | column | column-reverse;
       
     • 改变折行
       flex-wrap: nowrap | wrap | wrap-reverse;
       
     • 主轴对齐方式（默认是横轴）
       justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
       
     • 次轴对齐方式（默认是纵轴）
       align-items: stretch | flex-start | flex-end | center | baseline
       
     • 多行内容
       align-content: flex-start | flex-end | center | stretch | space-betwteen | space-around
       
   • 子元素items的属性
     
     • item 上面加上 order
       
     • item 上面加上 flex-grow 控制自己长胖
       
     • item 上面加上 flex-shrink 控制自己变瘦
       
     • Flex 的属性还有很多，用到的时候可以去查询 MDN。
       
3. Grid 布局
   
   • Grid 也分 container 和 items
     
   • 成为 container
     display: grid | inline-grid;
     
   • 行和列
     grid-template-columns: 40px 50px auto 50px 40px; grid-template-raws: 25% 100px auto;
     
   • Grid 的属性很多，用法也很灵活，详细可以用的时候再查询，先了解一个大概就行。
     

CSS 定位

布局是屏幕平面的，定位是垂直于屏幕的。

1. div 的分层
   
   • 最底层：background
     
   • border
     
   • 块级子元素
     
   • 浮动元素
     
   • 内联子元素
     
2. position 属性
   
   • static：默认值，是指这个元素待在文档流里。
     
   • relative：相对定位。元素升起来，但是不脱离文档流。意思就是你占的位置是不变的，只是看起来不在原来的位置。
     
   • absolute：绝对定位。定位基准是最近的那个定位不是static的父元素。
     
   • fixed：固定定位。定位基准是viewport，但是这个定位有问题，手机上尽量不要使用。
     
   • sticky：粘滞定位。可以用来做导航，但是兼容性很差，用的少。
     

CSS 动画

1. 动画的原理
   动画就是一幅幅静止的图片以一定的速度连续播放时，肉眼因为有视觉残像就会误以为画面在动。
   
2. 浏览器渲染过程
   
   • 根据 HTML 文件构建一棵 HTML 树。
     
   • 根据 CSS 文件构建一棵 CSS 树。
     
   • 然后将两棵树合并成一棵渲染树（render tree）。
     
   • Layout 布局（文档流、盒模型、计算元素的大小和位置）。
     
   • Paint 绘制（边框颜色、文字颜色、其他颜色）。
     
   • Composite 合成
     
3. 动画有两种做法
   
   • 用 transform 过渡
     
     • transition: 属性名 时长 过渡方式 延迟
       
     • 可以用 all 代替所有属性。
       
     • 过渡方式有很多，常用的有 linear、ease系列，具体什么含义可以参考 MDN 教程。
       
   • 用 animation
     
     • animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
       
     • 时长: 1s或者1000ms
       
     • 过渡方式：跟transition取值一样，如linear
       
     • 次数：3或者2.4或者infinite，infinite可以让它一直动
       
     • 方向：reverse | alternate | alternate-reverse
       
     • 填充模式：none | forwards | backwards | both
       
     • 是否暂停：paused|running
       
     • keyframes 有两种写法
       
     • 第一种写法是 from to
       @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } }
       
     • 第二种写法是百分数
       @keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } }
       

以上就是我最近初步学习 CSS 的一些知识整理和心得了，记录下来，以后有问题方便查询。