CSS基础知识

层叠上下文

在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的x轴，y轴以及表示层叠的z轴。层叠上下文即元素在某个层级上z轴方向的排列关系。

那么这里有几个重要的概念：层叠上下文 (堆叠上下文, Stacking Context)、层叠等级 (层叠水平, Stacking Level)、层叠顺序 (层叠次序, 堆叠顺序, Stacking Order)、z-index。

层叠上下文(Stacking Context)

简单来说就是文档的元素的一层叠一层的，那谁是显示在最上面的元素呢？

z-index的默认值是auto

形成层叠上下文的方法有：
- 根元素 <html></html>
- position值为 absolute | relative | fixed | sticky，且 z-index值不为 auto
- z-index 值不为 auto 的flex元素，即：父元素 display:flex|inline-flex
- opacity 属性值小于 1 的元素
- transform 属性值不为 none的元素
- mix-blend-mode 属性值不为 normal 的元素
- filter、 perspective、 clip-path、 mask、 mask-image、 mask-border、 motion-path 值不为none 的元素
- perspective 值不为 none 的元素
- isolation 属性被设置为 isolate 的元素
- will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值

层叠等级(Stacking Level)

层叠等级决定了在同一个层叠上下文Z轴的位置

普通元素的层叠优先与在层叠上下文的元素
层叠等级的比较只有在同一个层叠上下文元素中才有意义
层叠等级是描述该元素在Z轴上的位置

注意：层叠等级并不一定由z-index决定，只有定位的元素的层叠等级才z-index来决定，其他类型元素的层叠等级由层叠顺序、他们在HTML中出现的顺序、他们的父级以上元素的层叠等级一同决定

z-index

z-index只适用于定位的元素

元素的 z-index 值只在同一个层叠上下文中有意义。如果父级层叠上下文的层叠等级低于另一个层叠上下文的，那么它 z-index 设的再高也没用。所以如果你遇到 z-index 值设了很大，但是不起作用的话，就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。

层叠顺序(Stacking Order)

这里其实是涉及了所谓的层叠水平（stacking level)，有一张图可以很好的诠释：

形成堆叠上下文环境的元素的背景与边框
拥有负 z-index 的子堆叠上下文元素（负的越高越堆叠层级越低）
正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
无 position 定位（static除外）的 float 浮动元素
正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
拥有 z-index:0 的子堆叠上下文元素
拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

BFC/IFC

每个渲染区域用formatting context表示，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

在正常流中的盒子要么属于块级格式化上下文（Block Formatting Context），要么属于内联格式化上下文（Inline Formatting Context）

？BFC === 脱离标准流

？产生BFC的盒子会把后面把正常流的盒子盖住

BFC的特性

内部的盒子会在垂直方向，一个个的放置
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠
每一个元素的左边，与包括的盒子的左边相接触，即使存在浮动也是如此
BFC的区域不会与float重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此
计算那BFC的高度时，浮动元素也参与计算

那些元素会产生BFC

根元素
float的属性不为none
position为absolute或fixed
display为inline-block，table-cell，table-caption，flex，flow-root
overflow不为visible

BFC两个功能

清楚浮动
自适应两栏布局
防止垂直margin合并

IFC(Inline Formatting Context)

IFC：内联格式化上下文

在页面中，font-size规定的不是字体的高度或宽度，而是这个字体的模板高度

在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。

让元素水平且垂直居中的几种方式

适用于父元素是body

上下左右都为0

Code

