-
定位参照对象：
-
最邻近的定位祖先元素（从祖先元素中找到最邻近的定位元素）
-
如果找不到这样的祖先元素，那么就参照视口（viewport）
很多情况下，子元素都会参照父元素进行绝对定位，常用做法是：子绝父相
- 子元素：
position: absolute
- 父元素：
position: relative
-
position:fixed -
固定定位（定位元素，绝对定位元素）
-
脱离标准流
-
可以通过 left、right、top、bottom 调整位置
-
定位参照对象：视口（viewport）
-
对于绝对定位元素来说
-
包含块的宽度 = left + right + margin-left + margin-right + 元素的实际占用宽度
-
包含块的高度 = top + bottom + margin-top + margin-bottom + 元素的实际占用高度
对于定位元素来说，有时候会利用 left、margin-left 联合使用来让一个元素水平居中：
-
left: 自己宽度的一半乘以负一 -
margin-left: 50%
文字
-
color：前景色（文字颜色、边框颜色、文字装饰线颜色，
#fff、#ffffff、rgb(255,255,255)、rgba(255,255,255,.5)） -
text-align，设置元素的内容在元素中的水平位置
-
left：左对齐 -
right：右对齐 -
center：居中 -
text-indent，一般用来设置首行文本的缩进
-
常见用法：
text-indent: 2em -
刚好缩进 2 个文字
-
text-decoration，设置文字装饰线
-
underline：下划线 -
line-through：删除线（比如电商网站的原价） -
none：去除删除线 -
text-overflow，设置隐藏掉的溢出文字内容的表现形式
-
clip：溢出的内容直接裁剪 -
ellipsis：溢出的内容用省略号显示
让一个元素永远只显示一行文字，并且溢出部分显示省略号：
white-space: nowrap; /* 永远只显示一行文字 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 隐藏掉的内容用省略号来表示 */
字体
-
font-family：字体名称，可以设置多个字体名称，它们之间用逗号隔开
-
一般英文字体写在前面，中文字体写在后面
-
font-weight：设置轻重（粗细）
-
100~900
-
bold：700 -
normal：400 -
font-size：设置字体大小
-
font-size: 10px -
font-size: 10% -
使用父元素的 font-size 乘以 10%
-
继承父元素的 font-size 时，继承的是计算值，不是直接继承 10%
-
font-size: 0.5em，使用父元素的 font-size 乘以50% -
width: 2em，使用自己的font-size乘以2 -
line-height
-
line-height: 20px -
line-height: 20%，使用自己的 font-size 乘以 20% -
line-height: 2em，使用自己的 font-size 乘以 2 -
line-height: 2，使用自己的 font-size 乘以 2 -
如果希望一行文字垂直居中，常见做法是：
设置 line-height 和 height 保持一致
-
font-style
-
normal：正常 -
italic：斜体 -
oblique：倾斜 -
font
-
简写属性
-
格式：
font-size/line-height font-family
背景
-
background-color：背景色
-
background-image：背景图片
-
background-repeat
-
repeat -
repeat-x -
repeat-y -
no-repeat -
background-position
-
background-position: 10px 20px -
background-position: right top; -
background-position: center top; -
background-size：设置背景图片的大小
-
background
-
简写属性
-
格式：
background: url("1.png") no-repeat left top/20px 20px #f00;
CSS Sprite：精灵图片、雪碧图片
动画
由于动画部分没有详细学习过，因此暂且略过
-
transition
-
用于决定哪些CSS属性需要参与动画
-
transition: all 2s;
-
所有可动画CSS属性的修改，都会在2s的时间内通过动画完成
-
transform
-
平移
-
translateX(10px)
-
translateY(30px)
-
translate(10px, 30px)
-
缩放
-
scaleX(0.5)
-
scaleY(0.5)
-
scale(0.5)
-
旋转
-
rotate(45deg)：二维平面旋转
-
rotateX(45deg)：绕着x轴旋转
-
rotateZ(45deg)：绕着Z轴旋转（跟rotate()类似）
-
rotateY(45deg)：绕着Y轴旋转
-
transform: translate(20px, 30px) scale(0.5) rotate(45deg);
-
animation
-
使用步骤
-
创建动画
@keyframes my-anim1 {
from {
}
to {
}
}
@keyframes my-anim2 {
0% {
}
20% {
小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
前端框架
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。
以 Vue 为例，我整理了如下的面试题。
**
[外链图片转存中…(img-TO4lKztl-1710596920823)]
前端框架
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。
以 Vue 为例，我整理了如下的面试题。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
