本文参与4月更文挑战，打卡day9，第九篇

9. 内边距与外边距

可以接受上下左右四个值（顺序与边框相同）

也可以分别指明四个方向：margin-top/margin-right/margin-bottom/margin-left

可取值：1. length：固定值； 2. percentage：相对于包含块的宽度，以百分比值为外边距；3. auto：浏览器自己选择一个合适的外边距，在特殊情况下可以使元素居中（只能实现水平居中）。

body会自带外边距（margin:8px），可以通过单独设置margin:0;消除这个外边距。

问题一：父元素与后代元素父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。
问题二：边距折叠块的上外边距（margin-top）和下外边距有时合并折叠为单个边距，其大小为单个边距的最大值。

给父元素加边框、内边距或者overflow:hidden，但是加边框和内边距会改变父元素的高度。

避免这种写法，可以同时都写上/下边距

定义的是最小距离，同样可以写1/2/3/4个属性值分别表示上右下左；可以分别指明四个方向：padding-top、padding-right、padding-bottom、padding-left。

元素的高度和宽度都会加上内边距

length：固定值

percentage：相对于包含块（即父盒子）的宽度，以百分比值为内边距。

10. 盒子模型

CSS position属性用于指定一个元素在文档中的定位方式。

定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除static以外的任何东西）。
相对定位元素（relatively positioned element）是计算后位置属性为relative的元素。
绝对定位元素（absolutely positioned element）是计算后位置属性为absolute或fixed的元素。
粘性定位元素（stickily positioned element）是计算后位置属性为sticky的元素。

static（默认时的属性值）：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时top, right, bottom, left 和 z-index 属性无效。
relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。top, right, bottom, left等调整元素相对于初始位置的偏移量。

原来的位置是永远不变的，偏移量是相对于这个位置而言的。

absolute：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。（当父元素为relative时可以相对于父元素进行定位）
fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top,right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。