一、盒子模型
二、定位
1、元素的定位属性：
元素的定位属性主要包括“定位模式”和“边偏移”两部分
1.1边偏移
边偏移属性
top、 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom、 底端偏移量，定义元素相对于其父元素下边线的距离
left、 左端偏移量，定义元素相对于其父元素左边线的距离
right 右端偏移量，定义元素相对于其父元素右边线的距离
也就是说，以后定位要和这边偏移搭配使用了，比如 top:100px,left:30px;等等
1.2定位模式（定位的分类）
在CSS中 position属性用于定义元素的定位模式，其基本语法格式如下：
选择器 {
position: 属性值;
}
position常用属性值
static 自动定位（静态定位）静态定位是所有元素的默认定位方式，当 position取值为static时，可以将元素定位于静态位置，所谓静态位置就是各个元素在HTML文档流中默认位置。
（上面意思翻译成白话：就是网页中所有元素都默认的是静态定位，其实就是标准流的特性，静态定位状态下，无法通过边偏移属性（top\bottom\left\right）来改变元素的位置）
静态定位的唯一用处就是取消定位
relative 相对定位
注意：
1、相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有（相对定位脱标，仍然占有位置）
2、其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）
absolute 绝对定位
绝对定位的元素位置相对于最近的已定位（绝对、固定或相对定位）的父元素进行定位，如果元素没有已定位的父元素，那么它的位置相对于HTML
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠
注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置
fixed 固定定位 (固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形)
元素的位置相对于浏览器窗口是固定位置。即使窗口滚动它也不会移动
注意:fixed定位使元素与文档流无关，因此不占据空间。fixed定位的元素和其他元素重叠
sticky 粘性定位
2、定位口诀（重要）：子绝父相
2.1 定位的盒子居中对齐 （常见+计算方式）
(回顾：为保证盒子本身大小，在添加边框和padding值后，盒子会被撑开大小，应在盒子本身宽高上减去相应像素)
定位的盒子也可以水平或者垂直居中，算法如下：
1、首先left 50%(水平居中)/top 50%(垂直居中) 父盒子一半的大小
2、然后走自己负一半值外边距就可以了 margin-left/margin-top
固定定位和模式转换（跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式）
例如：如果盒子没有给宽度（如通栏盒子）且不含内容，添加浮动或者绝对定位/固定定位后，盒子会消失。
2.2 z-index （叠放次序）
在CSS中，想要调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、0、负整数。
比如: z-index: 2;
注意：
1、z-index 的默认属性值是0，取值越大，定位元素在层叠元素中越居上
2、如果取值相同，则根据书写顺序，后来居上。
3、后面数字一定不能加单位
4、只有绝对定位、相对定位、固定定位有此属性，其余标准流、浮动、静态定位都无此属性，亦不可指定此属性。
2.3 案例：实现盒子水平居中、垂直居中的方法
三、BFC/margin叠加（外边距合并）
BFC特性：
1、BFC会阻止垂直外边距（margin-top\margin-bottom）折叠
2、BFC不会重叠浮动元素
3、BFC可以包含浮动
如何触发一个盒子的BFC ？
position: absolute;
display:inline-block;
float:left;
overlow:hidden;
3.1 父子元素/margin越界
这种情况也叫做子元素越界或者margin越界（第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题）：
如果块级父元素中，不存在border, padding（当上border及上padding宽度为0时）, 行内元素以及清除浮动这四条属性，那么这个块级元素和其第一个子元素的上外边距（margin-top）就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生 上外边距塌陷 现象。
类似地，若块级父元素的下外边距（margin-bottom）与它的最后一个子元素的下外边距之间没有父元素的border, padding, 行内元素，height, min-height, max-height分隔时，就会发生 下外边距塌陷 现象。
————————————————
如下图所示，子元素的上外边距会带着父元素一起下来。
3.2 同级相邻元素
同级相邻元素之间的外边距会塌陷，塌陷后的间距等于两个元素外边距的较大值（如果后者被清除浮动，不遵循此规则）
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
例如：
————————————————
上下相距 15 PX：
上下相距 20PX：
3.3 空块元素
上下边距为 20 PX ：
上下边距 35 PX：
四、总结
当两个或更多个垂直边距相遇时，它们将形成一个外边距margin。
外边距（margin）的的高度等于两个发生叠加的外边距的高度中的较大者
只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。
原文：https://www.cnblogs.com/kkw-15919880007/p/14542708.html