css+js+jq实训笔记

css第一天

1、平时有空多记单词（很多新单词）
2、用谷歌浏览器调试代码
3、多看看公众号和网站（对面试有很大的帮助，也可以帮助了解前端）
4、爱果果（可以去玩一下）
5、egret白鹭科技（游戏开发）
6、小程序API，要学会读懂文档、手册
7、学习PS
8、提高自己的审美
9、计算机网络、数据结构 考研408
10、有空做思维导图
11、先找好要模仿的网站，不能太简单了，一个人一组
12、练好指法 打英文
13、注释 Ctrl+/ 文件后缀要自己打
H5文档头（告诉浏览器要用哪一种方式编译代码） ！+tab
14、阿里巴巴矢量图标库
15、照片放在images中，生成的ico图片放置在主目录
16、 阿里巴巴矢量图标https://www.iconfont.cn/
ico制作 http://www.bitbug.net/
也可以直接去线上获取： 直接在网址后面/favicon.ico+enter
17、引入图片 img + tab
属性： src：图片路径 alt：图片不能正常显示的时候提示内容 title：鼠标移入提示文字
绝对路径：D:/study/代码/1.jpg (绝对路径不利于代码管理）
相对路径：images/1.jpg （相对自身出发寻找文件）
18、双标签：<标签名 k=“v” k=“v”></标签名>
单标签<标签名 k=“v” k=“v”/>
k是属性，属性与属性之间用空格隔开。
标题名+tab
19、html+css+js
html：负责页面结构。使用标签的目的不是为了程序员可以看明白，而是为了浏览器。为了SEO。用正确的标签做正确的事情。
css：负责页面样式
js：负责用户交互
20、标题文字h1-h6 h1一般用来引入重要的内容，语义比较重。h1一般用来引入公司的logo。
一般一个页面中h1最多一个 h2不超过两个 h3不超过三个

一级标题

二级标题

三级标题

21、段落文字 在页面中引入一段话或者一段文字

春款打底裤

22、超链接 默认在当前页面跳转
加target="_blank"在新页面中跳转
href：链接地址
笔记
23、结构类似的布局 ul>li
ol>li 8 +tab 有序列表（前面有1、2、3、），现在一般不用了
ul>li8 +tab 无序列表
ol和ul的子级只能是li，li的夫级只能是ol或者ul
24、浏览器有空白折叠现象，不管有多少留白，都只能识别一个
换行：

空格： 
25、上标：
下标：
26、锚点：一个小标记
第一步：找到用户所要点击的目标，用a包裹
第二步：找到要跳转的标签用a包裹，取name值
27、选择器：如何选择标签
选择器分类：
：通配符选择所有标签
标签名选择器：直接选择标签名
类名选择器（class=“类名”）：.类名（在head的style里）
交集选择器：p.one（标签是p，.one是类名）< .one.two（类名为one 和two）
并集选择器：div，p，.one 既选择p又选择div还有.one（如果样式都一样，可以用并集选择器。选择器不叠加，只单独计算）
后代选择器：只要被包裹的都是子代 用空格隔开 div p（都选择所有的）
子代选择器：第一级包裹的 用>隔开 div>p（只能第一代包裹的，不会选择父级的）
id选择器：#id
选择器的权重：<标签名<类名<id名<行内样式<！important （id以后的都不推荐使用）
!important提升的只是一个样式的权重，不是整个选择器的权重
同样的选择器后写的生效。
一个标签名1g，一个类名1kg，一个id名1吨
28、
29、正常情况下，css可以放置在如何位置。但是一般不推荐，一般会有一个文件夹放css
30、使用h1的目的，是为了让文字加粗加黑。这句话是错的。标签的作用和样式一点关系都没有。因为HTML只负责结构。
31、img与background的区别
img：引入重要的图片。占位，能被搜索引擎抓取
background：装饰性图片。不占位，不能被搜索引擎抓取

css第二天

1、样式发展史：table div+css flex
2、div大区域大面积的块状排版
3、盒子模型指的是标签的占位
width height border（边框） padding（内边距：内容和边框的留白） margin（外边距：标签与标签之间的留白）
（width和height指的是内容的内容）
content包含width和height
盒子的宽高就是内容的宽高
盒子没有background
border padding margin都可以只设置一个方向
border-left：1px solid red；
padding-top：2px solid lime；
margin-top或者margin-left等等，只有有其他盒子盒子标签影响才会起作用。
4、border：三个值；值与值之间用空格隔开
第一个值：线的粗细
第二个值：线的类型 solid dashed虚线 dotted点线
第三个值：颜色 transparent（透明色）
5、css禅意花园
6、margin和padding都可以分别写成
一个值：上下左右
两个值：第一个值上下 第二个值左右
三个值：第一个值上 第二个值左右 第三个值下
四个值：上右下左
6、标签分类：
第一种：单标签和双标签
第二种：行内标签（a在同一行，和其他元素并排排列。宽高无效。上下外边距无效，左右有效。内边距有效，上下不占位，左右占位）和块级标签（div p h1-h6 ul ol li 独占一行）
在标准中，行内元素水平，块级元素 垂直排列。标准流最稳定，优先考虑标准流
7、块级标签水平居中，左右外边距auto
margin：10px auto；
8、文本类元素水平居中
text-align:center;
9、img不是标准流，宽高有效，图片一般只设置一个值，另外一个值自适应
10、居中是相对父元素居中的
11、行高：从文字中心基线开始，向上取留白的一半，向下去留白的一半。中间的距离就是行高。
12、文字垂直居中
行高等于容器的高度（单行） line-height：200px
13、css书写方式
嵌入样式：
内联样式（行内样式）：

外联样式：（作业或者项目一定要这样做）
link+tab
14、外联和嵌入的权重一样，后写的生效。
15、*选择所有标签，一般用来清除默认样式
16、标签可以用多个类名，用空格隔开，不能书写多个class属性，只能有一个class属性
17、不浮动就是会独占一行了
18、浮动：脱离标准流，变成行内块。
行内块：在一行排列，设置宽高有效
浮动只有left或者right
浮动： 如果一行不够，自动换行

  一个标签浮动， 同级（同一个父级标签）必须一起浮动
   有高度的目的，让结构更稳定。
   浮动塌陷：如果子级不浮动，父级可以检测子级的高度，如果子级浮动，父级检测不到
第一种解决方法：给父级设置高度（一般不用）
第二种解决方法：给父级加overflow：hidden

19、网站布局：
通屏的内容：一般不设置宽度，自适应
先从整体再局部
版心：页面的版面中心，一般一个网站只有一个版心
20、增加圆角：border-radius：
21、增加鼠标移入样式： 标签：hover
鼠标移入增加小手： cursor:pointer;
22、sublime分屏：Alt+shit+1/2/3

css第三天

1、img引入重要图片
h1-h6引入重要内容 h1一般引入公司logo，一个页面最多一个
h2最多两个
一般h4-h6才是引入标题
p引入一段话或者一段文字
a超链接
div大区域大面积排版
ul>li结构类似的布局
ol>li有序，类似于1 2 3 a b c
2、css的样式没有排他性，只要是标签都可以使用
一个标签浮动，同级必须浮动
3、选择器用法
后代选择器：div p
子代选择器：div>p
并集选择器：div,p,a
交集选择器：div.one
4、项目中，图片名字和文件名字。只能是英文，不能有特殊符号
首页一般是index.html
样式文件是css
5、con>* 选择con的所有子级标签
6、background：none; 去除背景颜色
7、行高和margin-top的关系，有时候需要减去行高留白的的一半
8、vertical align:middle 图片和文字同时存在的时候，可以让文字以图片垂直居中
text-align:center 仅文字的时候
9、css样式文件注释中，不能使用单行注释
10、块级标签比较重要，引入重要的内容。
行内标签一般放置修饰性内容：span b（加粗） u（下划线） i（倾斜）这些都是引入小元素，这些都是属于文本类元素，都可以用p包裹
一般情况下，块级标签可以任意嵌套
p只能放置文本类元素 a img span b u i 自身也不能嵌套
以下都不可以：

h1-h6一般也只能放置文本类元素，类似于p
11、 ul的子级只能是li li 的父级只能是ul或者ol
12、行内标签不嵌套块级标签，但是a除外
13、通过display转化完了以后，标签的显示模式变了，但是语义没有变，只是为了工作方便
display: block 标签转化为块级
display: inline 标签转化为行内
display: inline-block 标签转化为行内块（一行排列，可以设置宽高）
display:none; 隐藏标签
14、数字或者英文换行 work-break:break-all;
修改垂直对齐的方式 vertical-align:top （重心）一行重心对齐
15、浏览器有很多留白，不管有多少留白，都只识别一个
16、行内块与父级一般与父级有留白，一般把行内块 转化为块级 display:block;就会解决
17、块级标签浮动就变成了行内块
块级标签的宽度不设置的话有父级决定
18、一般与文字有关的样式都可以继承
如果自身没有改样式，可以一直向上寻找，直到找到为止 。font-size color font-family line-height
19、标准流（不浮动）存在外边距塌陷（只有一个的外边距 的值生效）
上下外边距的值取决于最大的 上下才会塌陷 两个相邻的div
左右外边距的值可以叠加

    第二种塌陷：父级标签嵌套子级标签，设置子级标签margin-top，父级跟着下来   div 里面套着div
第一种解决方法：给父级设置overflow:hidden;
第二种解决方法：不使用margin 使用padding

20、overflow:hidden; 原始的意思是：溢出隐藏
overflow:auto; 超出部分出现滚动条
word-break：break-all 数字和英文换行
overflow:auto; 和word-break：break-all;一起使用可以出现垂直滚动条
21、固定定位：不会随着页面的滚动而滚动。参照物是当前窗口
不占位，脱离标准流，成为行内块
可以通过样式设置 left right bottom top
left 和 right 只设置一个值 top 和bottom 只设置一个值 （）
中间居中：left：50%；
margin-left:-250px;（移动窗口的一半宽度）
top：50px;
margin-top:-25px;（一半高）
22、相对定位 ：相对自身位移。一般用来实现微调。对其余标签影响最小
半脱离标准流：一方面是因为有了四个坐标，另外一方面是因为标签的性质没有改变
left right bottom top 参照物是自身，所占的位置还是原来的位置
23、相对定位占位，固定定位不占位
24、定位的标签才有left right bottom top
定位的标签才有z-index
定位的标签有图层顺序，默认后写的在后面。可以用z-index调整。
默认z-index:0；值越大越靠上 z-index可以为负值，但是不建议（有可能出现没有办法增加hover情况）
z-inedx同级比较才有效，父子没有效。优先考虑父级的z-index。
24、一个标签在另一个标签的上方。不占位，脱离标准
绝对定位：不占位，脱离标准流，变成了行内块；
25、子级绝对定位，父级相对定位（父级不一定相对定位），可以让自己放置在父级的如何位置 left right bottom top
自己绝对定位，会一直向上寻找，直到找到有定位方式的标签，然后以该标签作为参照物。
26、网页布局中，首先是标准流，再次浮动，最后定位。
27、rgba 第四个值是设置透明度 0-1
28、选择4的倍数的标签 ul li:nth-of-type(4n){}
29、旋转 transform:rotate(30deg)
30、增加圆角，值为50%为圆形 border-radius:50%;
31、定位后居中：left：0；right：0；margin：0 auto；

css第四天

1、w3c https://www.w3cschool.cn/ 和 菜鸟教程
2、ul 的高包括li的高和边框的高度，设置li的高时，不能包括边框
3、块级标签不设置宽度的话：margin border padding width 加起来就是父级的宽度
4、form用来进行表单提交 action属性表单提交的地址
提示文字用label包括，input可输入框（type限制类型 text number（不具有普遍性） password radio单选框 checkbox 多选框 submit提交 reset重置）
label的for值和input的id值可以把文字和表单联系起来
id是唯一的，名字不能冲突，整个页面只能有一个，一个标签只能有一个id
5、radio单选框，成为真正的单选框需要有同样的name
6、select 下拉选框
7、input 单行框 textarea文本域
8、HTML5中有 date color week