CSS相关个人笔记(position,float,盒模型,z-index) 一-一一网

Position

关键字： static , absolute , relative , fixed ,sticky

auto自适应。受父级css影响，并自适应。全部占满可用区域

static

top , bottom , left, right, z-index 无效正常的布局方式 (上下文默认的方式)

relative

首先元素停留在原始的默认位置，而后在不改变原始布局的情况下调整位置(top,right…..)，同时保留原始位置,(所以可能会在原始的样式上留白) 对于table-row table-group 等无效

absolute

会被移出正常的文档流，相对于最近的非static的祖先元素进行偏移(没有的话就是body，则相当于初始的ICB(inital container block, 初始包含块)),不会保留原始位置可以设置外边距同时不会与其他位置合并

fixed

移出正常的文档流，不保留位置。相对于页面的视口(viewport)为固定定位.滚动时不变，会创建新的层叠式上下文。
当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

sticky

正常的文档流，相对于最近的可滚动的祖先(nearing-scrolling-ancestor)以及contain-block(块级作用域).偏移值不影响其他元素的位置。
创建新的层叠式上下文，依附于最近的拥有滚动机制的祖先身上。(overflow:hidden,auto,scroll,overlay).即使该祖先不是真实可滚动的
跨越相对的阈值前为相对定位，跨越后为绝对定位

background

I think no content (….)

层叠式上下文

HTML 像是在z轴排列的样式，而层叠式上下文就像是对于HTML的一种三维构想

核心意思就是 index 为同一级别的比较。子元素就像版本号一样向后面叠加

子元素的 z-index都是相当于兄弟元素来说的。不影响父元素

层叠上下文可以包含层叠上下文，，从而共同构成层级
独立于兄弟元素，只考虑子元素
每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。

Root
 z-index 为 2
 z-index 为 4
    z-index 为 1，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.1
    z-index 为 3，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.3
    z-index 为 6，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.6
 z-index 为 5
复制代码

CSS层叠

@keyframes 关键帧不参与层叠，任何时候都取唯一动画，而不是多个@keyframe的混合

CSS 基础盒模型

每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
box-sizing:content-box; 标准盒模型
box-sizing:border-box; 怪异盒模型
标准模式下总宽度=width+margin（左右）+padding（左右）border（左右）；怪异模式下总宽度=width+margin（左右）