CSS 笔记

迷你二鹏
217 阅读11分钟

一、浏览器

世界五大浏览器

  •  Google Chrome：Webkit(前期)、Blink(后期)
  •  Apple Safari：Webkit
  •  Mozilla Firefox：Gecko
  •  ASA Opera：Presto(前期)、Blink(后期)
  •  Microsoft IExplorer：Trident<p align=center>

  •  Microsoft Edge：Trident(前期)、Blink(后期)

内核介绍

  • Blink内核：由谷歌公司与欧朋公司合作自研的内核，同时谷歌公司也将其作为开源内核架构Chromium的一部分发布出来，在Chrome 28+与Opear 15+中被使用
  •  Webkit内核：由苹果公司自研的内核，同时也是Blink内核的原型，在Chrome 1~28与Safari 1+中被使用
  •  Gecko内核：由网景公司自研的内核，前期在Navigator中使用，后期推广到Firefox中，在Firefox 1+中被使用
  •  Presto内核：由欧朋公司自研的内核，其渲染性能达到极致但牺牲了兼容性，目前已废弃，在Opear 7~14中被使用
  •  Trident内核：由微软公司自研的内核，因为其被包括在全世界使用率最高的Windows系统中，导致一直称霸渲染引擎界十多年，在IExplorer 4+中被使用

渲染过程

  •  解析文件

    • DOM树：将html文件转换为DOM树
    • CSSOM树：将css文件转换为CSSOM树
    • 渲染树：将DOM树与CSSOM树合并生成渲染树

  •  绘制图层

    • 回流：根据渲染树生成布局渲染树
    • 重绘：根据布局渲染树生成绘制渲染树

  •  合成图层：根据绘制渲染树合成图层显示在屏幕中

兼容性

可查询W3C标准在各种浏览器中兼容性的网站Caniuse

CSS Hack（了解即可）


<head>
	<!--[if IE]>
	<style>
	.elem {
		background-color: #f66;
	}
	</style>
	<![endif]-->
</head>

.elem {
	background-color: #f66; /* IExplorer 8+ */
	*background-color: #f66; /* IExplorer 7 */
	_background-color: #f66; /* IExplorer 6 */
}

二、回流重绘

回流必定引发重绘，重绘不一定引发回流

如何减少和避免回流重绘

  • 使用visibility:hidden替换display:none
  • transform代替top
  • 避免使用Table布局
  • 避免规则层级过多
  • 避免节点属性值放在循环中当成循环变量
  • 动态改变类而不改变样式
  • 将频繁回流重绘的节点设置为图层 will-change
  • 使用requestAnimationFrame作为动画帧

属性书写顺序

  1. 布局属性（显示、溢出、浮动、定位、列表、表格、弹性、多列、栅格）
  2. 尺寸属性（模型、边距、填充、边框、圆角、框图、大小）
  3. 界面属性（外观、轮廓、背景、遮罩、滤镜、裁剪、事件）
  4. 文字属性（模式、文本、字体、内容）
  5. 交互属性（模式、变换、过渡、动画）

三、盒模型

类型

 content-box：标准盒模型(默认)

标准盒模型是W3C标准，由margin + border + padding + content组成。与上述公式一样，节点的width/height只包括content，不包括padding/border。

 border-box：怪异盒模型

怪异盒模型又称IE盒子模型，是IExplore标准，由margin + content组成。与上述公式不一，节点的width/height包括border、padding和content。

视觉格式化模型

  • 块级元素
  • 行内元素

格式化上下文

上下文缩写版本声明
块格式化上下文BFC2块级盒子容器
行内格式化上下文IFC2行内盒子容器
弹性格式化上下文FFC3弹性盒子容器
格栅格式化上下文GFC3格栅盒子容器

文档流

层叠上下文

四、样式计算

优先级别

特性
  • 就近原则：后出现的样式其优先级别比先出现的样式更高
  • 继承样式：优先级别最低
  • !important样式：优先级别最高，若冲突则重新计算
  • 引入权重：内联样式 > 内嵌样式 > 外部样式 > 导入样式
