HTML 与 CSS 总结，循序渐进-CSDN博客

本文链接：https://blog.csdn.net/m0_61041374/article/details/136893639

本文详细介绍了CSS中的定位技术、色彩样式设置、文本对齐、字体排布、背景处理以及基础动画，旨在帮助前端开发者理解和应用这些核心概念。同时还提及了如何通过系统学习资源提升前端技能，包括面试题和学习资料分享。

摘要由CSDN通过智能技术生成

可以通过 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% {

}

60% {

}

100% {

}

使用动画

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。