节点与标签
- node
- 特殊元素标签
  - li
  - input
从输入url到页面加载完成的过程
BOM
溢出与滚动
浮动
块格式化上下文(BFC)
单位
定位
- 居中
变换
盒子模型
- 外边距重叠
flex布局
- 容器属性
- 项目属性
grid布局
- 项目元素指定网格位置
- grid-templates-area 与 grid-area
层叠与继承
- 选择器及优先级
- 通过计算值控制继承
伪类和伪元素
- 其它伪元素
数据传输
CSS动画
- transition
- animation
  - js 控制 css 动画
CSS渐变
CSS 组织原则理论
CSS预处理器

节点与标签

node

所有的DOM节点都是Node，一共有12种nodeType(详情见红宝书14章)。比较关心的有：

ELEMENT_NODE
TEXT_NODE

一般来说，我们更关心element，而不是每一种node都关心。
节点DOM属性：https://developer.mozilla.org/zh-CN/docs/Web/API/Node
元素特有属性：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement

特殊元素标签

所有标签列表：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

li

具有特殊的伪元素，详见下面部分

input

input的[type](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#%3Cinput%3E_types)的一共23种可能性。如果你去搭建组件库，也必须是从这些当中来。
除此之外的自然可编辑元素包括textarea

从输入url到页面加载完成的过程

首先输入url，先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。
如果没有由dns解析ip地址和端口号，与目标socket建立tcp链接。
tcp链接后将html传回，然后这个tcp断开。html传回后再请求css，js等静态资源
浏览器渲染：客户端（浏览器）解析HTML内容并渲染出来，浏览器接收到数据包后的解析流程为：

构建DOM树：词法分析然后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象
构建CSS规则树：生成CSS规则树（CSS Rule Tree）
构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）
布局（Layout）：计算出每个节点在屏幕中的位置（回流重绘，回流一定触发重绘，反之不一定）
绘制（Painting）：即遍历render树，并使用UI后端层绘制每个节点。
BOM
主要是通过window对象和document对象来操作。
window.scroll/by可以滚动
window.location可以查看URL信息，修改属性或者直接赋值也可起效
window.navigator来检查浏览器客户端信息
溢出与滚动
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content
就拿最简单的垂直滚动举例：
首先，容器必须设置高度，不然会随子元素高度自动设置大小。
然后，overflow属性需要设为auto，这样才会按照预想的情况滚动。
返回顶部就是监听onScroll事件，在滚动时触发，容器的scrollTop属性到一定值，会让返回顶部按钮出现。点击之后设置scrollTop为0即可返回顶部
浮动
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats
当一个元素浮动之后，它会脱标，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
浮动元素如果占据所在块内文本和其它元素的空间内，可以将重叠的空间排开(如果这些元素设置了对于浮动的清除clear: left/right，会强制不与浮动元素重叠)，主要应用目的是将图片排在文字周围。
浮动元素都是块元素，无论display设置什么(flex元素无法浮动)
块格式化上下文(BFC)
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
一个元素的内部空间按照BFC的方式布置。官方文档说的很让人迷惑。
最基本的块级元素并非块格式化上下文。这个东西只要设置少量条件其实很容易触发。
BFC的特性：在宽高不设置的情况下，BFC内部空间默认包含了所有子元素，子元素没有一点区域在BFC的外头
单位
https://zhuanlan.zhihu.com/p/156940153
em是当前字体大小，rem是根元素设定的字体大小。
定位
https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
static静态，不脱标
relative不脱标，可以通过位置调整偏移
absolute相对于最近一个定位不是**static**的元素进行绝对位置定位(子绝父相)，fixed相对于body。
sticky不脱标。会使得元素离对应端视口边界的距离不小于设定距离。
设定的距离是相对于边界外侧的距离
通过top``bottom``left``right调节定位元素的距离，可使用[inset](https://developer.mozilla.org/en-US/docs/Web/CSS/inset)简写四个值(上下、左右、下、左)。
居中
对于文本和行内块节点：textalign，lineheight=blockheight
对于元素节点：如果没有父节点高度值，可以用flex的align-items；若有，可以调margin，position等等都可以
变换
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
只能转换由盒模型定位的元素。
变换可以统一由矩阵(2d or 3d)来描述。不过也有一些常用的变换。参见网站。
常见变换：
translate(x,y)平移
rotate(deg)旋转
scale(xS,yS)缩放
skew(xdeg,ydeg)斜切
盒子模型
border之内的属于节点块内部
box-sizing属性决定设置的宽高是哪一个矩形的宽高，默认content-box是蓝矩形的宽高，更常用的border-box是border黄矩形的宽高。

block	有宽高，另起一行。默认宽度占满父节点剩余空间
inline-block	可以和inline同一行但是无法跨行存在，有宽高padding margin。 - 如果高度设置高了，会撑大一行的高度 - padding margin 垂直方向无效
inline	无宽高属性，可以跨行存在 - padding/margin有效但是起效方式比较奇怪，不推荐使用

外边距重叠

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
文档也没说明白具体的触发条件

flex布局

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
[解决 flex 子元素过长问题](https://juejin.cn/post/6974356682574921765)

容器属性

目前点击的为normal默认值

flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;
flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow： .box { flex-flow: || ; }
justify-content：对其方式，水平主轴对齐方式
align-items：对齐方式，竖直轴线方向
align-content

项目属性
order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大
flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个 item 的 flow-shrink 为 0，则为不缩小
flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖
align-items，默认属性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局
grid布局
[介绍与实战](https://juejin.cn/post/6854573220306255880)``[demo](https://web-platform-e4irtu.stackblitz.io)
display: grid/inline-grid
以下字段是flex布局中的，都可以用。但是不好用的属性会红色标出：
align-content：垂直方向整个内容排布设置，高度空余时使用。
justify-content：水平方向整个内容排布设置，宽度空余时使用。可以用来做
align-items：会打乱item列方向的布局，normal默认为stretch
justify-items：item在格空间的适应方式。normal默认为stretch
place-items``place-content：相应简写属性。一则均有，二则先列后行；如同其它行列简写属性一般。
justify-self``align-self``place-self作用同~-items，但属性在项目上，只作用自己一块。
```
.wrapper {
display: grid;
grid-template-columns: 200px 100px 200px;    /* 定义三列，给出每列宽度 */
grid-template-columns: repeat(3, 200px);    /* 定义三列，都是 200px */
grid-template-columns: repeat(auto-fill, 200px);    /* 空间有空余就填充，都是 200px */
grid-template-columns: 200px 1fr 2fr;    /* 之外的空间按照 fr 权重平分 */
grid-template-columns: 1fr 1fr minmax(300px, 2fr); /* minmax 指定范围，fr 得有参照 */
grid-auto-columns: 50px; /* 对多出来的列单独定义 */
grid-gap: 5px;
/*  声明了两行，行高分别为 50px 50px  */
grid-template-rows: 50px 50px;
}
```
grid-gap: 行间距列间距``grid-row-gap``grid-column-gap
[grid-auto-flow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-auto-flow)： row | column [] || dense
项目元素指定网格位置
grid-column：start end
grid-column-start：左边框所在的垂直网格线
grid-column-end：右边框所在的垂直网格线
grid-row：start end
grid-row-start：上边框所在的水平网格线
grid-row-end：下边框所在的水平网格线
网格线如图所示：

grid-templates-area 与 grid-area
容器写入grid-template-area：
```
grid-template-areas:
  ". header  header"    /* 连续写相同区域标签，可以使其跨多格，但所跨格必须连续且矩形*/
  "sidebar content content";
```
项目写grid-area，会按照属性值插入grid-templates-area的对应位置。
多个同grid-area的项，位置会重叠，设计上相同值标签只对应一个元素和位置。
层叠与继承
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
层叠：选择器优先级同级的情况下，写在css后面的是实际应用的规则（而不是classname等其它东西的后面）
继承：在子节点属性未设置的情况下，一些属性的实际值会是父节点的值。

注：webpack引入css的方式打掉了css的层叠特性。

选择器及优先级

不太熟悉的选择器：

标签属性选择器[prop]
可以选择标签(只能是标签吗？)属性的存在性，直接相等，符合某更仔细条件等
子代选择器>(亲儿子)空格(儿子孙子啥的都可以)
兄弟选择器+(相邻)~(只要同属父节点即可)

多个选择器到达一个style，优先级会进行叠加。
具体分为四个挡，分别是：
!important

行内css
id选择器
类，伪类
元素伪元素
通用选择器(0)

此外，*``+``>等符号不会改变优先级(0)
输入一个选择器，后面直接跟另一个选择器(不加任何分隔符)表示与条件
多个选择器用逗号隔开表示或条件

通过计算值控制继承

https://developer.mozilla.org/zh-CN/docs/Web/CSS/computed_value

处理特殊的值 inherit，initial， unset和 revert(en-US)。

伪类和伪元素
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
伪类是元素状态，以单冒号开头
伪元素是元素选择，以双冒号开头。::before``::after可以指定前后元素。

其它伪元素
::marker是li前面的表头。别的元素需要设置display:list-item才能使用>
只能使用以下css属性：
font属性
color属性
content属性
text-combine-upright，unicode-bidi和direction属性
数据传输
MIME类型
[字典](https://www.w3school.com.cn/media/media_mimeref.asp)
mime类型是两级，第一级主类型和第二级子类型
主类型包括：text``image``audio``video``application
MIME类型字典：https://tool.oschina.net/commons
下面列举几个常用的：
·application
通过脚本复制粘贴

目标：实现剪切、复制、粘贴三种功能。
对不同复制的格式进行合适的处理，比如图片、html，等等
额外注意：
这里关心的是js脚本做复制粘贴。用户复制粘贴不受影响。对于复制粘贴事件的控制，以及对复制粘贴内容的处理，是事件处理这块的内容，这里不叙述。

https://juejin.cn/post/6844903581053616135#heading-4

浏览器提供了两种剪切板的API：

document.execCommand()执行copy``paste命令
Clipboard API，这里使用这个解决方案

浏览器对js使用剪贴板提供了很多限制，具体查看此处(待更新)，需要我们做的：

使用https传输

此外还需注意的问题：

浏览器需要活动窗口
火狐浏览器必须要用户指定才能使用

Selection 和 Range

开发者定义复制粘贴操作时，肯定会对复制的东西进行处理。

键盘操作选区

方向键移动所选文字
shift+方向键：移动并选择
ctrl+方向键：移动分词

原生拖拽

DataTransfer

CSS动画

css动画比js动画高效，https://juejin.cn/post/6999934705957077029
js动画需要requestAnimationFrame

transition

可以在对应的css属性切换时，应用动画效果。
涉及到：属性，时间，曲线，延时

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-right 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
/* Global values */
transition: inherit;
transition: initial;
transition: unset;

animation

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations
通过animation等属性控制应用的动画，时间等
animation-delay
设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
animation-direction
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
animation-duration
设置动画一个周期的时长。
animation-iteration-count
设置动画重复次数，可以指定infinite无限次重复动画
animation-name
指定由@keyframes描述的关键帧名称。
animation-play-state
允许暂停和恢复动画。
animation-timing-function
设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
animation-fill-mode
指定动画执行前后如何为目标元素应用样式。
通过关键帧定义动画的行为。

@keyframes grow {
  0% { font-size: 0; }
  100% { font-size: 40px; }
}

js 控制 css 动画

暂时不知道怎么控制

CSS渐变

待开坑

CSS 组织原则理论

如何组织你的项目的css？
目前整个的css组织方式是非常非常多的，可以参考的一些东西。

老外非常喜欢cssinjs
tailwindcss的css组织方式，及其类似行内css
CSS预处理器
less和sass，两者基本上差不多
https://www.sass.hk/

HTML/CSS

节点与标签

node

特殊元素标签

li

input

从输入url到页面加载完成的过程

BOM

溢出与滚动

浮动

块格式化上下文(BFC)

单位

定位

居中

变换

盒子模型

外边距重叠

flex布局

容器属性

项目属性

grid布局

项目元素指定网格位置

grid-templates-area 与 grid-area

层叠与继承

选择器及优先级

通过计算值控制继承

伪类和伪元素

其它伪元素

数据传输

MIME类型

通过脚本复制粘贴