盒子模型：

将HTML页面中的布局元素看作是一个矩形的盒子 一个css盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）内容区域包括文字与图片等盒子内容与边框的距离是内边距（类似单元格的 cellpadding)盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

盒子的宽：内容宽度+左右内边距+左右外边距+左右边框

盒子的高：内容高度+上下内边距+上下外边距+上下边框

内边距产生的问题

有宽度的盒子加内边距会撑大原来的盒子解决：

将有宽高的盒子减去相应的内边距的值若一个盒子没有指定宽度， 此时给这个盒子指定padding， 则不会撑开盒子。

清除元素的默认内外边距

使用margin时，会出现垂直外边距合并

(1). 相邻块元素

当上下相邻的两个块元素，如果上面的元素有margin-bottom下面的元素有margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。而是取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。解决方案：尽量给只给一个盒子添加margin值。

(2). 嵌套块元素

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，那么父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者解决方案：可以为父元素定义上边框。可以为父元素定义上内边距可以为父元素添加overflow:hidden。

注意：#浮动、固定、绝对定位的盒子不会有问题！

浮动

特点：

加了浮动的盒子在其他标准流盒子的上面。加了浮动的盒子是不占位的

注意：

浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙浮动是不占位的，会影响下面的标准流元素，需要给浮动的元素添加一个标准流的父亲。子盒子的浮动参照父盒子对齐不会与父盒子的边框重叠，也不会超过父盒子的内边距浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。如果一个盒子里面有多个子盒子，如果其中一个盒子浮动，其他兄弟盒子也应该浮动。防止引起问题

三种布局机制的上下顺序

标准流在最底层

浮动在中间层

定位的盒子在最上层

定位

statlc静态定位是元素的默认定位方式，无定位。relative相对定位是元素相对于自身原来在标准流中的位置来说的(占位)absolute绝对定位是元素以最近的带有定位的父级元素来移动位置。

3.1 不占位

3.2 父元素没有定位，则以浏览器为准定位

3.3要和父级搭配使用：子绝父相fixed 固定定位 只认浏览器的可是窗口 （应用：电梯导航）

4.1 不占位

4.2 跟父元素没有任何关系；单独使用的

4.3 不随滚动条滚动。

堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。

加了定位的盒子，默认后面的盒子会压住前面的盒子。

用z-index层叠等级属性可以调整盒子的堆叠顺序。

z-index的特性如下：

属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；

如果属性值相同，则按照书写顺序，后来居上；

数字无单位。

浮动的妙用：

让多个块级元素在一行显示。让左右对齐盒子 浮动的盒子就是按照顺序左右排列

知识点内容来自教学视频，自己总结归纳。

box-sizing: border-box;

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

box-sizing: content-box

width = 内容的宽度

height = 内容的高度