第一阶段
本教程缺失一些不常用的知识，以后见到了再学
html标签（上）
浏览器内核
（又称渲染引擎）负责读取网页内容，整理信息，计算网页的显示方式并显示页面
Web标准
由W3C规定，规定了不同浏览器解析出的效果基本一样，
三大部分：结构（整理），表现（外观样式），行为（交互）
标准提出的最佳体验方案：结构，样式，行为分离！！！！！
可以简单理解为分别对应H C J
语义：strong em del ins
图像标签：src alt title width height border
超链接：href（#空连接 指向文件可以下载 视频） target(_self _blank)
锚点链接：href（#id）
记得加分号
html标签（下）
表格：展示数据，而不是布局页面！
table : tr : th/td
table属性：align border cellpadding(内容与边框) cellspacing(单元格间的缝隙) w h
thead tbody语义化 （thead是区域，th是表头单元格）
合并单元格：rowspan（行）colspan（列）这里作为属性colspan=”2”占据两个行/列
也可以使用colgroup和col巴拉巴拉
列表：用来布局！无序，有序，自定义
ul只准放 li，但li里可以放任意 ol同上
自定义列表常用于对术语或名词进行解释或描述
dl（不能放别的） dt（名词）dd（用来说明的小弟） 但是dt和dd是兄弟关系！
表单：收集用户信息，主要交互之一
分为表单域，表单控件（表单元素），提示信息
表单域：包含表单元素的区域，把范围内的表单信息提交给服务器
form action：指定接受并处理表单数据的服务器程序的url
method get/post这是REST规范吗？
name 表单域名称
表单控件：
input：输入表单元素
单标签，必选属性type=“”
提示直接写在input标签前面:
<form> 男 <input type="radio"name="gender"> 女 <input type="radio" name="gender"> <input type="submit" value="免费注册(显示的内容)"> <input type="reset" value="重新设置(显示的内容)"><!--回到默认--> </form>name: input元素的名称 单/复选框通过该属性合并
value：input属性的值，输入前默认值（不是提示语），按钮的value是送到后台的数据
placeholder：设置提示词，一输入就消失
name和value主要给后台人员使用
checked：针对单/复选框，设置成默认勾选checked
maxlength：正整数
select：下拉表单元素,至少包含一对option
<form> <select> <option>山东</option> ............ </select> </form> <!-->可以在option中定义selected=“selected”来选为默认选中项<-->textarea：文本域元素（大量输入文字，多行文本输入）
<form> 今日反馈： <textarea cols="50" rows="5"> 哇哦（这就是默认文本） </textarea> </form> <!-->一般cols和rows没人用，都是用CSS来搞！！
label：搭配input使用，绑定一个表单元素，点击lable里的文本时，浏览器自动聚焦到相应表单元素
<lable for = "id"> 用户名 <input type="text" id ="id"> </lable>lable>学会查阅文档！
CSS1
代码风格：展开（一行一属性）虽然不区分大小写（除了字符串）单尽量小写
冒号和值之间空格，选择器和 { 间加个空格
字体：
font-family：“宋体”可以，但由于兼容性不好，最好用英文写
font-family: “Microsoft Yahei”,…..依次向后检索，用逗号分隔，但是多个单词组成的最好引号包起来
尽量使用系统默认自带字体，一般给body指定好看的
font-size：px像素，谷歌默认16px，标题标签比较特殊，需要单独指定文件大小，即使是子标签
font-weight：好多属性。。更提倡使用数字
font-style：normal italic
复合属性：font
style weight size/line-height family 但是必须有size和family？
此处这个line-height可以不加单位，如1.5 则继承的子元素默认行高为当前字体大小的1.5倍
文本
color: 关键词 十六进制 rgba
text-align
text-decoration: underline none overline line-through
text-indent 首行缩进
line-height （行高）= 上+下+字高
Emmet
前身为Zen coding，用来缩写提高html/css速度，vscode集成该语法
html骨架：
- []可以填充自己需要的属性，值无空格就不用引号
- $$$连用则是001，002.。。
- $后面加@-3*5表示逆序，终点为3，一共五次
- 为空格是Emmet停止缩写解析的停止符号，不要用来增加可读性
- :+值！
css标签：
每个单词第一个字母+值（可不加单位，用默认）直接tab
tac -> text-align: center;
lh26 -> line-height: 26px;
这种链接伪类先后顺序被称为 LVHA 顺序：:link — :visited — :hover — :active。
常用*:hover
:focus，选择获得光标的元素，可用于表单
CSS元素显示
display
垂直居中：行高等于盒子高度就可以，line-height = height
背景
background-color(默认transparent) 单用一个rgba（0，0，0，0.3）;调整背景颜色透明度，而不影响别的
background-image(便于控制位置)
background-repeat:repeat,no-repeat,repeat-x/y
background-position: 方位词(tcblcr) length(具体/百分比)x和y(默认center)
background-attachment:fixed(固定在视口),scroll(默认，固定在页面),local(固定在元素)
简写：无顺序要求，有约定顺序：
颜色 图片地址 平铺 滚动 位置
opacity: 影响全部！
CSS三特性
层叠性：同级后覆盖前
简写的后面覆盖前面，并不会选择不冲突的覆盖，而是全部覆盖！！！！！
继承性：子元素可以继承父元素的部分样式（text-,font-,line-这些开头的可以继承，以及color）
优先级：
一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：
千位： 如果声明在
style的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。百位： 选择器中包含ID选择器则该位得一分。
十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素、伪元素选择器则该位得一分。
注: 通用选择器 (*)，组合符 (+, >, ~, ‘ ‘)，和否定伪类 (:not) 不会影响优先级。
警告: 在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。
有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — !important。
这是个属性值！！用于修改特定属性的值， 能够覆盖普通规则的层叠。
继承也不会影响优先级，有些浏览器给予默认样式的如a{}相当于个位，所以比继承高
后代选择器权重叠加
页面布局
盒子
边框:
border-width 粗细
border-style 样式
border-color 颜色
简写：border: width style color 决定顺序，非强制
也可以border-tlrb：。。。
border-collapse collapse 合并相邻的边框 separate独立（重合会都显示（如加粗））
padding-left…..
直接padding就是那种：
1个：全部 2个：上下 左右 3个：上 左右 下 4个：上右下左
加padding会撑大盒子，而content内容不会变
如果width没指定，则padding会压缩content，但只要指定，即使width=100%也会撑大，高度也一样
块级元素子元素原本就和父元素一样宽，上面那条规则适用
margin-top。。。
margin简写同上。。。。
两个嵌套关系（父子）块元素在top有外边距，保留大的作为父元素的外边距，（塌陷）
补充外边距合并及其解决方案：https://blog.csdn.net/songyi160/article/details/87891222
浮动盒子不会有该问题!!!!
解决方法：
- 父元素加上边框
- 父元素加上内边距
- 父元素加overflow：hidden
块级盒子水平居中：
- 必须设定一个width
- 设定左右外边距为auto就行，一般是 margin: 0 auto;
行内/行内块水平居中：
- 给父元素text-align:center
浏览器有默认内外边距，而且有时候不一样，清除：
在最第一行用*{margin:0 ; padding: 0}
行内元素尽量只设置左右，上下没效果
ps
css3新盒子属性
CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
1个值:全部 2个：左上右下 右上左下 3个：左上 右上左下 右下 4个：左上开始顺时针
百分比是相对于宽度和高度的，高度一半就变成操场哈哈
也可以俩值 a/b或是分别指定椭圆的长轴和短轴
也可以分开：border-top-left-radius:
盒子阴影(box-shadow)
但只准写inset不能写outset！！影子不占空间
其中blur代表模糊程度
spread代表对模糊范围的等密度放缩
文字阴影：（text-shadow）
h-shadow v-shadow blur color
css三种传统布局方式
- 普通流/标准流/文档流（标签按规定好的默认方式排列，块/行内这些规则）（最基本）
- 浮动
- 定位
实际开发中，一个页面基本包含了这三种布局方式（移动端有新的）
浮动
一个准则：块级元素纵向选标准流，横向用浮动
float属性用于创建浮动框，将其移动到一边，直到左/右边缘触及 包含块 或 另一个浮动框 的边缘
float : none（默认） left right
三个主要特性：
- 浮动元素会脱离标准流（脱标），不再占用原来的位置
- 浮动元素会一行内显示，不会有缝隙（可用margin），并且元素顶部对齐
- 浮动元素会具有Inline-block元素的特性
浮动元素经常和标准流父级搭配使用！，先用标准流父级划分大模块，实现纵向布局
浮动只会影响浮动盒子后面的标准流，不会影响前面的标准流！！！！
清除浮动：
若父盒子没指定高度，子元素浮动时高度则没高度了，
clear： left right both（几乎只用both）策略是：闭合浮动
四方法：
额外标签法（隔墙法），W3C推荐
在后面添加一个新标签（必须是块级元素），并且添加clear属性
其实是这个空的块级标签左右不能有浮动，所以它把父级撑开了罢了
多了无意义标签，结构化较差
父级添加overflow属性：hidden/auto/scroll
overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是
overflow-x和overflow-y的 简写属性 。（这只是把溢出隐藏了，不推荐）父级添加：：after伪元素（结构简单，比较常用，上流）
.clearfix::after{ content:""; display: block; /*必须*/ height: 0; clear: both; visibility: hidden } .clearfix{ *zoom:1 /*使兼容IE6.7*/ } 然后给盒子加上clearfix类父级添加双伪元素(代码更简介，腾讯用)
.clearfix::before .clear:after{ content:""; display: table; } .clearfix::after{ clear: both; } .clearfix{ *zoom:1 <!--使兼容IE6.7--> }
*BFC
https://blog.csdn.net/sinat_36422236/article/details/88763187
PS切图
图层切图
找到PSD其中的图片，快速导出为PNG
按住shift选择多个，->图层菜单->合并图层（Ctrl+E），导出（合并完不能分开/。。）
切片切图
（长按裁剪工具选择切片）切片工具选择区域->文件->导出选中的切片（存储为web所用格式JPEG好）
透明格式是拉到最底，把背景去掉（显示为黑白网格），导出为png或gif格式的
PS插件切图
Cutterman是插件，自动将需要的图层输出
用辅助线帮忙，左边拉俩线，再用选框工具量！
小项目
css属性建议书写顺序
当好多一排里的元素都有margin-right然后装不下时，可以让父元素大一点，这样最边上的元素能装下，而margin看不见所yi没关系
favicon.ico图标
- 制作，先制作png图片，可以用比特虫啥的转为ico文件
- 放到根目录的某处
- 然后引入
<link rel="shortcut icon" href="url"?>
SEO优化
TDK三大标签
虽然有专门的SEO人员，但是前端也要做好一些工作
title
不可替代的第一个超重要标签
建议：网站名（产品名）-网站介绍（尽量不要超过30个汉字）
如：京东(JD.COM)综合网购首选-正品低价-品质保证-配送及时-轻松购物
description
简要说明网站主要是做什么的 一般由SEO准备这些内容，前端复制就好了
keywords
是搜索引擎重要的标准，最好限制为6-8的关键词，中间用英文逗号隔开，展示最重要的产品或功能
logo优化
所以这个a应该和logo块一样大，要改成block，h1可以不用设置
定位
浮动可以让多个块级盒子横向排列
定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置，而且可以压住其他盒子。
类别
*定位组成
定位：即把盒子定在某个位置
定位=定位模式+边偏移
定位模式(position)：
static(静态) relative(相对) absolute(绝对) fixed(固定)
边偏移：定位的盒子移动到最终位置，有top bottom left right四个属性
静态定位(static):
默认定位方式，按照标准流特性摆放，他没有边偏移。
静态定位在布局时很少用到
相对定位(relative)：
元素移动位置时相对它原来的位置来说的。参考点是自己原来的位置！
它走了以后它的位置仍会保留，并未脱离标准流。
它最典型的应用是作为绝对定位的父元素
绝对定位(absolute):
元素移动位置时，以父元素为基准
如果没有祖先元素，或祖先元素没有定位，则以浏览器为准定位（Document文档）
如果祖先有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动位置
绝对定位会脱标，不占有原来的位置，覆盖下面的任何盒子（甚至浮动）
子绝父相是通常，当然不是绝对的，只是用的多
固定定位(fixed)：
- 以浏览器的可视窗口作为基准！
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不再占有原先的位置，可看为特殊的移动定位
固定定位小技巧：固定在版心右侧位置
- 让固定定位的盒子left：50% 走到浏览器可视区（版心的一半）
- 让固定定位的盒子margin-left：版心宽度的一般距离+一点点空隙
粘性定位 (sticky):
粘性定位可以被认为是相对定位和固定定位的混和，特点：
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 占有原先的位置（相对定位特点）
- 必须添加tlrb中的一个才有效
跟页面滚动搭配，兼容性一般般，IE不支持，去尼玛的破IE
叠放次序
用z-index来控制前后次序
z-index: ..
- 数值可以是正负整数/0（无单位），默认auto（当前级别为0），数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序层叠
- 只有定位的盒子才有z-index属性
定位拓展
绝对定位的盒子居中
不能再用margin：0 auto
left:50% margin-left: - 1/2*self-width垂直类似
特殊的特性
- 行内元素添加绝对/固定定位，可以直接设置高度和宽度
- 块级元素添加绝对/固定定位，如果不给宽度或高度，默认大小是内容大小
- 浮动元素/绝对/固定定位都不会触发外边距合并的问题
浮动的元素不会压住下面标准流的文字（最初浮动产生的目的就是做文本环绕效果）
但是绝对定位/固定定位会压住所有内容
如果一个盒子既有left属性又有right属性，两者不是重叠，会默认left，同理，默认top
用并集选择器减少代码重复
再单独增加特殊的，或用类思想
元素显示/隐藏
display 显示隐藏
none隐藏对象 两者对立 block还有显示元素的意思
隐藏后，不再占有原来的位置！
visibility 显示隐藏
默认inherit visible hidden collapse(不常用)仍保留原来的位置！
overflow 溢出显示隐藏
hidden scroll(一直滚动) visible auto(需要时滚动)
CSS高级技巧
精灵图
Sprites
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要请求一次就好了
- 精灵技术主要针对于背景图片使用，其他图片可能更换频率高，不适合使用
- 这个大图片也成为sprites精灵图/雪碧图
- 主要通过background-position来显示部分。。
- 就是要盒子和移动距离刚好合适。。真麻烦
- 用ps的框选，打开窗口里的信息，查看x和y坐标，则位置就是-x,-y巴拉巴拉
字体图标
iconfont
为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体
icomoon的使用方法
选好，（编辑）下载成一个压缩包并解压
将fonts文件夹放到html文件根目录，4个字体文件是为了兼容所有噢！
在CSS样式中全局声明字体，打开icomoon文件夹，复制“style.css”里的代码到css里，
复制到
font-display:block为止，记得更改到fonts的路径在icomoon的demo.html文件查看对应代码最右边的小方框，粘贴就好了,也可以（\+编码）
在对应的标签加入样式里的
font-family:'icomoon';其他文字属性仍然可用追加，若原账户则默认存储，未保存则import icons，把selection.json文件上传，再继续挑选，仍然生成，这样会生成新的文件，替换原来的文件就好了
阿里的symbol引用
确实挺好用的吧，先打开demo.html文件，复制生产的js和css代码，然后将类改成它提供的就好了，只是注意要改一下文件路径！
三角形
如果一个盒子没有大小，只有边框，且颜色不同，则可以发现边框竟然是4个三角形
所以如果三个边框透明，只留下一个边框就可以做出一个三角形，大小取决于边框尺寸
div{
width:0;height:0;
border: xxpx solid transparent;
line-height:0;font-size:0;/*这行是兼容性*/
border-left-color:pink;
}底边是border尺寸*2，要完全出去就是移动这么多
CSS用户界面样式
一些技巧
鼠标样式
cursor : default pointer move text not-allowed
**input{outline : none}**不会出现默认的蓝色框
同样可以用于文本域等其他出现了该现象的元素们
文本域原本右下角可以拉大，取消：
textarea{resieze: none;}
textarea如果俩标签分行写输入时会有一个padding？
vertical-align（块级元素没有）
文本域也是行内块，也可以用
图片默认是与文字基线对齐
可以改成bottom/top/middle来改掉图片和边框间的空白缝隙，或者改成块元素
单行文字溢出省略号表示
/*1.先强制一行内显示文本，默认(normal自动换行)*/
white-space: nowrap;
/*2.超出部分隐藏*/
overflow:hidden;
/*3.修改文本溢出样式*/
text-overflow : ellipsis;多行文字溢出省略号表示
有较大兼容性问题，适合于webKit浏览器或移动端
overflow:hidden;
/*弹性伸缩盒子显示*/
display: -webkit-box;
/*限制在一个块元素内显示的文本行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒对象的子元素排列方式*/
-webkit-box-orient:vertical建议后台人员来做这个效果，操作更简单
常见布局技巧
margin负值运用
原本浮动的盒子会发生边框加粗，可以用margin的负值使其重合
但是hover时会发生边框覆盖属性，可以在hover里面改成相对定位，压住其他标准流和浮动，但如果其他li都设置了定位，就用z-index来提高层级
文字围绕浮动元素
大盒子里放一个小浮动盒子，文字会被挤到一边就好了
行内块的巧妙运用
就是一排盒子嘛。。。
css三角强化
自由决定各方向边框的尺寸，如果缺少某底边，那左右两边会被截成一半，就这样构造出各种三角形，有些可以直接去掉，尺寸变为0，有些必须存在以辅助构建三角形，把颜色改成透明,格式：
border-color:transparent red transparent transparent/*右边红*/ border-style:solid border-width 100px 50px 0 0;/*高100，宽50*/CSS初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化 CSSreset
每个网页都必须首先进行CSS reset
把字体如“宋体”转化成Unicode编码就不会有兼容性问题
如黑体\93d1\4f53
宋体\5b8b\4f53
微软雅黑\5FAE\8F6F\96C5\9ED1
HTML5新增
针对以前的不足，增加了新的标签，表单，表单属性。。
新特性大多存在兼容性问题，但是时代在发展
语义化标签
- 都是块级元素
- 针对搜索引擎，都可以在页面中多次使用
- 在IE9中要把这些转化为块级元素
- 移动端更喜欢使用这些标签
多媒体标签
video
<video width="" height="" controls>
<source src ="" type = "video/mp4">
<source src ="" type = "video/ogg">
您的浏览器不支持video标签
<!--依次向下检索，最后显示文字，处理兼容性问题-->
</video> | 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。(谷歌要加muted) |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | muted | 如果出现该属性，视频的音频输出为静音。 |
| poster | URL | 规定视频正在下载时显示的图像，直到用户点击播放按钮。 |
| preload | auto metadata none | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 |
| src | URL | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
真正开发不用controls，用js自己搞控件
兼容性写法同上
音频Audio
除了width，height，poster都有，而且谷歌也把音频自动播放禁了
新input
都必须放在form域里噢
type =email url date time month week number显示用户输入类型
当输入不正确时，会自动提示不正确，尤其在手机端优化的很好
tel 手机号码
search搜索框
color生成一个颜色选择表单
新表单属性
requried required 必须输入
placeholder 显示文字
可以调样式
input::placeholder可以选中placeholder但是它的边距其实也是文本的边距，直接调input内边距就好了
autofocus autofocus 自动聚焦
autocomplete on（默认）/off 显示历史填写，必须加上name同时成功提交过，一般改成off
multiple multiple 可以多选文件
CSS3新特性
都有兼容性问题，ie9+才才支持
移动端支持优于pc端
不断改进中
应用相对广泛
选择器
新增了属性选择器，结构伪类，伪元素。。
我直接把另一个汇总复制过来吧
当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。
但是在被组合起来以后，整个规则都会失效，无论是h1还是这个class都不会被样式化。
这组选择器包含了伪类，用来样式化一个元素的特定状态。
它还可以包含了伪元素，选择一个元素的某个部分而不是元素自己。
| 选择器 | 示例 | 学习CSS的教程 |
|---|---|---|
| 类型选择器 | h1 { } |
类型选择器 |
| 通配选择器 | * { } |
通配选择器 |
| 类选择器 | .box { } |
类选择器 |
| ID选择器 | #unique { } |
ID选择器 |
| 标签属性选择器 | a[title] { } |
标签属性选择器 |
| 伪类选择器 | p:first-child { } |
伪类 |
| 伪元素选择器 | p::first-line { } |
伪元素 |
| 后代选择器 | article p |
后代运算符 |
| 子代选择器 | article > p |
子代选择器 |
| 相邻兄弟选择器 | h1 + p |
相邻兄弟 |
| 通用兄弟选择器 | h1 ~ p |
通用兄弟 |
a+b - b必须紧跟a后且同级，插入br都不行
a ~b - 选择！后面的！所有兄弟
将所有类连成一串代表匹配包含所有这些类的元素
.a.b.c{}匹配同时含有a,b,c类的标签
<li class ='a b'>此处li拥有a和b类</li>属性
| 选择器 | 示例 | 描述 |
|---|---|---|
[*attr*] |
a[title] |
匹配带有一个名为attr的属性的元素——方括号里的值。 |
[*attr*=*value*] |
a[href="https://example.com"] |
匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。 |
[*attr*~=*value*] |
p[class~="special"] |
匹配带有一个名为attr的属性的元素 ，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。注意，在一列中的好几个值，是用空格隔开的。 |
| `[attr | =value]` | `div[lang |
子字符串匹配选择器（类似正则）
| 选择器 | 示例 | 描述 |
|---|---|---|
[*attr*^=*value*] |
li[class^="box-"] |
匹配带有一个名为attr的属性的元素，其值开头为value子字符串。 |
[*attr*$=*value*] |
li[class$="-box"] |
匹配带有一个名为attr的属性的元素，其值结尾为value子字符串 |
[*attr**=*value*] |
li[class*="box"] |
匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。 |
如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用i值。
li[class^="a" i] {
color: red;
}结构伪类：
:first-child last-child nth-child（n）
:first-of-type last-of-child nth-of-child(n)
n可为数字，关键字（odd/even）或公式（不是从0开始！）
如果真的写一个n则从0开始自增查找，依次添加css格式，依次可以衍生其他公式
5n，选择5的倍数 n+5,从第五个开始选 -n+5前五个
nth-child 和 nth-of-type区别
nth-child是先看序号，再看是否满足标签，会给所有的盒子部分种类先排个序
nth-of-type则是先看标签，再给这些标签排序号
还有用户行为伪类（结构伪类），有时叫做动态伪类
伪元素原则器
通过css创建新标签元素，不需要HTML标签，从而简化HTML结构
以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。
是在父元素的里面创建的，content=””，这样啥都不加就不会有子，但一定要有
备注：一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。
遮罩层的顺序竟然是.tudou:hover::before{}，。。。
div:hover .class 是鼠标经过div时里面的class类子元素变化
*过渡
CSS3颠覆性的特征之一，可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
ie9以下版本不支持但不会影响页面布局
如果想要多个属性，使用逗号分隔
transition: 属性 时间 运动曲线 何时开始,具体如下：
transition-property -duration -timing-function -delay
属性：宽度高度背景颜色内外边距，若全部就写all
时间：单位是 秒（必须写单位）
运动曲线：
值 描述 linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。(默认是ease) ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 何时开始，必须有单位 秒，可以设置延迟触发时间，默认是0s（可以忽略）
其他新的
新盒子
图片模糊（滤镜）
filter属性有很多提供给UI人员的值
filter:blur(15px)数值越大图像越模糊,0则不模糊，blur是个函数噢
calc函数让开发者在声明值时执行一些计算(+ - * / )
比如：calc(100%-30px)
还增加了一些动画 2D 3D等特性
ps：肝了一天案例，在另一篇博文里
我的网站地址：http://darrenisme.usa3v.vip/
第二阶段
2D转换
transform 位移，旋转，缩放，不过是二维的哟
配合transition牛逼极了
translate(x,y) 在x，y轴上移动的位置
或translateX(n) translateY(n)
所以水平垂直居中就可以:
position: absolute left:50% top:50%
transform : translate(-50%, -50%)
rotate
可以用边框旋转来弄出三角哈哈哈哈
旋转中心点
transform-origin : x,y
可以是百分比，像素值，关键词tblrc
案例：
overflow:hidden 默认转90 hover时转上来
scale
transform:scale(x,y);
里面的参数是不跟参数的数字，表示倍数
综合写法
注意顺序，如果先旋转后位移，则位移是按照旋转瞬间的角度位移的
动画
animation 颠覆性
duration 单位是秒 s 或毫秒ms
属性一览
animation - play -state 应该是paused
经常与hover 配合使用 就可以鼠标放上去就停止，鼠标离开继续走
注意时间如果有俩 必然先是持续时间 后是何时开始
steps可以做出诡异的效果👇
可以用那种做出那种连续动画的效果，准备好不同动作的图片就好了
热点图案例
大致结构（1个城市）
city相对定位到小圆点除
先放1个小圆点，再放几圈波纹
css波纹
动画效果
pink用的是 0%- 70%长宽变大，透明度不变，70 -100 长宽变大 ，透明度变为0，scale会导致阴影本身也变大
然后选择匀速，无限循环 小心权重问题
然后单独给后面几个加上delay 注意间隔相等。比如一共1.2秒 3个波纹 则第二个0.4 第三个0.8
元素可以添加多个动画，用逗号分隔
3D！！！
透视原理图
这个沿着。。其实是以。。为轴
方向正负可以用左手。。大拇指指向某轴正方向，。。。
rotate3d(x,y,z,deg) 其中xyz表示旋转轴矢量
这个3d旋转也可以使用 transform-origin: 但是z轴属性必须用<length>,没有关键字
盒子选择案例：
他这种做法比较好，比起更改甚么旋转轴来说
还有一个属性perspective-origin 可以更改视角，而不是简单的就是沿着z轴看过去
旋转木马
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<style>
body {
perspective: 1200px;
}
section {
position: relative;
width: 200px;
height: 185px;
margin: 500px auto;
transform-style: preserve-3d;
animation: rotate 4s infinite linear;
background: url(1.jpg) no-repeat;
background-size: cover;
}
section:hover {
cursor: pointer;
animation-play-state: paused;
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
section div {
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: url(example.jpg) no-repeat;
border: 1px solid blue;
background-size: cover;
}
section div:nth-child(1) {
transform: translateZ(500px);
}
//这里是先转了个角度，然后轴也跟着变化了，Z轴表示各个图正对的，直接走就好了
section div:nth-child(2) {
transform: rotateY(60deg) translateZ(500px);
}
section div:nth-child(3) {
transform: rotateY(120deg) translateZ(500px);
}
section div:nth-child(4) {
transform: rotateY(180deg) translateZ(500px);
}
section div:nth-child(5) {
transform: rotateY(240deg) translateZ(500px);
}
section div:nth-child(6) {
transform: rotateY(300deg) translateZ(500px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
浏览器私有前缀
因为制定HTML和CSS标准的组织W3C动作是很慢的。
通常，有w3c组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但w3c制定标准，要走很复杂的程序，审查等。而浏览器商市场推广时间紧，如果一个属性已经够成熟了，就会在浏览器中加入支持。
为避免日后w3c公布标准时有所变更，加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性。
等到日后w3c公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。
移动端见另一篇博文~~~