权重
  •  10000：!important
  •  1000：内联样式
  •  100：ID选择器
  •  10：类选择器、伪类选择器、属性选择器
  •  1：标签选择器、伪元素选择器
  •  0：通配选择器、兄弟选择器、后代选择器

优先级别相同的规则使用最后出现的规则

优先级别无视节点在DOM树中的距离

不同规则作用于相同节点使用优先级别最高的规则

:not()不参与优先级别的计算

长度单位

em/rem区别

em相对父节点，rem相对根节点

五、布局方式

清除浮动

.clearfix::after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	font-size: 0;
	content: "";
}

全屏布局

  • position + left/right/top/bottom
  • flex

两列布局

  • float + margin-left/right
  • overflow + float
  • flex

三列布局

  • overflow + float
  • flex
  • 圣杯布局：float + margin-left/right + padding-left/right
  • 双飞翼布局：float + margin-left/right
  • 圣杯布局/双飞翼布局：flex

均分布局

  • float + width
  • column
  • flex

居中布局

水平居中

  • margin:0 auto + width:fit-content：应用于全部元素

  • 块级元素 + margin:0 auto + width：应用于块级元素

    • 若节点不是块级元素需声明display:block
    • 若节点宽度已隐式声明则无需显式声明width

  • 行内元素 + text-aligin:center：应用于行内元素

    • 父节点声明text-align
    • 若节点不是行内元素需声明display:inline/inline-block

  • position + left/right + margin-left/right + width：应用于全部元素

  • position + left/right + transform:translateX(-50%) ：应用于全部元素

  • display:flex + justify-content:center：应用于全部元素的子节点

垂直居中

  • 块级元素 + padding-top/bottom：应用于块级元素

    • 父节点高度未声明或自适应
    • 若节点不是块级元素需声明display:block

  • 行内元素 + line-height：应用于行内元素

    • 父节点声明line-height
    • 若节点不是行内元素需声明display:inline/inline-block

  • display:table + display:table-cell + vertical-align:middle：应用于全部元素

    • 父节点声明display:table
    • 子节点声明display:table-cell与vertical-align:middle

  • display:table-cell + vertical-align:middle：应用于全部元素的子节点

  • position + top/bottom + margin-top/bottom + height：应用于全部元素

  • position + top/bottom + transform:translateY(-50%) ：应用于全部元素

  • display:flex + align-items:center：应用于全部元素的子节点

  • display:flex + margin:auto 0：应用于全部元素

    • 父节点中声明display:flex
    • 子节点声明margin:auto 0

水平垂直居中

  • display:inline-block vertical-align: middle
  • display:table-cell vertical-align: middle;
  • position
  • flex

文字布局

文本环绕
  • float
文字溢出
  • 单行文字溢出：overflow + text-overflow
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
  • 多行文字溢出：flex + overflow + text-overflow 只能在Webkit内核中使用，局限性太大了
