持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情。

定位

margin() 指定顺序： 上右下左 定位的本质就是脱离普通文档流： left /top /right /bottom 浏览器读取代码的过程，称为 文档流

Position 值：确定元素位置(static:默认属性值 relative:相对定位 absolute:绝对定位 fixed:固定定位) z-index 设置层级

position: absolute      绝对定位 (脱离文档流，不再占据空间，以浏览器左上角为原点)
position: relative      相对定位 (相对定位，不会脱离文档流，margin为 auto 仍然有效，保留容器原来的位置，以原本位置的的左上角为原点)
position: fixed;        相对于视口 固定定位。脱离文档流(固定定位的元素不会随着滚动条滚动、绝对定位)
position: static;       静态定位, 默认值 元素出现在正常流中(等同于没加)
static：默认值，不脱离文档流，top、right、left 等属性不生效

position: sticky;        粘性定位。基于用户的滚动位置来定位，粘性定位的元素依赖于用户的滚动。
在 relative 和 fixed 定位之间切换。元素定位表现为在跨域特定阈值前为相对定位，之后为固定定位。这个特定的阈值是指 top、right、bottom、left 之一

子绝父相    子容器的原点为绝对定位的父容器的左上角

z-index     决定了定位元素的堆叠顺序 它的值，没有单位，只写数值。谁的值更大，谁就在上面。

display 确定元素的显示类型 (block:块级元素 inline:行内元素 inline-block:行内块元素)
inline-block布局 像文本一样去排列block元素，没有清除浮动等问题，需要处理间隙。(设置父元素的字体大小为 0 ，然后再给子元素设置字体大小。在写法上去掉两个div之间的换行)

块级元素：div、p、ul、ol、li、h1~h6、from、table、dt、dd
行内元素：span、a、label、textarea、input、em、i、b、u、img、lable(表格标签)

隐藏盒子的方式 overflow: hidden;(隐藏盒子超出的部分) opacity: 0;(设置盒子透明度为0) 通过position 把盒子移远

display:none 设置属性后，该元素下所有元素都被隐藏，不占据空间 会引起回流 和 重绘
visibility:hidden 设置该属性后，元素不见，但是依然占据空间位置 visibility 具有继承性，不会影响计数器的计数，会引起重绘 visibility: visible(让盒子重新显示盒子)

overflow:hidden ：取消父子 margin 合并

行高问题 用儿子把父亲撑开(背景图不能撑开盒子)

标准文档流中，竖直方向的margin 不叠加，只取最大值最为margin - 普通文档流： 从上到下，按位置、顺序来决定；一个一个的排列，容器之间的垂直距离由他们的边距计算