前端 HTML + CSS
尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通_哔哩哔哩_bilibili
操作BOM对象_哔哩哔哩_bilibili
JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili
目录
HTML
实体
meta标签
其他标签
CSS
选择器
伪类、伪元素
选择器的权重
em、rem
文档流
盒子模型
浮动
定位
文本
背景
全局变量
动画
transform
JS
DOM
定时器
HTML
实体
符号实体参考手册
Text
好多空格
Wsl < 我这种也是可以的 > > < ©
meta标签
Text
其他标签
点我去对应id位置
打开新的标签
在当前页面打开
点我什么也不会发生
点我回到页面顶部
CSS
选择器
Text
谷歌
百度
知乎
知乎
我是P
我是span
我也是P
haihia
haihia
haihia
haihia
haihia
我不变
haihia
haihia
伪类、伪元素
伪类：特殊的状态
Document
haihia
好好学习，天天向上
选择器的权重
内部样式 > id > class > 元素 > 通配 > 继承
!important 设置此样式的优先级最大
h1{
color: black ! important;
}
em、rem
Test
这个字体是10px的
文档流
Document
第一行
第二行
知乎 百度
盒子模型
依次顺时针
内边距 padding
padding : 上 右 下 左
外边距 margin
margin : 上 右 下 左盒子大小 box-sizing
content-box 默认样式
border-box 即使有了边框 盒子也不会变大
-->
Document
有了边框 盒子大小就变成了 120*120 了
加了边距后 盒子也会变大
我整体还是100*100
图片地址：49_尚硅谷_盒子模型-水平方向的布局_哔哩哔哩_bilibili
子类元素 与 父类元素 之间存在的某种关系
如果不满足 则会在右边距上进行稍微改动 达到平衡
如果其中存在auto样式的 则优先改动auto的值 以达到平衡
进而有了 常用的居中代码
①居中的盒子必须有宽度
②margin : 0 atuo; (上下外边距为0 左右都是auto 此时不满足等式 则会为左右边距自动赋值 这时两边平分数值 从而达到居中的效果)
overflow 关于多出来的部分的处理办法
浮动
设置浮动后 元素自动脱离文档流 相当离开地面
都浮动的话 就在高层重新排列 不会再有什么等式约束
Document
clear 清除浮动
我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动
Document
具体用处
可以解决高度塌陷问题
一个父元素 其中有多个子元素 想要实现 父元素的高度随子元素的改变进而变化
Document
定位
配合偏移量使用 top right left bottom
relative 相对定位
在默认位置上移动 层级会变高
不改变其他元素的位置 可以被其他元素位置改变
absolute 绝对定位
层级变高 脱离文档流
参照元素：最近的 块父元素的relative 没有就是body
父相子绝(父类-相对定位 子类-绝对定位)常用布局
fixed 固定定位
也是绝对定位 参照网页视口(小广告形式)
sticky 粘滞定位
和relative基本一致
元素到达某个位置时将其固定
Document
我是广告
窗口怎么动
我都不动
在上下滑动过程中
当top=30时 我就不动了
文本
text-align (水平)
right center left justify 两端对齐
vertical-align(垂直)
top顶部 bottom底部 middle居中 baseline默认
text-decoration(下划线)
none无 underline下划线 overline上划线 line-through删除
text-decoration:overline red
letter-spacing(字体间距)
背景
background-repeat 图片的重复方式
repeat 默认
repeat-x 水平重复
repeat-y 垂直重复
no-repeat 不重复
background-position 图片的位置
top left right bottom center 九宫格形式
background-position:10px 10px;
background-size 图片大小
background-size: 宽度 高度;
background-size: cover;图片比例不变 铺满
颜色线性渐变 to top向上 deg旋转度数 turn圈数
background-image: linear-gradient(red,blue);
放射性渐变
background-image: radial-gradient(#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#9400d3);
Document
全局变量
Document
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit quas doloribus mollitia rem repellendus ab. Officia, soluta. Sint odio iure illo. Repudiandae natus veritatis impedit commodi. Sunt ratione libero atque.
动画
transform
Document
hello world
115_尚硅谷_过渡_哔哩哔哩_bilibili
JS
DOM
ID 值唯一 其他的不唯一 所以以数组存储
Document
hello world
hhhhhhhh
定时器
Document