display: -webkit-box; 
overflow: hidden; 
text-overflow: ellipsis; 
word-break: break-all; 
-webkit-box-orient: vertical; 
-webkit-line-clamp: 3;



		overflow: hidden;
		position: relative;
		max-height: 90px;
		&::after {
			position: absolute;
			right: 0;
			bottom: 0;
			padding-left: 40px;
			background: linear-gradient(to right, transparent, #fff 50%);
			content: "...";
		}

虽然该方式兼容性较好，但单行文字也会出现省略号，只能结合JS额外处理了

六、函数计算

1.颜色函数

  •  rgb() ：RGB色彩模式
  •  rgba() ：RGBA色彩模式
  •  hsl() ：HSL色彩模式
  •  hsla() ：HSLA色彩模式
  •  hwb() ：HWB色彩模式
  •  lch() ：LCH色彩模式
  •  lab() ：LAB色彩模式
  •  color() ：颜色空间
RGB色彩模式

R表示红色，G表示绿色，B表示蓝色，A表示透明度。

HSL色彩模式

H表示色相，S表示饱和度，L表示亮度，A表示透明度。

HWB色彩模式

H表示色相，H表示白度，B表示亮黑度。

LCH色彩模式

L: 明度(Lightness)，0%～100%
C: 彩度(Chroma)，0~ ∞
H: ⾊相(Hue)，0~360（隐藏单位是角度单位deg）

LAB色彩模式

L: 明度(Lightness)，0%～100%
A: 颜⾊通道，从深绿⾊（低亮度）到灰⾊（中亮度）再到亮粉红⾊（⾼亮度），是Lab颜色空间中沿a轴的距离。
B: 颜⾊通道，从亮蓝⾊（低亮度）到灰⾊（中亮度）再到⻩⾊（⾼亮度），Lab颜色空间中沿b轴的距离。

2.属性函数

  • attr() ：属性
  • var() ：变量
attr()

attr(val)用于返回节点属性，通常结合伪元素的content使用

3.数学函数

  •  clamp(min, val, max) ：区间范围值
  •  counter() ：计数器
  •  counters() ：嵌套计数器
  •  calc() ：计算
  •  max() ：最大值
  •  min() ：最小值

4.图形函数

  •  circle() ：圆形
  •  ellipse() ：椭圆形
  •  inset() ：矩形
  •  path() ：路径
  •  polygon() ：多边行

5.背景函数

  •  url() ：图像路径
  •  element() ：图像映射，渲染指定元素为图像
  •  image-set() ：图像集合，根据屏幕分辨率匹配图像
  •  linear-gradient() ：线性渐变
  •  radial-gradient() ：径向渐变
  •  conic-gradient() ：锥形渐变
  •  repeating-linear-gradient() ：重复线性渐变
  •  repeating-radial-gradient() ：重复径向渐变
  •  repeating-conic-gradient() ：重复锥形渐变

6.滤镜函数

  •  blur() ：模糊
  •  brightness() ：亮度
  •  contrast() ：对比度
  •  drop-shadow() ：阴影
  •  grayscale() ：灰度
  •  hue-rotate() ：色相旋转
  •  invert() ：反相
  •  opacity() ：透明度
  •  saturate() ：饱和度
  •  sepia() ：褐色

7.变换函数

  •  matrix() ：矩阵
  •  matrix3d() ：3D矩阵
  •  perspective() ：视距
  •  rotate() ：旋转
  •  rotate3d() ：3D旋转
  •  rotateX() ：X轴旋转
  •  rotateY() ：Y轴旋转
  •  rotateZ() ：Z轴旋转
  •  scale() ：缩放
  •  scale3d() ：3D缩放
  •  scaleX() ：X轴缩放
  •  scaleY() ：Y轴缩放
  •  scaleZ() ：Z轴缩放
  •  skew() ：扭曲
  •  skewX() ：X轴扭曲
  •  skewY() ：Y轴扭曲
  •  translate() ：位移
  •  translate3d() ：3D位移
  •  translateX() ：X轴位移
  •  translateY() ：Y轴位移
  •  translateZ() ：Z轴位移

8.缓动函数

  •  cubic-bezier() ：贝塞尔曲线
  •  steps() ：逐帧

七、变量计算

场景

条形加载条

image.png


<ul class="strip-loading">
	<li style="--line-index: 1;"></li>
	<li style="--line-index: 2;"></li>
	<li style="--line-index: 3;"></li>
	<li style="--line-index: 4;"></li>
	<li style="--line-index: 5;"></li>
	<li style="--line-index: 6;"></li>
</ul>

不优雅示例：

&:nth-child(2) { animation-delay: 200ms; } 
&:nth-child(3) { animation-delay: 400ms; } 
&:nth-child(4) { animation-delay: 600ms; } 
&:nth-child(5) { animation-delay: 800ms; } 
&:nth-child(6) { animation-delay: 1s; }

优雅：

.strip-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 200px;
	li {
		--time: calc((var(--line-index) - 1) * 200ms);
		border-radius: 3px;
		width: 6px;
		height: 30px;
		background-color: #f66;
		animation: beat 1.5s ease-in-out var(--time) infinite;
		& + li {
			margin-left: 5px;
		}
	}
}
@keyframes beat {
	0%,
	100% {
		transform: scaleY(1);
	}
	50% {
		transform: scaleY(.5);
	}
}
心形加载条

