一、文档流(normal flaw)

正常文档流流动方向：从上到下从左到右

1、inline元素

流动方向：从左到右，最右边自动会换行（遇到行尾看一个元素可以占两行，会自动把一行补齐以后换行）
宽度：内联元素的总宽度决定，设置宽度没有用（尽量窄）
高度：由line-height间接决定，与height无关（字体也会影响高度）

2、block元素

流动方向：从上到下，每个都是单独的一行
宽度：默认自动计算宽度，可用width指定
高度：由内部文档流元素决定可以height设定；注：有些文档流元素可以脱离文档流

3、inline-block元素

流动方向：从左到右可自动换行，遇到换行不会把自己分成两行
宽度：结合inline和block，默认宽度由内联元素的总和决定但可设置宽度
高度：和block类似可设置高度

以上三种元素可互相转换

display：inline/block/inline-block

overflow溢出

当内容的宽度或高度大于容器的时候会溢出，可以用overflow设置滚动条：auto自动，scroll永远显示，hidden隐藏，visible直接显示溢出部分

 overflow:scroll; 永远显示（可滑动滚动条查看所有内容，即使内容没有溢出也有滚动条）
 overflow:visible； 是直接显示溢出部分
 overflow:auto; 可灵活设置（内容溢出时可滑动滚动条查看所有内容（内容无溢出时不显示滚动条），若文档流内的某个人元素过于宽了，会显示x轴的滚动条，但是文档流内的内容显示不会发生改变，它只会显示第一屏的内容。（overflow可以分为overflow-x和overflow-y））

脱离文档流

绝对定位：position:absolute/fixed
浮动：float

二、盒模型

content-box内容盒 border-box边框盒

公式：content-box的宽度 = 内容宽度
border-box的宽度 = 内容宽度 + padding + border

图片来源：饥人谷

margin合并

1、哪些情况可以合并：父子合并、兄弟合并
2、如何阻止合并：
取消父子合并：第一个元素和最后一个元素会跟他们的父元素外边距合并，以值大的为准：

用padding/border挡住
用overflow：hidden挡住
用display：flex

取消兄弟合并

可用：display：inline-block

颜色

十六进制#FF6600或者#F60
RGBA 颜色 rgb(红,绿,蓝) ，rgba(红,绿,蓝,透明度)
hsl颜色（色相，饱和度，亮度）， hsla颜色（色相，饱和度，亮度，透明度）

三、css三种布局

选择哪种布局

float布局

在子元素上加float：left和width
在父元素上加：.clearfix

.clearfix:after{content:' '；display : block; clear: both;}
3. 经验：

会留空间或最右边不设置width
无需做响应式，因为手机没有IE，这个布局是给IE准备的
IE6/7存在双倍margin的问题解决办法： ① 将错就错，把margin减半 ② 加display：inline-block
border有时候会干扰布局改成outline

flex布局

flex小游戏：flexboxfroggy.com/#zh-cn

container容器：display:flex|inline-flex

1. 改变item的流动方向（主轴）

.container{
flex-direction:row | row-reverse | column | column-reverse;
}

row 横向，从左至右，顺序
row-reverse 横向，从右至左，倒序
column 纵向，从上至下，顺序
column-reverse 纵向，从下至上，倒序

2. 改变折行

定义是否换行

.container{
flex-wrap:nowarp | wrap | wrap-reverse;
}

3. 主轴内容对齐方式
默认主轴是横轴,除非改变flex-direction

.container{
justify-content:flex-start | flex-end | center | space-between | space-around  space-evenly | stretch;
}

flex-start 从行首起始位置开始排列
flex-end 从行尾开始排列
center 居中
space-around 均匀排列每个元素（首个元素放置于起点，末尾元素放置于终点）
space-between 余下空间在元素之间平均分布，靠边
space-evenly 余下空间平均分布
stretch 均匀排列每个元素

4. 次轴对齐(默认主轴是纵轴)

.container{
align-items: stretch | flex-start | flex--end | center | baseline;
}

stretch 均匀排列每个元素的高度
flex-start 从起始位置开始排列
flex-end 从行尾开始排列
center 居中

5. 多行内容

.container{
align-content: flex-start | flex-end | center | stretch | space-between | space-around;
}

flex-start 从起始位置开始排列
flex-end 从行尾开始排列
center 排列元素都在中间
stretch 把空间撑满
space-between 均匀排列每行（首行元素放置于起点，末尾元素放置于终点）
space-around 余下空间在每行之间平均分布

flex的item属性

1. item上面加order
改变下显示顺序，默认的order都是0，如果改变数字则从小到大排列，负数最小

2. 加flex-grow，控制自己如何长胖
默认的flex-grow是0，把剩余空间分成n份，可指定每个item占几份，数值越大占比越多

3. flex-shrink（如何变瘦） 0防止变瘦，默认值是1；数值越大数值贡献越多

