position fixed脱离文档流吗_浅析CSS文件流与盒模型

文档流

文档流又称流式布局，是指在对页面进行修改之前，块级元素和内联元素在页面上的显示方式。元素在页面上的流动方向分为两种，一种是从左往右，到达最右边进行换行；一种是从上到下，每一个元素都另起一行。由此，元素类型被分成了三种，一种是从左往右的inline元素（span），一种是从上往下的block元素（div），还有一种是将上面两种方式相结合的inline-block元素（可以是span也可以是div，样式中加上display: inline-block）。

三种元素在页面上的布局如下图所示：

根据上图我们可以得知，inline元素在一行的最末尾放不下时会将自己截成两半，而inline-block元素则会换行。block元素每个占一行。

宽度：

inline的宽度为内部元素的和，不能用width指定；

block会自动计算宽度，可以用width来指定；

inline-block结合前两者的特点，可以用width来指定；

高度：

inline的高度由line-height间接确定，跟height无关；

block的高度由内部文档流决定，可以设置height；

inline-block和block类似，也可也设置height；

注意事项：

1. 现在没有内联元素和块级元素没有绝对的划分，所有的布局样式可以用CSS进行控制，比如在一个span元素的样式中加上：display: block;则该span元素就是一个块级元素，div同理。
2. 不要在inline元素中写block元素。
3. div的默认宽度不是100%，而是auto。不要在div中写width: 100%;会出现bug。
4. 如果div中没有内容，那么默认高度为0。

溢出：

当div中文档流的高度高于设置的height的高度，则会发生溢出。如下图所示：

处理溢出的方法有以下几种：

1. overflow: visible; //放在那不管
2. overflow: hidden; //将溢出部分隐藏
3. overflow: scroll; // 加一个滚动条，可以拖动滚动条查看溢出的内容， 但是有个bug，即使没有溢出，也会显示两个很丑且没什么用的滚动条
4. overflow: auto; //比较推荐的方式，溢出的时候也会有滚动条，不溢出的时候滚动条会消失

脱离文档流：

脱离文档流就是将元素在布局中将它单独拿出来，使盒子在定位时不将它包含在内，忽视它的存在。脱离文档流的方法有两种：

1. float；
2. position: absolute/fixed;

盒模型

盒模型分为两种，一种是content-box，一种是border-box。他们的区别是content-box的宽度只包含到content，而border-box的宽度包括了，content，border和padding。如下图所示：

一般优先使用border-box。

margin合并：

当一个页面中有上下两个兄弟div分别叫a和b，他们的上下外边距都是10像素，那么理论上他们border之间的距离应该是：

a的下外边距+b的上外边距=20px；

但是事实上结果如下图所示：

从图中可以看出a和b的距离合并成了10px，这就叫margin合并。

margin合并不止出现在兄弟组件之间，在父子组件中也存在相同的情况。

那么如何阻止margin合并呢，一般有一下几种方法：

父子合并

1. 用padding或border挡住，让他们的外边距之间有一个界限分隔开。
2. 用overflow: hidden;挡住
3. 用display: flex;

兄弟合并

兄弟合并一般都是符合我们的预期的，但如果实在要阻止合并，可以用inline-block消除。