前言
总结下工作之中遇到过的知识点，顺便培养自己的一个习惯。
1.盒模型
- 盒模型是元素的content，padding，border，margin的总和。
- 盒模型有两种模式：W3C标准模式和IE浏览器兼容
W3C标准模式content不包括padding和border。
IE浏览器兼容中content包括padding和border。
IE下只要完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。 - CSS3中可以通过属性box-sizing设置盒模型：
box-sizing: content-box; // 默认情况,标准模式
box-sizing: border-box; //content包括padding和border
比如：在页面进行流体布局时，将宽度定义为百分数，最后就需要将盒模型定义为怪异模型，增加padding而不会影响整体width,否则会超过整体宽度的100%。
2.外边距合并
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并
3.定位机制
- CSS中存在3中定位机制： 标准文档流，浮动和绝对定位；
- 标准文档流：从上到下，从左到右输出文档内容，由块级元素和行级元素组成。
- 浮动：使块级元素横向布局，多列布局关键。设置浮动的元素仍然处于标准文档流中。
- 绝对定位：设置浮动的元素不会处于标准文档流中,目的：横向多列布局和一些复杂效果，如遮罩层，全屏显示等。
4.Float(浮动)
- 元素会向左或向右移动，直到触碰到容器（父元素）为止。值有left，right和none；
浮动最开始诞生的原因只是为了让文字环绕图片。 - Float主要特性：
- 坍塌性：被设置了float的元素会脱离文档流，父级包裹不住子集
- 包裹性：浮动元素宽度不起作用，内容撑开宽度；
- 清空格：会导致节点脱离文档流结构，空格，换行都不起作用；
具有坍塌性的样式有： float,position:absolute/fixed/sticky
体现包裹性的css样式有：
float
display:table/table-cell、inlineblock
position:absolute/fixed/sticky
Overflow:hidden/scroll
- 清浮动：由于浮动有坍塌性，父级包裹不住子级（只能用在浮动元素的父级上。不必过多使用）
.clear:after{
content: "";
display: table;
clear: both;
}
.clear{
*zoom: 1; /*兼容IE低版本*/
}
5.Position介绍
取值有：static / relative / absolute / fixed / inherit
- static：认值。没有定位，元素出现在正常的流中 （忽略 top, bottom, left, right z-index 声明）。
- relative:
- 不使元素脱离文档流
- 不影响元素本身的特性；块元素还是块元素，内嵌还是内嵌
- 如果没有定位偏移量，对元素本身没有任何影响；
- 如果有定位偏移量，则相对于其正常位置进行定位；
- 还拥有z-index声明
- absolute:
- 使元素完全脱离文档流；（和float一样）
- 使内嵌支持宽高；（和float一样）
- 块属性标签内容撑开宽度(如果为设定宽高）；（和float一样，包裹性)
- 如果没有定位偏移量，位置不变，具有跟随性；
- 如果有定位偏移量，如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档<html>发生偏移；
(注意是定位父级，一般在需要绝对定位的父级上添加相对定位position:relative;) - 还拥有z-index声明;
- fixed: 与绝对定位的特性基本一致，差别是始终相对屏幕窗口尺寸进行定位，（兼容性，IE6不支持，利用JS解决）
- inherit:规定应该从父元素继承 position 属性的值。
设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多；
上文提到了absolute会使元素悬浮在页面之上，如果有多个悬浮元素，层级如何确定？答案是“后来者居上”
Absolute与float 兄弟关系，都具有包裹性、破坏性。
6. Display
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。 |
| list-item | 此元素会作为列表显示。。 |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
