HTML负责结构，CSS负责样式，JS负责行为
10.3 HTML： 自结束标签（不用写结束标签）
< !DOCTYPE HTML> 声明类型< meta charset=“utm-8”>设置网页的字符集，防止乱码的出现实体（w3school上可查详细内容):& nbsp;可以输出空格软件：
安装了notepad++终于用上Chrome在Vscode内打开代码文件夹（学习了vscode的一些功能）下载了vscode中文包，live server设置字体大小：（左上角）文件-首选项-设置左下角的齿轮也可以设置先!再Tab可以直接生成完整网页结构10.4 HTML：
meta
< meta arthor="Danmo"> < meta name="keywords" content="逆转裁判，神千，神乃木庄龙"> < meta name="description" content="这是一个关于逆转裁判的网站"> < meta http-equiv="refresh" content="3;url=https://www.bilibili.com/video/BV1XJ411X7Ud?p=15">（自更新） HTML，对于语义化标签，我们只关注语义，不在乎形式，那些东西交给CSS吧！ 像div，span这种标签，没有语义 块元素< h> < hgroup> 存放一组相关的标题< p> < blockquote>长引用行内元素 < em> 语气加重 < strong>表示强调 < q>短引用div是主要的布局元素span行内元素，在网页中选中文字软件：
Pr 2020Vscode： Ctrl+回车 只会让光标下移； Ctrl+backspace 可以一次性删掉一行前边的所有空格（Tab）10.5 HTML： 链接：./表示当前目录，…/表示上一级目录
< img>图片标签
四种图片格式：jpg,gif,png,webp,base64码
软件： alt+shift+↑/↓，可以在vscode里向上/向下复制
在vscode输入br*3再回车，可以同时出现3个 10.6 HTML:
iframe表示内联框架（由于无法被浏览器搜索功能检索，用处不是很大），只有设置了frameborder=0才能彻底消除边框，可以设置width和height。audio引用音频，加controls属性才出现播放按钮，autoplay属性自动播放（但基本无用，浏览器为了用户体验，不会设置成自动播放，IE除外）loop可以播放完继续循环播放video引用视频，和audio的用法一样。 引用其他网站视频的方法：在视频网站点分享，有一个“嵌入代码”，复制到vscode即可，视频框的大小可以用width和height调整。10.7 CSS：
三种CSS编写的位置：内联样式，内部样式，外部样式。 外部样式在head里用< link>引入外部CSS文件，内部样式写在head里，内联样式直接在p后跟style。CSS基本语法：选择器+声明块
常用选择器： 元素选择器 id选择器：在p后加入id属性，css中在选择器前加#号。注意，id不要重复 类选择器（class选择器）：在p后加入class属性，css中在选择器前加.号。类选择器可以重复。可以同时为一个元素添加多个class属性（两个class名之间用空格隔开即可） （建议多用class选择器） 通配选择器（用*{}） 复合选择器：无 交集选择器：语法：选择器1选择器2选择器3...选择器n（连着写，如果有就必须以元素选择器开头）（有时候没必要多此一举） 举例：div.red（div对应元素选择器，.red对应class选择器） 并集选择器：语法：选择器之间以逗号隔开。 举例：#b1,.p1,h1,span,div.red 交集选择器和并集选择器可以套（交集中可以出现并集，并集中可以出现交集）软件： Vscode：
Ctrl+！可以直接生成注释（在HTML中就生成HTML注释，在CSS中就生成CSS注释）再按一次可以取消注释10.8
HTML：
Title属性，把鼠标光标放在文件上，可以看到title信息。CSS：
父元素、子元素、祖先元素、后代元素、兄弟元素（父子的要求比较严格，兄弟指同一个父元素下的几个子元素） 关系选择器： 子元素选择器：选中指定父元素的指定子元素。用”>”连接。 后代元素选择器：选中指定元素内的指定后代元素。用空格连接。 兄弟选择器： 下一个：选中A元素的下一个元素B，并且中间不能被隔开（前提是兄弟关系）。用+连接。 下边所有：选中A元素之后的所有元素。 属性选择器： 语法： [属性名] 选择含有指定属性的元素 [属性名=属性值]选择含有指定属性和属性值的元素 属性名^=属性值]选择属性值以指定值开头的元素 [属性名$=属性值]选择属性值以指定值结尾的元素 [属性名*=属性值]选择属性值中含有某值的元素的元素 例如：p[title^=abc]（元素选择器和属性选择器构成了复合选择器） 伪类选择器：（前边带一个冒号） 语法： child系：对所有子元素进行排序 type系：在同类型元素中进行排序 :nth-child( ) 选中第n个子元素（第一个元素的序号为0）。 :nth-of-type 括号内输入2n或even可指定偶数，括号内输入2n+1或odd可指定奇数，还可以输入其它代数式来选中对应的元素。（经过测试，有时候输入odd或者even会失效，建议输入含n的代数式）nth可以换成first或last，但感觉不如上面的这两种。
软件： Vscode：
可以根据CSS选择器的需求来生成标签。比如输入ul>li*5，就会自动生成一系列标签。其他选择器也是同理。10.9 CSS：
超链接伪类： link表示没访问过的，visited表示访问过的。完整的写法是a:link和a:visited. 只有link标签既可以改颜色又可以改大小，出于隐私性考虑，visited只能改颜色 在link处改大小时，link和visited的链接都会变大 a:hover和a:active 分别可以修改链接被选中和没被选中时的颜色 伪元素： p::first letter p::first line p::selection 表示选中的内容 以下的两种最常用： p::before p::after before和after必须结合content属性来使用，content是CSS内的元素before和after里的内容，在复制的时候不会被选上，在开发中常用
软件: Vscode: 在< p>标签中输入lorem，可以自动生成一大段话，用于测试。
10.10 CSS：
样式的继承：为一个元素设置样式的同时也会应用到它的后代元素上 可以将通用的样式统一设置到共同的祖先元素上，从而使所有元素都具有该样式，但是背景/布局相关的样式不会被继承。 样式的权重： 内联样式：1，0，0，0 id选择器：0，1，0，0 类和伪类选择器：0，0，1，0 元素选择器：0，0，0，1 通配选择器：0，0，0，0 继承：无优先级 将所有选择器加在一起算（逗号隔开的分组选择器是单独算） 选择器的累加不会超过其对应的数量级（比如类选择器再高也高不过id选择器） 如果优先级相同，优先使用靠下的样式 在某一个样式的后边添加!important，则此时该样式会获取最高的优先级，甚至超过内联样式，开发中尽量不要用。 width和height，可以将属性值设置为相对于其父元素属性的百分比 好处：设置百分比可以使子元素跟随父元素的改变而改变 em:相对于元素的字体大小来计算，1em=1font-size，em会根据字体大小的改变而改变，相对于根元素（html）的字体大小来计算 可以这样设置，从而改变根元素的字体大小： html { Font-size:30px; }软件： Vscode：输入.box就可以自动生成< div class=”box1”>< /div>
10.11 CSS：
RGB（red,green,blue）每一种颜色的范围在0-255（0%-100%）之间 RGBA 第四个值表示不透明度，0表示完全透明，1表示完全不透明，.5半透明 十六进制的RGB值： 语法：“#红色绿色蓝色 颜色浓度的范围：00-ff 如果颜色两位两位重复可以简写 #aabbcc-->#abc hsl值 h色相（0-360）本质是在色环上的度数 s饱和度，颜色的浓度0%-100% l亮度，颜色的亮度0%-100%（一般标准颜色是50%） 若加a，意思依然是透明度 文档流：是网页的基础，我们所创建的元素默认都是在文档流中进行排列。 元素主要有两个状态：在文档流中/不在文档流中元素在文档流中的特点： 块元素：在页面中独占一行/默认宽度是父元素的全部（把一行占满）/默认高度被内容撑开（字有多大，就有多宽） 行内元素：只占自身的大小默认宽度和高度都是被内容撑开 盒子模型： 几个部分：内容区content、内边距padding边框border、外边距margin 内容区：大小由width和height两个属性来设置 边框：至少设置三个样式： 宽度border-width 颜色border-color 样式border-style 值的情况： 四个值：上 右 下 左（顺时针） 三个值：上 左右 下 两个值：上下 左右 一个值：上下左右 每一个属性都有一组border-(top/right/bottom/left)，用来单独指定某一个边的宽度 可以使用属性值none来让某一条边的边框失效 如：border:10px red solid; Border-right:none; 这样就只有右边没有边框 关于style的属性值：solid实线 dotted 点状虚线 dashed 虚线 double 双线软件：
Faststone capture 测量长宽，提取颜色的RGB值（直接复制十六进制的RGB值放入vscode） Vscode: css区，输入w200和h200，会自动生成width:200px;和 height:200px; 直接敲bd，发现快速生成边框三个样式的方法 border:10px solid #000;10.13 CSS：
水平方向的布局：子元素属性必须满足 margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度（必须满足） 如果相加结果使等式不成立， 则称为过渡约束，等式自动调整 如果这七个值没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足 有三个值可以设置为auto（auto在冒号后面，是属性值）：width margin-left margin-right（如果不设置子元素的width，它的默认值就是aoto） 如果某个值设为auto，则会自动调整为auto的那个值以使等式成立 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0. 如果将三个值都设置为auto，则外边距都是0，宽度最大。 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值。（经常利用这个特点来使一个元素在其父元素水平居中）
10.14 HTML：
关于行内元素span的理解： < span>aaa< /span>< span>bbb< /span> 这样显示的是aaabbb 如果在两个span之间加了空格或回车，显示会变成aaa bbbCSS：
默认情况下父元素的高度被内容撑开。 子元素在父元素的内容区中排列，若大小超过父元素，会溢出。 使用overflow属性来设置父元素如何处理溢出的子元素。（还分为overflow-x只处理水平方向，overflow-y只处理垂直方向）
可选值： visible（默认）：子元素溢出部分在父元素外部位置显示 hidden：溢出内容将会被裁剪不会显示 scroll：生成两个滚动条，通过滚动条来查看完整内容 auto：根据需要生成滚动条（比如只生成垂直方向） 垂直外边距的重叠：相邻垂直方向外边距会发生重叠现象 兄弟元素：（对开发有利，不用调整） 都是正值-->兄弟元素间的相邻垂直外边距会取两者之间的较大值 一正一负-->取两者的和 都是负值-->取两者绝对值较大的 父子元素（需要调整） 方法：调整padding和height（以后有更好的方法） 行内元素（span，a）的盒模型： 行内元素不支持width和height 行内元素可以设置padding，border，magin，但垂直方向都不影响页面布局 display用来设置元素显示的类型，可选值： inline 将元素设置为行内元素（默认） block 块元素 inline-block 行内块元素 table 表格 none不在页面显示（不占位置） visibility用来设置元素的显示状态，可选值： visible 元素在页面正常显示（默认） hidden 元素在页面中隐藏不显示，但是依然占据页面位置10.15 CSS:
浏览器默认样式：只需要引入超哥给的reset.css和normalize.css中的一个。reset是去除默认样式，normalize是统一样式。（用link引入，建议放在最前面）
10.16 没学
10.17 没学
10.18
完成练习：京东的左侧导航，解决： 如何使文字在每一行内垂直居中显示（lineheight和height相同）hover和active在任何元素中都可使用，不仅限于超链接
巧妙的两步的字体大小设置（对li设置一次字号，对a再设置一次），可以使/的大小为12px，而字是14px10.19~10.22 没学
10.23
京东图片列表，设置步骤（大的）： HTML 创建列表ul 在li中插入图片和超链接 CSS 设置ul的宽高，裁剪溢出内容，设置margin使得居中。 对li，设置li的位置。 对img，设置图片大小。注意点： 先设置ul的width和height，再设置margin 注意超链接伪类 not:(:last-child) 设置图片大小:100%
京东左侧导航条，设置步骤： HTML 创建一个nav，里面套很多div，div里套超链接和行内元素span CSS 设置nav的宽高，四周padding，居中margin，背景颜色 设置div，字体大小，左内边距，（高度和行高一致） 设置span，每一个/前后空2格 设置div的hover 设置超链接，去下划线，改颜色，设字体大小 设置超链接的hover10.24
继续敲之前盒子模型的代码10.25
网易新闻列表： HTML: 一个div当容器，左上角有小标题 一个div存放图片（超链接）和图片内的文字 ul里的li存放四条新闻 CSS: 去超链接的下划线 容器的宽高、margin、背景色、上边框 标题 高度 上边框 上外边距 上内边距 标题超链接的颜色 加粗 图片容器的高度 图片内文字的效果 新闻列表ul的上外边距 li的下外边距 用before给每一个li加项目符号 设置li中的字体大小和颜色 超链接hover10.26
CSS：
10.27 CSS：
技巧：
在chrome浏览器中用“检查”调试padding值。10.28：
CSS：
10.29 CSS：
clear:清除浮动元素对当前元素产生的影响（本质是浏览器自动为该元素添加上外边距） 可选值：left right both(清除两侧中最大影响的那侧) 解决高度塌陷的最终方案：伪元素after .box1::after{ content: ''; display: block; clear: both; } 最终形态的clearfix clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可 .clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; } position:设置定位（只改变该元素的位置，不影响其它元素），可选值：static(默认)，四种开启定位：relative absolute fixed sticky 相对定位relative:使用offset设置偏移量top、bottom/left、right（每组设置一个即可）10.30 CSS:
Vscode：
输入poa可以直接生成position：absolute10.31 练习了京东轮播图。 HTML:
设置一个ul>li>a>img，存放图片。 在ul内部，放一个div，div里再嵌套8个div，作为图片左下角的点。 <ul> <li> <li> <li> <div> <div><a></a></div> </div> </ul>这样是可以的。 CSS:
对ul设置宽高，外边距（居中）开相对定位（目的是使ul中的pointer可以相对于ul定位而不是相对于初始包含块（html）去定位） 对li开启绝对定位（让图片重叠，只显示一张图片） li:nth-child( )设置z-index，修改元素的层级来显示指定的图片 对导航点整体，开启绝对定位，定位在左下角 对div中的a，设置float：left，并设置圆边框，大小，颜色等。 hover设置鼠标移入，导航点的效果 此调整是为了在鼠标移入后，各导航点的中心仍在一条直线上，同时不改变各导航点的大小（总之就是美观，应该加上这两条语句）。对div中的a设置： /* 将背景颜色值设置到内容区，边框和内边距不再有背景颜色 */ background-clip: content-box; border: 2px solid transparent; 遇到的问题： 即便加了float:left,导航点仍然是垂直排列的，怎么才能变成水平排列？11.1 CSS：
font-face可以将服务器中的字体直接提供给用户使用，但要注意加载速度、版权和字体格式。 例：
@font-face { /* 指定字体的名字，下边在font-family要用一样的名字 */ font-family:'myfont' ; /* 服务器中字体的路径 */ src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype"); } format指定字体的格式，默认情况下可以不写。 图标字体（为矢量图）：将图标设置为字体，可以更灵活，加快加载速度。其它：
查看系统内的字体：C盘-->Windows-->Fonts 右上角搜索“微软”，出现微软雅黑fontawesome 使用步骤:
下载 https://fontawesome.com/ 解压 将css和webfonts移动到项目中 将all.css引入到网页中 使用图标字体 /*直接通过类名来使用图标字体*/ class="fas fa-bell" class="fab fa-accessible-icon"（免费使用的只有fab和fas，一种出现乱码就换另一种）
11.2 CSS:
写图标字体的3种方法： 1.
<i class="fas fa-bell" style="font-size:80px; color:red;"></i> <i class="fas fa-bell-slash"></i> <i class="fab fa-accessible-icon"></i> <i class="fas fa-otter" style="font-size: 160px; color:green;"></i> ↑免费的只有fas和fab双引号内为图标的名称，后边可以设置图标大小和颜色 2. 通过伪元素来设置图标字体
找到要设置图标的元素通过before或after选中 在content中设置字体的编码 设置字体的样式 fab font-family: 'Font Awesome 5 Brands';（所有fab都用这个名） fas（需要加font-weight才能正常显示） ont-family: 'Font Awesome 5 Free';（所有fas都用这个名） ont-weight: 900; 例： li::before{ content: '\f1b0'; /* font-family: 'Font Awesome 5 Brands'; */ font-family: 'Font Awesome 5 Free'; font-weight: 900; color: blue; margin-right: 10px; } （这种方法的好处是，多行之前可以同时添加符号字体）3…
通过实体来使用图标字体： + 图标的编码; <span class="fas"></span> iconfont: 先进网站，点最上方图标库-->官方图标库，随便选一个，把图标加入购物车，点右上角购物车，创建一个项目，把刚才的购物车都放进项目里。进入My projucts界面（刚加购物车会自动跳转，其它时候打开时点最上面Resources-->My Projects），点download codes，将压缩包解压，删除其中两个demo文件，将其它文件全部放入项目文件夹内，在link处引入iconfont.css文件。 CSS区域： <style> i.iconfont{ font-size:100px;} （不写.iconfont可能无法生效） </style> 在HTML区域写 <i class="iconfont"><i> ↑实体方式 <i class="iconfont icon-qitalaji"></i> ↑类名方式 <style> p::before{ content:'\e625'; font-family:'iconfont'; font-size:100px; </style> <p>xxx</p> ↑伪元素方式 对于文字：行高（可设置）-->字体框-->字体 字体框：指字体存在的格子，设置字体大小，实际上是设置字体框大小。 line-height行高： 指的是文字占有的实际高度。可以设置px/em，也可以设置为一个整数（意思是行高和字体框大小的比值） 行高会在字体框的上下平均分配，因此只要将div和line-height设置为同一个值，即可让单行文字在一个元素中垂直居中。 行间距=行高-字体大小软件：
在Zeal上下载文档。 下载安装了Adobe Ps，Ae和Au。11.3 CSS:
字体和文本：
简写：font：粗体、斜体 大小/行高 字体族 只有大小和字体族必须写，其它的不写均使用默认值。 例：font: bold italic 50px/2 微软雅黑, 'Times New Roman', Times, serif; font-weight:字体的加粗，除了normal和bold，还有100-900九个级别（没用） font-style:字体的风格，有normal和italic。 text-align:文本的水平对齐。可选值：left、right、center、justify（两端对齐） vertical-align:元素的垂直对齐。可选值：baseline 基线对齐（默认），top顶部对齐，bottom底部对齐，middle居中对齐（对齐字母x的交叉点） text-decoration:设置文本修饰，可选值：none、underline、overline（上划线）、line-through（删除线） white-space:设置网页如何处理空白，可选值：normal、nowrap不换行、pre保留空白 如果想设置处“一行内容显示不全，最后出现省略号”的效果，可以： white-space: nowrap; overflow: hidden; text-overflow: ellipsis;背景：
background-image:设置背景图片，可以同时设置背景图片和背景颜色。 background-repeat:设置背景的重复方式，可选值：repeat（默认，沿着x和y重复）、repeat-x、repeat-y、no-repeat。 background-position:设置背景图片的位置。两种方式： 可以写background-position:top left、center center、bottom right等，分成九宫格。 也可以同偏移量来指定，background-position:水平方向偏移量 垂直方向xxx background-clip:设置背景的范围，可选值:border-box(默认，背景出现在边框的下边)、padding-box(背景只出现在内容区和内边距)、content-box（背景只出现在内容区） background-origin:背景图片和偏移量计算的原点，可选值:padding-box(background-position从内边距处开始计算)，其它属性值和clip一样，效果同理。 background-size:设置背景图片的大小，两个值依次为宽度和高度，如果只写一个，第二个值默认auto。属性值还有cover(图片比例不变，铺满)、contain（图片比例不变，将图片在元素中完整显示） background-attachment:选择背景图片是否跟随元素移动。可选值:scroll（默认，背景图片跟随元素移动）fixed（背景固定在页面中） 简写属性：background 注意:background-size必须写在~position后面，用/隔开。~origin要在~clip的前边。11.9
CSS：
实现渐变：
选中一张渐变的图片，在PS中使用裁剪，裁出横向长度为1px的图片条，将图片条设为背景，并且设置“repeat-x”。
一些PS的操作：
测量图片大小：矩形选框工具。如果数字消失了，按F8.裁剪：（最上方）图像→裁剪。导出：文件→导出→存储为web格式。历史记录：在PS右上角，点击历史记录，可以在裁剪后恢复之前的状态。雪碧图
起因是按钮练习：如果给link、hover、active各设置一张背景，就会出现由于图片加载速度慢而产生图片闪烁的情况。
浏览器的一些操作：
ctrl+F5 刷新，强制清除缓存。F12打开开发者工具，选择All，如果刷新一般会有进程减少。解决方法：可以将多个小图片统一保存到一个大图片中，通过调整background-position来显示图片，这样图片可以同时加载到网页中，避免闪烁。
该技术被称为CSS-Sprite。
使用步骤：
确定要使用的图标。测量图标的大小。根据测量结果创建一个元素。将雪碧图设置为元素的背景图片。设置一个偏移量以显示正确的图片。雪碧图的特点：一次性将多个图片加载进页面，降低请求的次数，加快访问速度。
11.10
HTML：
表格：table、thead（内容自动加在表头）、tbody、tfoot（内容自动加在表末）、tr（一行）、td（单元格）
如果没加tbody，浏览器会自动加上，因此tr不是table的子元素，而是后代元素。
colspan横向合并单元格，比如：
<td colspan="2">D2</td>rowspan纵向合并单元格，同理。
表格的样式：
border-spacing: 指定边框间距离。border-collapse:collapse; 设置边框的合并。设置排列方式：text-align:center 、vertical-align:middle(值可以修改)将元素设置为单元格：display:table-cell;
可以用vertical-align设置在父元素内垂直居中。但是text-align无效，还得用margin设置水平居中。CSS：
线性渐变：
格式：background-image:linear-gradient(方向，颜色，颜色 大小，颜色 大小)
方向：
to left/right/bottom/top还可以组合（to top left）deg表示度数，turn表示圈（如.25turn表示1/4圈）平铺的线性渐变：background-image:repeating-linear-gradient(方向，颜色 大小，颜色 大小)
注意，此时只关注两个大小的差值，0 50px和50px 100px是等效的。
径向渐变：
格式：~:radial-gradient(大小 at 位置 ,颜色 位置,颜色 位置)
大小：
circle 圆形ellipse 椭圆closest-side 近边closest-corner 近角farthest-side 远边farthest-corner 远角可以手动指定径向渐变的大小位置：
top right left center bottom写具体的数值（px）（设置渐变后，即使设置background-repeat:no repeat也不起作用）
11 . 11 没学 11. 12
11.13&11.14 复习京东顶部导航练习。
11.16&11.17 电影卡片练习 CSS：
11.18
关键帧：
格式示例： @keyframes 关键帧名{ from表示动画开始的位置 可以用0%{ /*from表示动画*/ margin-left:0; background-color:orange; } /*to动画的结束位置 可以用100%*/ to{ background-color:red; margin-left:700px; } }animation-name:设置关键帧名
animation-duration：动画的执行时间
animation-delay：动画的延时
animation-timing-function：和过渡一样
animation-iteration-count：动画执行的次数（可以写次数，也可以写infinite）
animation-direction：指定运行方向，可选值：
normal：默认，从from向to运行，每次都如此reverse：从to向from运行，每次都如此alternate：从from向to运行，重复执行动画时反向执行alternate-reverse：同理animation-play-state：设置动画执行状态（running/paused） （可以用paused设置鼠标移入则动画暂停的效果）
animation-fill-mode：动画的填充模式，可选值：
none：默认 动画执行完毕元素回到原来位置forwards 动画执行完毕元素会停止在动画结束的位置backwards 动画延时等待（delay）时，元素就会处于开始位置both 结合了forwards 和 backwards11.19 CSS：
变形：通过CSS改变元素的形状或位置，不影响页面布局。 transform设置元素的变形效果。 设置变形原点：transform-origin:值 值（水平和和垂直） （默认值为center） 以下为属性值：
平移： translateX() 沿着x轴方向平移translateY() 沿着y轴方向平移translateZ() 沿着z轴方向平移 （平移元素，百分比相对于自身计算） 示例： transform:translateY(100px); transform:translateX(-50%); z轴平移： 调整元素和人眼之间的距离，距离越大，元素离人越近。 想要让z轴平移的效果体现出来，必须设置网页视距。 如果想要做3D效果，必须加视距perspective。 html{ perspective:800px /*设置当前网页的视距为800px，指人眼距离网页的距离，该距离在600~1200为宜*/ body:hover .box{ transform:translateZ(800px); /*此时就相当于box“贴脸上了”，会占满整个浏览器的页面*/ } } 旋转：通过旋转可以使元素沿着x、y或z旋转指定的角度： rotateX()、rotateY()、rotateZ()括号内的值可以是角度（deg），也可以是圈数（turn）transform后可以跟多个旋转的属性，不同属性的先后顺序会对效果产生影响。 transform: rotateY(180deg) translateZ(400px); transform: translateZ(400px) rotateY(180deg) ; /*二者的显示效果不一样，前者离我们边远，后者离我们变近*/ backface-visibility可以调整是否显示元素的背面，属性值有visible和hidden。 缩放： scaleX()水平缩放 scaleY()垂直缩放 scale() 双向缩放scaleZ 较特殊，只有设置了transform-style:preserved-3d（3d变形效果）才能体现，会拉长z轴（垂直显示屏的轴），想象“腊肠狗”。11.20 CSS：
（CSS熟练后再考虑less）
less简介：是CSS增强版，可通过更少代码实现更强大的功能；新增了对变量和对mixin的支持；语法大体上和css一致，浏览器需要先将less转换为css再执行。在Vscode上安装插件Easy-less。之后写less，保存时会自动生成css文件。less书写的格式： .box1{ background-color: #bfa; .box2{ background-color: #ff0; .box4{ color: red; } } .box3{ background-color: orange; } }其编译为css代码如下：
.box1 { background-color: #bfa; } .box1 .box2 { background-color: #ff0; } .box1 .box2 .box4 { color: red; } .box1 .box3 { background-color: orange; }变量（和C的#define类似）
用@变量名 定义变量。直接使用：以@变量名 的形式使用。作为类名，或者一部分值使用时以@{变量名}的形式使用。（url里必须加引号） @c:box6; .@{c}{ width: @a; background-image: url("@{c}/1.png"); }变量重名时，优先使用比较近的变量。
可以在变量声明前使用变量。
建议将变量集中定义。
继续补充：
关于注释：//是不会被编译的注释（单行），/**/是会被编译的注释（多行）。&表示外层的父元素。 .box1{ .box2{ color: red; } >.box3{ color: red; //为box3设置一个hover &:hover{ color: blue; } } //为box1设置一个hover //& 就表示外层的父元素 &:hover{ color: orange; } //此处对应div .box1 div &{ width: 100px; } }对应的CSS是：
.box1 .box2 { color: red; } .box1 > .box3 { color: red; } .box1 > .box3:hover { color: blue; } .box1:hover { color: orange; } div .box1 { width: 100px; } :extend() 对当前选择器扩展指定选择器的样式（选择器分组）这个方法比下边的方法的代码要简洁。
.p1{ width: 100px; height: 200px; } .p2:extend(.p1){ color: red; } /*相当于p2在p1的基础上“拓展”*/css代码如下：
.p1, .p2 { width: 100px; height: 200px; } .p2 { color: red; } 直接对样式的引用（样式的复制） 这种方式也称为mixin，混合函数。 .p1{ width: 100px; height: 200px; } .p3{ /*直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制*/ .p1;/*也可以写成p1()，即不含参数的混合函数*/ color:red; }css代码如下：
.p1{ width: 100px; height: 200px; } .p1{ width: 100px; height: 200px; color:red; } 混合函数 //混合函数 在混合函数中可以直接设置变量 .test(@w:100px,@h:200px,@bg-color:red){ width: @w; height: @h; border: 1px solid @bg-color; } div{ /*调用混合函数，按顺序传递参数*/ /*.test(200px,300px,#bfa);*/ .test(300px); /* .test(300px, 100px, red);*/ /* 传值必须要按顺序，如果不按顺序，也可以这样写： .test(@bg-color:red, @h:100px, @w:300px) */ } * average：颜色取平均值 span{ color: average(red,blue); } * darken：颜色加深 body:hover{ background-color: darken(#bfa,50%); } less中可以做加减乘除的运算。可以引入其它的less文件，以达到模块化的效果。 //import用来将其他的less引入到当前的less //可以通过import来将其他的less引入到当前的less中 @import "syntax2.less"; .box1{ // 在less中所有的数值都可以直接进行运算 // + - * / width: 100px + 100px; height: 100px/2; background-color: #bfa; } 配置vscode插件，从此ctrl+s保存less的时候会生成对应.css.map，在浏览器使用“检查”功能时可以看对应在less代码中的行数（而不是css）。 （第130集有配置vscode插件的方法）弹性盒子，即可以伸缩的盒子。 弹性盒子由两部分组成：外层叫弹性容器，它的子元素（只是子元素，不是后代）是弹性元素。 弹性盒子可以嵌套，一个元素，可以同时是弹性容器和弹性元素。
主轴：弹性元素的排列方向称为主轴。侧轴：与主轴垂直方向的称为侧轴。设置弹性盒子的方法：开启了display:flex（块级弹性容器）或inline-flex（行内块弹性容器）的便是弹性容器，子元素为弹性元素。弹性容器的属性： flex-direction 指定容器中弹性元素的排列方式 可选值： row 默认值，弹性元素在容器中水平排列（左向右） - 主轴 自左向右 row-reverse 弹性元素在容器中反向水平排列（右向左） - 主轴 自右向左 column 弹性元素纵向排列（自上向下） column-reverse 弹性元素方向纵向排列（自下向上） 弹性元素的属性： flex-grow 指定弹性元素的伸展的系数 规定当父元素有多余空间的时，子元素如何伸展。 父元素的剩余空间，会按照比例进行分配。flex-shrink 指定弹性元素的收缩系数 规定当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩。 设置为0则不收缩。flex-basis 指定元素在主轴上的基础长度，如果主轴是横向，则指定元素宽度；否则指定元素高度。默认值是auto，表示参考元素自身的高度或宽度；如果传递了具体的数值，则以该值为准。flex 可以设置弹性元素的以上三个样式：（有顺序） flex 增长 缩减 基础（也可以用下面三个值） initial “flex: 0 1 auto”. auto “flex: 1 1 auto” none “flex: 0 0 auto” 弹性元素没有弹性属性常用nth-child()来设置：
li:nth-child(1){ background-color:#bfa; flex-grow: 0; flex-shrink: 1; } li:nth-child(2){ background-color: pink; /* flex-grow: 2; */ flex-shrink: 2; } li:nth-child(3){ background-color: orange; /* flex-grow: 3; */ flex-shrink: 3; }弹性容器上的样式
flex-wrap：设置弹性元素是否在弹性容器中自动换行 可选值：nowrap：默认，不换行 wrap：元素沿着侧轴方向自动换行 wrap-reverse：元素沿着侧轴反方向换行flex-flow：是wrap和direction的简写属性例： flex-flow: row wrap;
justify-content：决定如何分配主轴上的空白空间（或主轴上的元素如何排列） 可选值：flex-start：默认值 元素沿主轴起边排列 flex-end：元素沿主轴终边排列 center：元素居中排列 space-around：空白分布到元素两侧（中间空白是边缘处空白的两倍） space-evenly：空白分布到元素单侧（每个空白大小一样） space-between：空白均匀分布到元素间 （左右两侧没有）
align-items：决定元素在侧轴上如何对齐（元素间的关系） 可选值：stretch：默认值 将元素的长度设置为相同的值 flex-start：元素不拉伸，沿侧轴起边对齐 flex-end：沿侧轴的终边对齐 center：居中对齐 baseline：基线对齐
align-self：对单个元素使用，用来覆盖当前弹性元素上的align-items，属性值和上面相同。 例如： li:nth-child(1){ align-self:stretch; }
“viewport”意思为视口，width=device-width意思为CSS像素和物理像素的比值会根据设备宽度进行适配（一般1个css像素对应2或3个物理像素）←（一维，不是面积） 最后一句话意思是默认倍数为1（确保能够正常显示），写移动端页面时一定要加上这句话。
11.22
在移动端内，不用px不布局，而是使用vw。1vw=%1视口宽度。设计图宽度：由于1个css像素对应2或3个物理像素，为了避免图片放大失真，参照iphone6的完美视口375，设计图的宽度一般为750或1125。vw的适配：借助rem，推荐以下方式： html{ font-size: 26.667vw; /* 此时1个rem代表200物理像素的大小，由于1个css像素对应2个物理像素，所以显示效果1rem=100css像素的大小。 */ } .box{ width: 3.75rem; height: 3.75rem; background-color: #bfa; }到这里，H5和CSS3的新知识告一段落，开始做练习，进而学习JS。
2.3回来补充，响应式和媒体查询：
响应式布局：
网页可以根据不同的设备或窗口大小呈现出不同的效果使用响应式布局，可以使一个网页适用于所有设备响应布局的关键就是 媒体查询通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式媒体查询：
语法： @media 查询规则{}媒体类型： all 所有设备 print 打印设备 screen 带屏幕的设备 speech 屏幕阅读器可以使用,连接多个媒体类型，这样它们之间就是一个或的关系 可以在媒体类型前添加一个only，表示只有，添加and，表示与。 only的使用主要是为了兼容一些老版本浏览器，没有其他作用。因为老版本浏览器不认识only，就不会执行后边的代码，如果不加only，它能够识别，但也许不能正常显示。媒体特性： width 视口的宽度 height 视口的高度 min-width 视口的最小宽度（视口大于指定宽度时生效） max-width 视口的最大宽度（视口小于指定宽度时生效）样式切换的分界点，称其为断点，也就是网页的样式会在这个点时发生变化
一般比较常用的断点:
小于768 超小屏幕 max-width=768px大于768 小屏幕 min-width=768px大于992 中型屏幕 min-width=992px大于1200 大屏幕 min-width=1200px媒体查询演示：
<style> @media only screen and (min-width: 500px) and (max-width:700px){ body{ background-color: #bfa; } } </style>前端之路漫漫…