.box {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

减去自身50%的宽高

Code

.box {
	position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}

适用于父元素是指定盒子的

CSS3的transform方法

Code

.box {
	margin-left: 50%;
    margin-top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

flex属性

Code

.box {
	display: flex;
    justify-content: center;
    align-items: center;
}

grid

Code

.box {
	display: grid;
    justify-items: center;
    align-items: center;
}

CSS 基础知识

单位

px：像素
em：默认字体大小的倍数（比如浏览器的默认字体大小是16px，则1em === 16px）
rem：根元素（HTML标签）字体大小倍数，IE8以下不支持

权重

这里从小到大排序了权重：

类型
标签选择器
class选择器
id选择器
行内样式
!important

如果权重一样的话，最写的里标签最近则就运用谁的

html

div p {
	color: red;
}
div span {
	color: green
}

<div>
    <p>
        <span>Hello</span>			// green
    </p>
</div>

!important 是一个特殊的权重，不管再权重比较中处于什么地位。只要再属性后面加上，那么这条属性的权重就是最高的。行内样式都修改不了

继承

inherit继承

Code

.item {
  width: inherit;
  height: inherit;
  position: absolute;
}

定位

position: static 默认值 默认的布局方式。
position: relative 相对默认的布局位置进行定位。
position: absolute 绝对定位元素脱离正常文档流，相对其定位上下文（Positioning Context）进行定位。
position: fixed 相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。
position: sticky 是相对定位和固定定位的结合。默认情况下表现为相对定位，当浏览器窗口顶端与元素的距离等于 top 属性的值时，转变为固定定位。

CSS3

伪类

a链接

属性	描述
a:link	未访问的链接
a:visited	已访问的链接
a:hover	鼠标移动到链接上
a:active	选定的链接

:child

属性	描述
:first-child	选中此元素父元素下的第一个元素
:last-child	选中此元素父元素下的最后一个元素
:nth-child(n)	选中此元素父元素下的第n个元素

:targe

:not

伪元素

属性	描述	css版本
::first-letter	向文本的第一个字母添加特殊样式	1
::first-line	向文本的首行添加特殊样式	1
::before	在元素之前添加内容	2
::after	在元素之后添加内容	2
::selection	文档中被用户高亮的部分（比如鼠标选中部分）	3
::first-letter	选中一整块文字的第一个字母	3
::first-line	样式应用首行	3

渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

CSS3定义了两种类型的渐变（gradients）

线性渐变（Linear Gradients） - 向上/下/左/右/对象方向
径向渐变（Radial Gradients） - 由他们中心定义

线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

语法

css

1	background-image: linear-gradient([ direction, ] color-stop1, color-stop2, ...)

径向渐变

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法

css

1	background-image: radial-gradient(shape size at position, start-color, ... , last-color)

自定义滚动条

这个是CSS3的属性，很少用到

css

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 8px; /*滚动条宽度*/
    height: 1px; /*!*滚动条高度*!*/
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px; /*!*滚动条的背景区域的圆角*!*/
    background-color: red; /*!*滚动条的背景颜色*!*/
}

/*定义滑块 内阴影 + 圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 99px; /*滚动条的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: green; /*!*滚动条的背景颜色*!*/
}

阴影

水平/垂直偏移值都可以为负数

text-shadow

text-shadow:水平偏移垂直偏移模糊值 color

box-shadow

语法：box-shadow:水平偏移垂直偏移 [模糊值] [外延值] color [inset]

inset：内阴影

背景

background-size：背景图片大小

语法：background-size: <bg-size>,[bg-size]

参数：

length：用长度指定大小
percentage：用百分比指定大小
auto：真实大小
cover：以最大边渲染，会超出容器
contain：以最小边渲染，不会超出容器

background-origin：背景图片显示点

语法：background-origin: <box>,[box]

参数：

padding-box：从padding区域（含padding）开始显示背景图像
border-box：从border区域（含border）开始显示背景图片
content-box：从content区域开始显示背景图片

边框

border-radius：边框圆角

border-image：边框图片

变形

transform：变形

语法：transform: none | <transform-function>+

参数：

translate()：平移
rotate()：旋转
scale()：缩放
skew()：斜面扭曲

transform-origin：变形原点

动画

transition：过度

语法：transition: <single-transition>[, <single-transition>]

参数:

transition-property：参与过度的属性
transition-duration：持续时间
transition-timing-function：动画类型
transition-delay：延时过度时间

keyframes：帧动画

语法：@keyframes <identifier> { <keyframes-blocks> }

参数：

identifier：动画名称
keyframes-block：定义动画每个阶段的样式，即帧动画

语法：animation: <single-animation [, <single-animation>]>

参数：

animation-name：动画名称
animation-duration：持续时间
animation-timing-function：过渡类型
animation-delay：延时时间
animation-iteration-count：循环次数
animation-direction：是否方向运动

实例：

css

.box {
   animation: name;
}

@keyframes name {
	from { opacity: 1 }
	to { opacity: 0 }
}

媒体查询

css

1
2
3

@meida screen and (max-width:480px){
	// 当屏幕最小宽度为480px时触发
}

图标与SVG

瀑布流

随机生成图片的网址：https://picsum.photos/

CSS自定义属性

自定义属性：使用--*（*代表任意声明的名称）声明的特殊格式作为名称，该名称被称为自定义属性，同时可以给自定义属性赋予任何值。比如--color: #fff。

变量：CSS的var()函数引用的自定义属性被称为变量。var()会返回自定义属性所对应的值，同时可以被运用于相应的CSS属性。对应的即是CSS规则中的属性值。

语法：

定义：--属性名：值
调用：var(--属性名[,回退值])
- 回退值在自定义属性未生效时，会采用，保证都会有一个值

注意：

如果想使用自定义属性，那么自定义属性必须定义在他的父元素上，一般可以定义在*里面

例子：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        * {--theme-color: skyblue;}
        div {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            background: red;  
        }
        .list {    
            background: var(--theme-color);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="list"></div>
</body>
</html>