Border调试法

border: 1px solid red;

在写css元素内容时必须加上这句，可以用来查看自己书写的CSS是否正确；如果呈现出的内容则说明该元素下的CSS编写正确，未呈现出则是错误的可以进行修改。
（问题解决后要将其删除）！！！

文档流 Normal Flow

inline
- 元素内容过多时会被截成两个部分换行；
- 不接受宽度，不要再inline元素中加block元素；
- 高度由line-height间接确定，跟height无关，通过增padding来撑高可视高度，实际高度没有受影响，会被继承，位置没有特殊要求
block
- 默认自动计算宽度，可以用width指定；
- 高度由内部文档流元素决定，可以设height总和决定；
inline-block
- 元素内容成块，不会跨行；
- 可以用width将内容包裹起来；
- 结合了前两者的优点；
overflow 溢出：内容超过了设置的文档流时的处理
- overflow: visible ;
  可见不管；
- overflow: hidden ;
  超出部分可见隐藏，但是客户不能滚动；
- overflow:scroll;
  用户可见可滚动；有bug，内容没有超过，但是网页还是会呈现另个滚动条；
- overflow:auto;
  解决上述的缺点。
position: absolute/fixed; 脱离文档流

盒模型

content-box

content-box.png
border-box
一般比较常用的是该模型

border-box.png

二者之间的却别
- content-box width=内容高度
- border-box width=内容高度+padding+border

margin 合并

什么情况下会合并：

父子margin ，只有上下重叠，左右从来不重叠
- 可用padding/border/overflow：hidden/display: inline-block来阻止合并
兄弟margin 是符合预期的
- 可以用inline-block来消除合并

CSS布局

float布局（针对IE，手机上的不用该布局)

步骤：

在子元素加上float：left/ width；
在父级元素上加.clearfix；
固定写法

clearfix:after
{
    content:  ' ';
    display: block;
    clear: both;
}

如果图片之间有多余的空隙,要消除这些空隙，可以在图片上写

vertical-align: top;

或者

vertical-align: middle;

是图片对齐

float: left;

平均布局：只要在布局中间加上x图层；x图层的右边距为负数

平均布局-margin为负数的情况.png

flex布局

让一个元素变成flex容器

.container
{
display: flex;/*or inline-flex*/
}

flex-direction 定义元素摆放的方向
flex-direction: row; 元素摆放的方向和文字方向一致；
flex-direction: row-reverse; 元素摆放的方向与文字方向相反；
flex-direction: column; 元素从上放到下；
flex-direction: column-reverse; 元素从下放到上；

flex-wrap 分散
flex-wrap: nowrap; 所有元素都放在一行；
flex-wrap: wrap; 元素自动换成多行；
flex-wrap: wrap-reverse; 元素自动换成逆序的多行；

flex-flow=flex-direction+flex-wrap

4.justify-content 水平对齐元素
justify-content：flex-start ; 元素和容器左端对齐
justify-content： flex-end ; 元素和容器左端对齐
justify-content： center; 元素在容器中居中
justify-content： space-between ; 元素之间保持相等的距离；
justify-content： space-around ; 元素周围保持相等的距离；

align-content 行与行之间隔多远
align-content: flex-start; 多行集中在顶部；
align-content: flex-end; 多行集中在底部；
align-content: center; 多行居中；
align-content: space-between;行与行之间保持相等距离；
align-content: space-around; 每行周围保持相等的位置
align-content: stretch; 每行都被拉伸以填满容器；（一般不太实用）

练习：请通关 Flex 青蛙游戏 https://flexboxfroggy.com/#zh-cn

grid 布局

二维布局一般使用grid;

grid-column 描述水平位置指定起始位置
grid-column-start:3; 描述网格中从左起第几列；
grid-column-end将网格拓展到多列，如果数值小于所在网格列数时，则会向前拓展，为负数时来指定为右边起的第几列；

缩写grid-column:2/4; 表示网格从第二列开始，到第四列结束；

grid-row 描述垂直方向指定起始位置
grid -area=grid-column+grid-row 数值用“/”隔开；
fr 分数
每一个fr单元分配一个可用的空间，两个元素分别设置为1fr和3fr，那么空间就会被平均分层4份，第一个元素占1/4的空间，第二个元素占3/4的空间。

练习：请通关 Grid Garden 游戏：https://cssgridgarden.com/#zh-cn

CSS定位

一个div的分层

div分层.png

position:

relative; 相对定位，升起来，但是不脱离文档流；
static;默认值，待在文档流里；
absolute;绝对定位，定位基准是最大元素的非static，善用left: 100%和left: 50%; margin: 负数;
写了absolute，一般都要补一个relative，在其后面一定要写上top和left
配合z-index使用，

z-index.png
- z-index的默认值是auto，
- 只要z-index后面接数值-1/-2/0/1/2就与默认值呈现的状态不一样。
- 一个层叠上下文里面的z-index跟外界无关，处于同一个层叠上下文的
  z-index才能进行比较；