theme: fancy
highlight: agate
HTML
HTML骨架
HTML:超文本标记语言
//DTD (Document Type Definition文档类型声明)
//不写DTD会引发浏览器的一些兼容问题
//不同版本的HTML有不同的DTD写法
<!DOCTYPE html>
<html lang="en">
//head里是网页的配置
<head>
//使用meta标签设置网页关键词和描述，name属性非常关键,用来设置meta的具体功能
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
搜索引擎非常看重h1标签的内容，应该将重点内容放到h1中，比如网页的1ogo等
h1标签一般只能放置一个，否则会被搜索引擎视为作弊
字符集
- 无论使用哪种字符集，一定要在VScode编辑器中将文件也设置为相同字符集，否则会出现乱码，然后更改meta标签
- Live Server插件不支持gb2312 (gbk) 字符集，只支持UTF-8字符集
转义字符
<p></p>在网页上会被解析
使用转义字符<代替小于号
ul li ol li 定义列表 表格标签
table可以设置border='1' td和th是同级的
CSS
选择器
交集选择器之间没有空格
. box1 p:last-child {
color: red;}//不要漏了p
:nth-child()里可以写成an + b的形式，表示从b开始每a个选一个， 注意不能写为b +an n从0开始数
属性选择器
伪类
按照这个顺序写
新增伪类
<p></p>
p:empty就选上了
伪元素(行内元素，不能设置宽高)
CSS属性
浏览器私有前缀
文字样式
】
字体属性
使用阿里普惠字体
在font-family中指定引入的字体名
段落与行的属性
圆角
利用边框画三角形
阴影
background-size
例如：background-size：100px auto;
contain展示图片全部，cover图片未显示完整
background-clip
background-attachment
background-position
综合属性
线性渐变
径向渐变
斜切变形
位移变形
旋转
以左上角为中心点进行旋转
transform-origin: 0 0;
3D旋转
空间移动
盒子模型
display属性
浮动
- 浮动使用要点:要浮动，并排的盒子都要设置浮动
- 父盒子要有足够的宽度，否则子盒子会掉下去
浮动的顺序贴靠特性
浮动的元素一定能设置宽高
- 浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等
BFC
- BFC (Box Formatting Context,块级格式化上下文)是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
如何创建BFC
- float的值不是none
- position的值不是static或者relative
- display的值是inline- block. flex或者inline-flex
- overflow:hidden
BFC的作用
- BFC可以取消盒子竖直方向margin塌陷
- BFC可以可以阻止元素被浮动元素覆盖
- BFC可以解决父元素不设置高度，子元素全部设置浮动，父元素高度塌陷
清除浮动
清除浮动:浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响
例如
给p设置浮动，div不设置高度，会全部显示在一行
清除浮动的方法
- 让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性
- 给后面的父盒子设置clear:both属性。clear表示清除浮动对自己的影响，both表示左右浮动都清除给后面的div设置margin-top无效，因为上一个div高度是0
- 使用::after伪元素给盒子添加最后一个子元素，并且给::after设置clear:both。伪元素还要转成块级元素
- 在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子，这里margin也会失效，需要在新加的div设置一个高度
定位
相对定位
- 相对定位:盒子可以相对自己原来的位置进行位置调整,称为相对定位
- 相对定位的元素，会在“老家留坑”，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成“影子”，不会对页面其他元素产生任何影响，不脱离文档流
相对定位的用途
- 相对定位用来微调元素位置
- 相对定位的元素，可以当做绝对定位的参考盒子
绝对定位
- 绝对定位:盒子可以在浏览器中以坐标进行位置精准描述,拥有自己的绝对位置
- 绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对它们进行压盖
- 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子通常是相对定位的,所以这个性质也叫作‘'子绝父相”
- 绝对定位垂直居中top:50% margin-top:负元素高度一半
元素脱离文档流之后就可以设置宽高（当前元素在页面上不占位）
CSS过渡
//都要加s
什么类型的属性可以被过渡
- 所有数值类型的属性，都可以参与过渡，比如width、
height、left、 top、 border- radius - 背景颜色和文字颜色都可以被过渡
- 所有变形(包括2D和3D)都能被过渡
- 如果要所有属性都参与过渡,可以写all
transition: all 1s linear 0s;动画