4. flex-basis，控制基准宽度
默认为auto 5. align-self定制align-items

align-self: auto | flex-start | flex-end | center | baseline | stretch;

grid布局

二维布局用grid,一维布局用flex
grid小游戏：cssgridgarden.com/

1. 成为container

.container{
display: grid  | inline-grid ;
}

2. 设置行列
grid-templete-column:设置列宽(也能以fr为单位，这样写它会以平均分布，相当于格子一样;可用多种单位：（grid-template-columns:100px 3em 40%）)
grid-templete-row:设置行高

.comtainer{
grid-templete-columns:40px 50px auto 30px;
grid-templete-rows: 30px 20px 10px auto;
}

3. grid-templete-areas 分区

     "header heaer header"

      "asaide main ad"

      "footer footer footer"

4. grid-gap空隙
可控制两个元素之间的间隙(grid-column-gap/grid-row-gap)

grid-gap:12px;

5. 用order改变顺序
规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局

6. grid-column-start/grid-column-end:定义元素在行上开始和结尾的位置

grid-column-start:2; 从第二列开始  
grid-column-end:3;到第三列结束  
grid-row-start:2;从第二行开始  
grid-row-start:3;到第三行结束

四、css定位

div的分层

来源：饥人谷

浮动元素脱离文档流，div的文字内容不分内外，后出现的遮挡先出现的，只有浮动元素会被遮住

position属性

1. static(默认值) 当前元素还在文档流中，一般不写默认值
2. relative：
作用 ① 相对定位：升起来但是不脱离文档流

position:relative;
top:10px;

作用 ② 配合z-index使用
默认每个元素的z-index是auto，auto的计算值为0但是不能写z-index：0；
每个层叠上下文都是一个新的作用域，只有处在同一个作用域中的z-index才能进行比较
注意：relative在文档流中占位不变，只是显示看起来变了

3. absolute绝对定位

使用场景：①脱离原来的位置另起一层，比如关闭对话框按钮；② 鼠标提示
注意：①以祖先元素中最近的非static元素为基准定位
②某些浏览器不写left/top会错乱
③善用left：100%；负margin；
④子元素写absolute，父元素需要补relative

5. fixed固定定位
相对视口定位；
使用场景：①广告②回到顶部按钮
注意：手机上不可以使用这个，非常非常容易报错 ②父元素使用transform，fixed定位会失效

6. sticky粘滞定位
使用方法：sticky+mdn

层叠上下文

图片：饥人谷

每个层叠上下文都是一个小世界（作用域）
每个作用域的z-index与外界无关，处在同一个小世界z-index才能比较

注意：哪些不正交的属性可以创建层叠上下文

z-index=0（前提：有写position：reltive | absolute | fixed）
搜索mdn文档
需要记忆：z-index | flex | opacity | transform
如果忘记：【层叠上下文MDN】
其他：opacity与background区别：opacity影响整个元素的透明度包括border背景等等，background只影响背景

五、css动画

浏览器的渲染原理

浏览器渲染过程

根据HTML构建HTML树（DOM）
根据CSS构建CSS树（CSSDOM）
将两棵树合并成一颗渲染树（render tree）
layout布局（文档流，盒模型，计算大小和位置）
paint绘制（把边框颜色，文字颜色，阴影等画出来）
component合成（根据层叠关系展示画面）

transform

transform四个常用功能：位移translate | 缩放scale | 旋转rotate | 倾斜skew
经验：①一般需要配合transition过渡使用；②inline元素不支持transform，需要先变成block
缩写：

transform:rotate(45deg) translateX(20px);

transition过渡方式

作用：补充中间帧
语法:

transition: 属性名时长过渡方式延迟;
可以用逗号隔开两个不同属性(transition:left 200ms, top 1s）
可以用all代表所有属性（transition:all .8s;）
过渡方式有：linear匀速 | ease-in加速 | ease-out减速 | ease逐渐变慢 | cubic-bezier自定义速度模式 | 等等其他
如何让动画停在最后一帧：加forwards

注意：

不是所有属性都能过渡,比如display:none-->block不能过渡
可以改成：visibility：hidden-->visible
opacity也可以过渡
display和visibility的区别： display: none;是彻底消失，不在文档流中占位，浏览器也不会解析该元素；不会被子元素继承。visibility:hidden;是视觉上消失了，在文档流中占位，浏览器会解析该元素；会被子元素继承。

animation动画

keyframes语法

form 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: 100px; }
}

animation语法

animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名; 时长:1s或者1000ms
过渡方式:跟transition取值一样，如linear
次数:3或者2.4或者infinite
方向:reverse | alternate| alternate-reverse
填充模式:none | forwards | backwards | both
是否暂停:paused | running
注：以上所有属性都有对应的单独属性

学习css总结