知识点
W3C标准：
结构：html用于描述页面的结构
表现：css用于控制页面中的元素的样式
行为：js用于响应用户操作
注释：
<!---->
注释不能嵌套
标签的属性：
在标签中可以设置属性，属性之间用空格隔开，如：
<font color="blue" size='1'>文字</font>
HTML5的文档声明：
'<!doctype html'>
字符集charset：
编码和解码所采用的规则称为字符集
<meta charset="utf-8">
实体：
html页面中特殊符号
``©
table表格：
-
thead表头部分 -
tbody表格主体部分（html布局中不写浏览器渲染会默认添加） -
tfoot表尾部分 -
td单元格 -
tr表示行 -
colspan属性横向合并单元格 -
rowspan属性纵向合并单元格 -
border-spacing设置边框之间的距离 -
border-collaspe设置边框分开还是合并
values：collapse（合并），separate（分开）
form表单：
表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息
-
action属性处理表单提交的URL地址 -
method属性get方法，post方法 -
target属性提交表单后在哪里显示信息
CSS：
Cascade Style Sheet 层叠样式表
并集选择器：
#name1.name2.name3：表示#name1下的类name2下的类name3的标签
div.name2.name3：表示div下的.name2下的.name3的标签
div,.name1,#name3：表示div，.name1，#name3所包含的所有标签
div,span,p：表示选中div、span、p包含的所有标签
关系选择器：
子元素选择：tag1（父） > tag2（子），选中tag1下的tag2标签
后代元素选择：tag1 space tag2，选中tag1下的所有tag2标签
兄弟元素选择器：
tag1 + tag2，选中tag1的下一个标签tag2
tag1 ~ tag2：选中tag1下面的所有tag2
属性选择器：
[attr],选择含有attr属性的标签
[attr = "value"]，选择含有attr属性且属性值为value的标签
[attr ^= "value"]，选择含有attr属性且属性值开头为value的标签
[attr $= "value"]，选择含有attr属性且属性值结尾为value的标签
[attr *= "value"]，选择含有attr属性且属性值包含value的标签
伪类：
伪类用来描述一个元素的特殊状态，如第一个子元素，被点击的元素，鼠标移入的元素。
伪类选择器：
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 第n个子元素
同类型中的伪类选择：
:first-of-type
:last-of-type
:nth-of-type()
:not() 排除当前伪类选中的标签
伪元素：
页面中一些特殊的并不存在的元素（特殊位置），::
::first-letter 第一个字母
::first-line 第一行
::selection 选中的内容
::before 元素的最开始（结合content属性使用）
::after 元素的最后（结合content属性使用）
样式的继承
选择器的权重（优先级）：
!important：优先级最高
内联样式：1，0，0，0
id选择器：0，1，0，0
类和伪类选择器：0，0，1，0
元素选择器：0，0，0，1
通配符选择器：0，0，0，0
继承的样式：没有优先级
比较优先级，相加所有的选择器权重进行比较，优先级高者先显示。选择器的累加值权重不会超过最大的数量级，即类选择器相加再多不会超过id选择器。
权重相同，取靠后的选择器样式显示。
长度单位：
px：不同的屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰。
%：百分比，可设置为相对于父元素的百分比，互相影响。
em：
相对于元素的字体大小来计算的
1em = 1 font-size
em会根据字体大小的改变而改变
rem：root，相对于根元素（html）的字体大小计算
颜色单位：
RGB：red，green，blue，RGB(0-255,0-255,0-255)
RGBA：A，不透明度，取值0-1，RGBA(0,0,0,0)
十六进制RGB：#rgb，范围00-ff
HSL和HSLA：
H 色相 0-360
S 饱和度 0%-100%
L 亮度 0%-100%
A 透明度 0-1
文档流 normal flow
脱离文档流的特点：
块状元素：
-
块元素不再独占页面的一行
-
块元素的宽高默认都被内容撑开
行内元素：转变为块元素，具备块元素特点
脱离文档流不需要区分块和行内。
盒子模型box model：
内容区content
内边距padding
边框border
外边距margin
overflow溢出属性：
visible、hidden、scroll、auto
overflow-x
overflow-y
display属性：
inline、block、inline-block、table、none（隐藏）
visibility属性：
visible、hidden（隐藏，保留位置）
重置样式表：
特殊：*{margin:0;padding:0}
专门用来对浏览器的样式进行重置.
reset.css 直接去除了浏览器的默认样式
normalize.css 对默认样式进行了统一
Box-sizing属性：
调整盒子width和height的计算方式的属性。
values：
content-box：default，宽高只包括内容本身
border-box：宽高包括border、margin、padding等
outline和border属性：
outline：用法和border一样，本属性不会占领空间而影响可见框的大小
border：本属性会占领空间而影响可见框的大小
box-shadow属性：
设置元素的阴影效果，阴影不会影响页面布局。
box-shadow:0px 0px 50px rgb(255,0,3)
值1，水平偏移量
值2，垂直偏移量
值3，阴影模糊半径
值4，阴影颜色
浮动Float：
values：none、left、right
浮动元素不会盖住文字，而是环绕文字（开启浮动会脱离文档流）。
高度塌陷和BFC：
高度塌陷：浮动布局中，父元素默认是被子元素撑开，子元素浮动后脱离文档流而无法支撑父元素的高度，导致父元素高度丢失，进而其下元素自动上移导致页面布局混乱。
BFC（block formatting context）：区块格式化上下文，是css中的一个隐含的属性，开启BFC的元素会变成一个独立的布局区域。
特点：
-
开启的元素不会被浮动元素所覆盖
-
开启的元素子元素和父元素margin不重叠
-
开启的元素可以包含浮动的子元素
高度塌陷解决方式：
-
设置元素浮动，设置为行内块元素。（都不推荐，副作用明显）
-
设置
overflow属性的不为visible值，如：hidden。 -
设置
clear属性：
添加clear属性可以清除浮动元素对当前元素的影响。
values：left、right、both（影响较大者）等。
原理：添加该属性，浏览器自动添加一个外边距使得其位置不受其他元素的影响。margin值隐藏。 -
最终解决方案：
clear+::after
利用伪元素 ::after 的特性在元素的最后添加 clear 的both属性和display的block属性。
margin外边距重叠：
垂直方向相邻的元素（当它们都具有外边距时）外边距会重叠。
解决原理：只要不相邻就不会重叠。
解决方法：
在父元素的开始添加一个不可见的块元素
.box1::before{
content:"";
display:table;
}
高度塌陷和外边距重叠的解决方案:
.clearfix::before,
.clearfix::after{
content:"";
display:table;
clear:both
}
Position属性：
用于指定一个元素在文档中的位定位方式。
Values：
static：默认值，元素静止，未开启定位
relative：开启相对定位
特点：
元素会相当于原来的位置偏移
相对定位会提升元素的层级
不会使元素脱离文档流
不会改变元素的性质（块、行内）
absolute：开启绝对定位
特点：
开启绝对定位后，不设置偏移量则元素的位置不会发生变化。
开启绝对定位后，元素会从文档流中脱离。
会改变元素的性质，行内变块，块的宽高被内容撑开。
会提升元素的层级。
绝对定位元素是相对于其包含快进行定位的。
包含块：
离当前元素最近的祖先块元素。
绝对定位的包含快：
离当前元素最近的开启了定位的祖先元素。
所有祖先元素都未开启定位，则根元素为它的包含块。
fixed:固定定位
固定定位是绝对定位的一种，大部分特点与绝对定位一致。
特点：
固定定位参照物永远是参照视口（浏览器可视窗口）进行定位。
固定定位的元素不会随网页的滚动条而滚动（如：回到顶部按钮）
sticky：开启粘滞定位
粘滞定位是相对定位的一种，和相对定位relative特点基本一致。（兼容性差）
不同点：粘滞定位可以在元素到达某个位置时将其固定。
偏移量Offset：
开启定位后由偏移量控制元素的位置。
Values：top，bottom、left、right
z-index层级：
对于开启了定位的元素，可以通过z-index属性来指定元素的层级。
Values：
-
auto
-
integer整数：整数的值越大，层级越高，越优先显示。
如果元素的层级一样，优先显示靠下的元素。
祖先元素的层级数高低不会影响（盖住）后代元素。
字体：
Values：
color
font-size
font-family：
字体族（字体的格式），可设置多个指定字体类别，浏览器会自动从前往后识别选用。
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
@font-face：
调用服务器中设置的字体。（注意字体加载速度、版权、字体格式兼容问题）
font-family 自定义需调用的字体的名字
local 本地字体资源
src（url） 服务器字体资源format 说明字体格式
FontAwesome（图标字体库）：
引入图标字体库中关键文件夹：css+webfonts
调用方式：
-
先引用all.css文件，设置class类名
fab+调用的图标类名或fas+调用的图标类名 -
通过设置类名fas、fab，再调用实体使用，格式：
&#x+图标编码
如<span class="fas"></span> -
在伪元素中通过调用字体簇设置图标字体：
.list li::before{
/* 设置字体图标编码，注意添加反斜杠\ */
content: "\f6be";
/* 设置字体族，fab和fas对应不同的字体族 */
font-family: 'Font Awesome 6 Free';
/* font-family: 'Font Awesome 6 Brands'; */
/* 设置字体粗细程度 */
font-weight: 900;
}
行高（line-height）：
行高是文字占有的实际高度。
行高可以指定大小，也可以设置整数。（设置整数则是font-size的倍数大小）
常用来设置文字行间距：行高-字体大小=行间距
字体框：
字体框就是字体存在的格子，设置font-size实际上在设置字体框的高度。
行高会在字体框的上下平均分配。
文字对齐方式：
水平：text-align（center居中、left、right、justify两端对齐）
垂直：vertical-align（baseline基线对齐、sub、middle、top、bottom）
文本的样式：
文本修饰：text-decoration（none、underline、line-through、overline）
文本空白处理：white-space（normal、nowrap不换行、pre保留换行空白）
background背景：
-
background-color 设置背景颜色
-
background-image 设置背景图片
-
background-repeat 设置背景图片的重复方式
values：repeat（默认值）、repeat-x、repeat-y、no-repeat -
background-position 设置背景图片位置
values：top,right,bottom,left,center,数值,百分比等 -
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面
values：border-box（默认）,padding-box,content-box -
background-origin 规定了指定背景图片background-image属性的原点位置的背景相对区域
values：padding-box(default)、border-box、content-box -
background-size 设置背景图片的大小
values：具体值，百分比，cover，contain -
background-attachment 设置css属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
values：scroll（default），local，fixed -
background 整合属性
雪碧图（css sprite）：一次性将多个图片加载进页面，降低请求的次数，加快访问的速度，提升用户体验。
渐变：
background-image属性
线性渐变：
linear-gradient()Css函数创建一个由两种或多种颜色沿一条直线进行线性过渡的图像。values：渐变的起始位置，渐变线的方向的角度，颜色等
repeating-linear-gradient()平铺线性渐变径向渐变：
radial-gradient()放射性渐变，css属性values：渐变位置，渐变结束形状（circle，ellipse），颜色等
transition过渡：
过渡，指定属性发生变化时的切换效果。提升用户的体验。
transition是它包含所有属性的缩写形式（注意：用当前属性实现过渡时，过渡时间需写于延迟时间前）。
-
transition-property：指定应用过渡属性的名称-
过渡时需要满足有效值向有效值的过渡（auto不属于有效值）
-
多个属性用逗号隔开
-
所有属性都需过渡时，用属性
all
-
-
transition-duration：指定过渡动画所需的时间- 单位：秒，毫秒，1s=1000ms
-
transition-timing-function：过渡的时序函数，设置过渡在每个周期持续时间内如何进行。-
easing-function相关的属性 -
ease默认值，效果：慢速开始，先加速，再减速 -
linear均速运动 -
ease-in加速运动 -
ease-out减速运动 -
ease-in-out先加速，后减速 -
cubic-bezier()指定时序函数 -
step()分步执行过渡效果-
end在时间结束时执行过渡，默认值 -
start在时间开始时执行过渡 -
诸如此类
-
例子：
step(2,end)，表示在延迟时间结束后分2步进行过渡效果
-
-
-
transition-delay：指定动画延迟响应的时间（单位：秒，毫秒）
animation动画：
animation动画，设置属性的动画过渡效果
animation是缩写，和transition用法类似（注意：动画过渡时间需写在延迟时间之前）和
@keyframes关键帧搭配使用
@keyframes的用法：
格式：
@keyframs animation_name(名字自定义){
/*
from、to关键字可用percentage（百分比）替换，0%~100%关键帧的
*/
/*开始点，可用0%替换*/
from{
/*开始关键帧对应的属性设置*/
}
50%{
/*中间关键帧对应的属性设置*/
}
/*结束点，可用100%替换*/
to{
/*结束关键帧对应的属性设置*/
}
}
/*举例：调用动画*/
animation:animatino_name 2s linear infinite;
-
animation-name关键帧的名称，允许一个或者多个，多个用逗号隔开 -
animation-duration设置动画，完成一个动画周期所需的时间（单位：s，ms） -
animation-timing-function设置动画在每个周期持续时间内如何进行（属性同上） -
animation-delay指定从应用动画到元素开始执行动画之前等待的时间量。（单位：s，ms） -
animation-iteration-count设置动画序列在停止前应播放的次数。-
<number>，正数数值，如：1，0.5 -
infinite无限循环播放动画
-
-
animation-direction设置动画是应正向播放、反向播放还是在正向和反向之间交替。-
normal动画正向播放，默认值 -
reverse动画反向播放 -
alternate动画正反播放，先正向后反向 -
alternate-reverse动画反正播放，先反向再正向
-
-
animation-fill-mode设置 CSS 动画在执行之前和之后如何将样式应用于其目标。-
none动画执行前不设置css样式，默认值 -
forwards设置保留最后一个关键帧动画，即动画执行完毕元素会停止在动画结束的位置，与animation-delay、animatino-iteration-count属性相关。 -
backwards动画将在应用于目标时立即应用第一个关键帧中定义的值，与animation-delay、animatino-iteration-count属性相关。 -
both结合forwards和backwards规则，从而在两个方向上扩展动画属性。
-
-
animation-play-state设置动画是运行还是暂停-
running运行 -
paused暂停
-
扫一扫
679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