image.png

标签导航

悬浮跟踪按钮

八、函数计算

1.基础选择器

选择器别名说明版本
tag标签选择器指定类型的标签1
#idID选择器指定身份的标签1
.class类选择器指定类名的标签1
*通配选择器所有类型的标签2

2.层次选择器

选择器别名说明版本
elemP elemC后代选择器元素的后代元素1
elemP>elemC子代选择器元素的子代元素2
elem1+elem2相邻同胞选择器元素相邻的同胞元素2
elem1~elem2通用同胞选择器元素后面的同胞元素3

3.条件选择器

选择器说明版本
:lang指定标记语言的元素2
:dir()指定编写方向的元素4
:has包括指定元素的元素4
:is指定条件的元素4
:not非指定条件的元素4
:where指定条件的元素4
:scope指定元素作为参考点4
:any-link所有包括href的链接元素4
:local-link所有包括href且属于绝对地址的链接元素4

4.状态选择器

选择器说明版本
:active鼠标激活的元素1
:hover鼠标悬浮的元素1
:link未访问的链接元素1
:visited已访问的链接元素1
:target当前锚点的元素3
:focus输入聚焦的表单元素2
:required输入必填的表单元素3
:valid输入合法的表单元素3
:invalid输入非法的表单元素3
:in-range输入范围内的表单元素3
:out-of-range输入范围外的表单元素3
:checked选项选中的表单元素3
:optional选项可选的表单元素3
:enabled事件启用的表单元素3
:disabled事件禁用的表单元素3
:read-only只读的表单元素3
:read-write可读可写的表单元素3
:target-within内部锚点元素处于激活状态的元素4
:focus-within内部表单元素处于聚焦状态的元素4
:focus-visible输入聚焦的表单元素4
:blank输入为空的表单元素4
:user-invalid输入合法的表单元素4
:indeterminate选项未定的表单元素4
:placeholder-shown占位显示的表单元素4
:current()浏览中的元素4
:past()已浏览的元素4
:future()未浏览的元素4
:playing开始播放的媒体元素4
:paused暂停播放的媒体元素4

4.结构选择器

选择器说明版本
:root文档的根元素3
:empty无子元素的元素3
:nth-child(n)元素中指定顺序索引的元素3
:nth-last-child(n)元素中指定逆序索引的元素3
:first-child元素中为首的元素2
:last-child元素中为尾的元素3
:only-child父元素仅有该元素的元素3
:nth-of-type(n)标签中指定顺序索引的标签3
:nth-last-of-type(n)标签中指定逆序索引的标签3
:first-of-type标签中为首的标签3
:last-of-type标签中为尾的标签3
:only-of-type父元素仅有该标签的标签3

5.属性选择器

选择器说明版本
[attr]指定属性的元素2
[attr=val]属性等于指定值的元素2
[attr*=val]属性包括指定值的元素3
[attr^=val]属性以指定值开头的元素3
[attr$=val]属性以指定值结尾的元素3
[attr~=val]属性包括指定值(完整单词)的元素(不推荐使用)2
`[attr=val]`属性以指定值(完整单词)开头的元素(不推荐使用)2

6.伪元素

选择器说明版本
::before在元素前加入的内容2
::after在元素后加入的内容2
::first-letter元素的首字母1
::first-line元素的首行1
::selection鼠标选中的元素3
::backdrop全屏模式的元素4
::placeholder表单元素的占位4
avatar
文章
阅读
粉丝