文档流

文档流，从字面上可以理解为就像流水一样，在倒入一个水杯时，水会从下到上填满杯子；倒入水渠，水会从左到右流动；文档流的最大特点就是自适应。

文档流两个重要的概念元素：

• inline元素：流动方向为从左到右，多个内联元素，可以在同一行显示，例如,等

  ~

inline元素的宽度是它包含的文字或者图片的宽度，不可更改（即不能用width指定）。

inline高度由line-height决定，跟height无关

• block元素：从上到下，每个元素都会另起一行，在文档中独占一行，例如
  ,

block元素在不设置宽度的情况下，默认为width：auto。一般不建议写width：100%，一旦给元素添加了宽度属性，就会失去文档流。

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

• inline-block:结合前两个的特点，可用width，从左到右。

overflow溢出：

给block元素设置固定高度，但是内容超出这个高度，就会出现溢出：

使用overflow:

1. overflow:hidden     隐藏超出内容
2. overflow：auto      不超出时正常显示，溢出后出现滚动条
3. overflow：scroll      最好不用，不管是否超出高度，都会出现滚动条

脱离文档流：

1. float:left       给元素设置浮动
2. position:absolute     给元素设置绝对定位
3. position:fixed          给元素设置固定定位

盒模型

盒模型是CSS布局的基础，用来控制网页元素显示位置以及元素间的位置关系

• content-box:  content就是盒子的边界，content-box的width=内容的宽度
• border-box:  border作为盒子的边界，border-box的width=内容宽度+左右padding+左右border

margin合并

1. 相邻兄弟元素合并

   p{margin:10px}

   1111111111111111

   22222222222222222

   上下两行的margin为10px,而不是20px 阻止合并可以用inline-block消除

2.父子margin合并

.fa{
  margin-top:10px;
  border:1px solid green;
}
.so{
  margin-top:10px;
}
<div class="fa">
  <div class="so"></div>
顶部margin是10px,而不是20px
阻止合并可以用overflow:hidden挡住