最全的(前端知识)汇总，以便自身复习

由于篇幅过于长，知识体系过于庞杂，请谨慎学习, 转述的我都有放置链接(难理解的也放了demo测试或者图) 简单的csss3属性将不再详解

技术规范(基础了解,大佬尽可跳过)[本文持续性优化(增删改查)内容，更改排版(多提意见)]

HTML/CSS学习，强势推荐该网站，诸多例子仅供参考

HTML4>>>>>HTML5

官网传送门

HTML4是HTML语言的第四次修改，主要是为了适应Pc时代而产生的
HTML5是HTML语言的第五次修改，主要是为了适应移动互联网时代而产生的
HTML5新特性
- 绘画Canvas元素
- 媒体播放的vidoe以及audio
- 本地离线存储的支持
- 语义化标签，比如header\footer\article等
- 新的表单控件，比如input标签的type---->email\url\search等

HTML5和HTML4的区别转载

CSS2>>>>>CSS3

CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。

总结：CSS3与CSS2的不同

css2有的属性css3都有，但是css3有的属性css2不一定有。
css3可以说是css2的进阶，因为css3是在css2的基础上增加了一些新的属性。
- 定义圆角、背景颜色渐变、背景图片大小控制和定义多个背景图片等这个是CSS2上没有的效果

现在新版本的浏览器基本都支持CSS3，比如IE9、FF4+、chrome11+，但是要用CSS3开发网站的话，要考虑的是还在用低版本浏览器的用户

css1 css2 css3 区别

TODO新增清单

W3C传送门

CSS3选择器

属性匹配

属性匹配开头部分

element[foo^="bar"]

属性匹配尾巴部分

element[foo$="bar"]

属性匹配整个部分

element[foo*="bar"]

CSS3伪类所有主流浏览器均支持,除了 IE8 及更早的版本

W3C详解示例传送门翻墙博客

1. :root 选择器匹配文档根元素。 demo
在 HTML 中，根元素始终是 html 元素。(指向HTML,F12检查元素，样式挂载在HTML标签下)
1. 选择----->强调的是位置(指定正序/指定倒序/第一个/最后一个/只有一个）
- :nth-child(n) 选择属于其父元素下的该元素的第n个(n从1开始)
- :nth-last-child(n) 选择属于其父元素下的该元素的倒数第n个(n从1开始) demo
  
  tips:假如其父元素为body,那么n就需要从3开始，因为他会把body/html当作一个标签
- :first-child 选取属于其父元素的首个子元素的指定选择器 demo
- :last-child 匹配属于其父元素的最后一个子元素的每个元素 demo
  
  找父元素下的最后一个元素
- :only-child 匹配属于其父元素下的唯一子元素 demo

1. :选择--->强调类型（指定正序/指定倒序/第一/最后/唯一）
- :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. demo
  
  类似于:nth-child(n)的用法区别用法传送门，多用:nth-of-type(n)
- :nth-last-of-type(n) 同上，n从尾巴开始 demo
- :first-of-type 匹配属于其父元素下的的该元素的第一个 demo--first-of-type
- :last-of-type 匹配属于其父元素下的的该元素的最后一个 demo--last-of-type
- :only-of-type 匹配属于其父元素下的的该元素只有一个 demo--only-of-type
  
  强调的是类型必须是指定的，若不是指定元素即不算数

1. :empty 选择器匹配没有子元素（包括文本节点）demo
只有标签的元素，里面啥都没有，

1. :target 可用于选取当前活动的目标元素 demo
  
  点击有# 锚点的链接，跳转的内容就是为活动的目标元素，可以为其添加样式

6.（大多用在表单元素上input 等）
- :enabled 匹配每个已启用的元素 demo
  
  场景所有已启用的 input 元素设置背景色等
```
input[type="text"]:enabled{
       background-color: #ff0000;
}
```
- :disabled 匹配每个已禁用的元素 demo 同上
- :checked 匹配每个被选中的元素 demo 同上

1. :not(selector) 选择器匹配非指定元素/选择器的每个元素 demo
  
  匹配除了selector里的所有元素

1. ::selection 这是个很有意思的伪类匹配被用户选取的选取是部分 demo
  
  可以修改光标选中部分的样式只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。 IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。 Firefox 支持替代的 ::-moz-selection

CSS3新属性【有许多属性兼容性极度太差，不提及】

兼容性:

-webkit- ====chrome
-ms- ====IE
-moz- ====FF
-webkit- ====Safari
-webkit- ====Opera[以前是-o-]

W3C镇山链接传送门

参考学习

Background背景

新增的Background属性（CSS3新增background-clip/background-origin/background-size）
- background-clip ：指定元素背景所在的区域（四个属性）【点击传送门形象看图】当背景是纯颜色时与图片时，它的显示方式又不一样
  1. border-box：元素的背景从border区域（包括border）以内开始保留(裁剪)
  2. padding-box：元素的背景从padding区域(包括padding)以内开始保留(裁剪)
  3. content-box：元素的背景从内容区域以内开始保留(裁剪)
  4. text：不做介绍，兼容性太差，有兴趣的自行了解参考
- background-origin：规定背景图片的定位区域
  1. border-box：元素的背景从border区域（包括border）以内开始绘制
  2. padding-box：元素的背景从padding区域(包括padding)以内开始绘制
  3. content-box：元素的背景从内容区域以内开始绘制
- background-size：指定背景图像的大小。默认值: auto
  1. cover：按比例调整背景图片，背景图片会按照比如自适应铺满整个背景区域【可能会图片显示不完全】
  2. contain：按比例调整背景图片，使得其图片宽高比自适应整个元素的背景区域的宽高比【背景某些区域可能会有空白】
  3. length/percentage:长度或者百分比

background格外补充

border-box / padding-box / content-box / text 原则上：border>区域就从border开始，padding>区域就从padding开始, content>区域就从content开始, text>区域就从text开始 ========>使用绝大部分属性

background-clip参考转载传送门

background-clip与background-origin区别参考

background-size参考

它们的最根本的区别就是：background-clip 是对背景图片的裁剪，background-origin是对背景图片设置起始点。

对于background-clip, 其关键字是指将背景图片以border的尺寸、以padding的尺寸，以content的尺寸进行切割，其得到的结果是不完整的背景，也就是其中的一部分(原理与截图差不多)。而且有一点要注意，background-clip的切割是对这个容器背景的切割(包括图片与背景颜色)。

对于background-origin，其关键字是指将背景图片放置到border范围内，padding范围内、content范围内，其得到的结果是完整的背景(原理与图片的缩放相似)。与background-clip不同的是，它只是单纯设置背景图片的边界，并不会对背景颜色造成影响。

修改的Background属性
1. background-repeat：具有四个常见的值 repeat、repeat-x、repeat-y和no-repeat【 CSS3新增加了两个属性值 round和space】传送门
  - repeat：背景图片沿容器 X 和 Y 轴平铺。将平铺满整个容器
  - repeat-x：表示背景图片沿容器的 X 轴平铺
  - repeat-y：repeat-y 让背景图片沿容器 Y 轴方向平铺背景图片
  - no-repeat：表示背景图片不做任何平铺，也就是说背景图片有多大，在容器显示出来的效果就有多大
  - round ：背景图像自动缩放直到适应且填充满整个容器
  - space:背景图像以相同的间距平铺且填充满整个容器或某个方向–图片不进行缩放—两边的图像靠边
2. background-attachment：默认值：scroll，具有俩个常见的值fixed，scroll。【CSS3新增local】
  - fixed：背景图像相对于窗体固定
  - scroll：背景图像相对于元素固定，当窗体的内容滚动时，窗体的背景图像会跟着移动。但会随元素的祖先元素或窗体一起移动
  - local：背景图像相对于元素的内容固定。当元素的内容滚动时，背景图像总是要跟着内容一起移动
3. background CSS Background 属性详解参考
简写属性在一个声明中可设置所有的背景属性。简写的顺序如下: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip

注意事项
1. background-position 和 background-size 属性, 之间需使用/分隔, 且position值在前, size值在后。
2. 如果同时使用 background-origin 和 background-clip 属性, origin属性值需在clip属性值之前, 如果origin与clip属性值相同, 则可只设置一个值
```
background-image: 设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;
background-position: 设置背景图像的位置;
background-size: 设置背景图像的大小;
background-repeat: 指定背景图像的铺排方式;
background-attachment: 指定背景图像是滚动还是固定;
background-origin: 设置背景图像显示的原点[background-position相对定位的原点];
background-clip: 设置背景图像向外剪裁的区域;
background-color: 指定背景颜色。
```
tips:background是一个复合属性, 可设置多组属性, 每组属性间使用逗号分隔多组属性背景图像之间存在重叠, 则前面的背景图像会覆盖在后面的背景图像上

边框(Border)

border-radius：CSS3进行扩展border-top-right-radius/border-top-left-radius/border-bottom-right-radius/border-bottom-left-radius--->>>>>>>>>>>>俩个参数：垂直半径与水平半径
border-image：边框样式使用图像来填充 demo>>>>>>>>>>>>>>衍生(不常用border-image【兼容性硬伤】，因此不延伸开来讲，有必要自己了解传送门)
- border-image-outset : 边框图像超过边框的量
- border-image-repeat：stretch 拉伸图像来填充区域 | repeat 平铺 | space 无法完整平铺所有图像 | round 缩放以适应区域 | initial 默认值 | inherit 继承; demo
  
  注意：该属性规定如何延展和铺排边框图像的边缘和中间部分。因此，您可以规定两个值。如果省略第二个值，则采取与第一个值相同的值。
- border-image-slice：图像边框的向内偏移
- border-image-source：规定要使用的图像，代替 border-style 属性中设置的边框样式 demo
- border-image-width：规定图像边框的宽度。

box-shadow:一个或多个下拉阴影添加到框上。属性：h-shadow v-shadow blur spread color inset;

  >>>>>>>>>>>h-shadow：必需的。水平阴影的位置。允许负值
  >>>>>>>>>>>v-shadow：必需的。垂直阴影的位置。允许负值
  >>>>>>>>>>>blur：可选。模糊距离
  >>>>>>>>>>>spread：可选。阴影的大小
  >>>>>>>>>>>inset:可选。从外层的阴影（开始时）改变阴影内侧阴影

盒子(Box) 属性

类似于overflow

overflow-y:内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪
overflow-x:如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。

颜色(Color) 属性

opacity:0~1=》从透明到不透明【该属性会被继承，谨慎使用，有时候你可能需要使用background:rbg里的透明】

用户外观User-interface（IE不兼容）

resize：定义元素是否可以改变大小

轮廓(Outline),不占据空间，也就是他不会对盒模型产生影响

outline :绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用户【例如按钮输入框多见消除outline】
- outline-offset ：轮廓框架在 border 边缘外的偏移 IE不兼容
- outline-color : 线条轮廓的颜色
- outline-style : none/dotted/dashed/solid/double/groove/ridge/inset/outset/inherit
- outline-width ：线条轮廓的宽度

字体（Font）属性

@font-face ：css层叠样式导入自定义字体传送门

定位（Positioning）属性（特殊属性，非新增属性）

clear ：left（左侧不允许浮动）/right (右侧不允许浮动) / both（俩侧不允许浮动）/ none （允许浮动）
clip ：剪裁绝对定位元素； demo
1. 默认值auto
2. shape:设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
```
img 
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
```

文本（Text）属性

text-overflow: 指定当文本溢出包含它的元素
1. clip :修剪文本
2. ellipsis : 显示省略符号来代表被修剪的文本
```
//与之配合使用
overflow:hidden
white-space:nowrap; //不换行
```

动画效果分为帧动画的animation与过度动画Transition

过渡动画（-----------》对子组件进行生效）

学习传送门实例学习门学习

示例，对子元素进行过渡-->bottom:-76px>>>>0px

    .idx-box .good-item .pop{
        bottom: -76px;
	    padding: 10px 25px;
	    transition: 0.4s all ease;
    }

    .idx-box .good-item:hover .pop{
	    bottom: 0;
     }

transition :简写下面四个属性 property duration timing-function delay；//background 0.5s ease-out 0s
- transition-property：针对了当前选择器的某个css属性【或者all】进行设置（width/height>>>>有长度的，即数值）
- transition-duration：过渡效果的持续时间
- transition-timing-function：过渡效果的特效
  1. ease: 默认值（先快后慢）
  2. linear: 匀速
  3. ease-in: 先慢后快
  4. ease-out: 先快后慢
  5. ease-in-out: 先慢后快后慢
  6. cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]，其中的cubic-bezier即为貝茲曲線中的绘制方法。先来看图（贝塞尔曲线）
- transition-delay：过渡效果的延迟执行时间

局限性

transition需要事件触发，所以没法在网页加载时自动发生。
transition是一次性的，不能重复发生，除非一再触发。
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
一条transition规则，只能定义一个属性的变化，不能涉及多个属性

------->衍生出 animation

动画属性animation，针动画

学习

animation :(同样可以简写) name duration timing-function delay iteration-count direction;

demo

    animation:ChangeColor 6s ease-in-out .2s infinite alternate

animation-name:设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，动画名称由@keyframes定义
animation-duration:对象动画的持续时间
```
animation-duration:2s;
-webkit-animation-duration:2s; /* Safari 和 Chrome */
```
- animation-timing-function:动画的过渡类型
```
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */
```
- animation-delay:动画的延迟时间
- animation-iteration-count:对象动画的循环次数 infinite永久或者数字代表几次
- animation-direction:动画在循环中是否反向运动
  1. normal(正常播放)
  2. reverse(反向播放)
  3. alternate (奇数次正向播放,偶数次反向播放)
  4. alternate-reverse(奇数次反向播放,偶数次正向播放)
  5. initial:(默认值)
  6. inherit(继承该属性)
@keyframes :与animation配合使用

demo

        @keyframes mymove
            {
            0%   {top:0px;}
            25%  {top:200px;}
            50%  {top:100px;}
            75%  {top:200px;}
            100% {top:0px;}
            }

            @-webkit-keyframes mymove /* Safari and Chrome */
            {
            0%   {top:0px;}
            25%  {top:200px;}
            50%  {top:100px;}
            75%  {top:200px;}
            100% {top:0px;}
            }

弹性盒子模型（弹性布局）

第一个传送门第二个传送门第三个传送门第四个传送门

牢记三点:

父元素 display:flex;是前提

牢记弹性盒子始终围绕着父元素/子元素来进行的

弹性盒子布局围绕主轴与交叉轴(x轴与y轴)来进行

父元素(六个常见属性),需要有点想象力,因为主轴与交叉轴是会变的
- flex-direction:决定主轴的方向(即项目的排列方向)--------->重要属性,弹性盒子必要的定义主轴是哪个方向
  1. row: 主轴为水平方向,左端起点 默认值：row
  2. row-reverse:主轴垂直方向,右端起点
  3. column:主轴垂直方向,上端起点
  4. column-reverse:主轴垂直方向,下端起点
设定方向之后>>>>需要考虑,一行塞不下>>>>子元素需不需要换行,
- flex-wrap:决定子元素是否可换行
  1. nowrap:不换行,当一行空间不足时，子元素会随之调整而并不会挤到下一行
  2. wrap:换行,超出父元素主轴尺寸时候,第一行在上面
  3. wrap-reverse：换行,超出父元素主轴尺寸时候,第一行在下面
这里有(上面俩个属性)简写flex-direction与flex-wrap的属性
- flex-flow:复合属性
```
<flex-direction> || <flex-wrap>
```
定义完主轴与是否换行的基本属性,我们就要操作主轴的排列方式
- justify-content:定义了主轴的对齐方式
前提(主轴为row,即flex-direction: row),否则大家应该想象的出来,,反一反而已

视图观看传送门
```
flex-start (左对齐)| flex-end (右对齐)| center (居中)  //基本

space-between (**两端对齐**，项目之间的间隔相等,剩余空间等分成间隙)   //特殊

space-around;  (每个项目两侧的间隔相等)  //特殊
```
space-between

space-around

既然有主轴的属性,那就肯定有交叉轴(x/y会好理解)的啦
- align-items:定义了交叉轴上的对齐方式
前提(主轴为row,即flex-direction: row),,否则大家应该想象的出来,反一反而已

视图观看传送门
```
flex-start(上对齐) | flex-end(下对齐) | center (居中) //基本
        
baseline (自我感觉用处不大)

stretch (项目未设置高度或者设为 auto，**将占满整个容器的高度**);
```
说完主轴与交叉轴的排序方式,与justify-content相似的属性(align-content)

译者注：该属性中的六个属性值与justify-content中的六个属性意思相似，不同之处在于justify-content沿主轴方向的作用于单个子元素，而align-content沿交叉轴方向作用于行。遂不再赘述各属性值含义。

译者注：注意align-items和align-content的区别，前者是指在单行内的子元素对齐方式，后者是指多行之间的对齐方式。
- align-content : 该属性生效是有前提的,容器内必须有多行的项目，该属性才能渲染出效果。
  
  图片学习,往下翻到align-content
前提(主轴为row,即flex-direction: row),,否则大家应该想象的出来,反一反而已
```
   stretch (元素不设高度,y轴上的**每一行**被撑开/默认值为 stretch)

   flex-start:(每一行靠近顶部) 轴线(元素看成轴线)全部在交叉轴上的起点(**顶部**)对齐

   flex-end：(每一行靠近底部) 轴线(元素看成轴线)全部在交叉轴上的终点(**底部**)对齐

   center：(每一行居中靠齐) 轴线(元素看成轴线)全部在交叉轴上的中间对齐

   space-between:**轴线两端对齐** , 之间的间隔相等

   space-around：每个轴线两侧的间隔相等
```
1. 子元素 (操作完父亲,肯定也能操作操作儿子啊)
看图说话

对子元素操作操作顺序
- order :定义子元素在父元素中的排列顺序，数值越小，排列越靠前，默认值为 0
操作子元素的顺序,我们来操作剩余的空间(即item项目的间隔空间)====等价于放大自身
- flex-grow: 不接受负值,默认值为0，意味着即使有剩余空间，各子元素也不会放大。
既然操作了剩余空间,扩大了子元素,接下来谈谈缩小子元素(前提子元素处在空间不足的情况下)
- flex-shrink:缩小比例，超出的空间怎么压缩如何计算(加权)demo
1. 这回操作完了剩余的空间,再回来操作最子元素(本体)的原始尺寸,设置一个最原始的尺寸
2. [主轴为横向时代表宽度，主轴为纵向时代表高度。]
3. 该属性来设置该元素的宽度。如果元素上同时设置了width和flex-basis,那么flex-basis会覆盖width的值。
- flex-basis : 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果,[浏览器根据这个属性，计算主轴是否有多余空间,然后使用flex-grow 和 flex-shrink]
  1. number:一个长度单位或者一个百分比，规定灵活项目的初始长度
  2. auto:默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定
  3. inherit:从父元素继承该属性
以上的属性(flex-grow/flex-shrink/flex-basis)能够简写哦
- flex : flex-grow flex-shrink flex-basis|auto|initial|inherit;
最后一个属性,感觉是异类,杀马特,>>单个元素有与其他元素不一样的对齐方式 align-self 是对单个元素生效的,跟 align-items属性一样
- align-self : 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
```
auto | flex-start | flex-end | center | baseline | stretch;
```

2D/3D 转换属性

第一传送门

前言:

讲到transform,形象点说就是站在2D和3D角度去操作元素 了解ps的都知道的操作:旋转，缩放，移动，倾斜等,这就是我们需要对元素做的操作有句话很重要,所有的特效都是基于transform,即使是移动-->回流与重绘重绘与回流深入理解为什么应该使用transform来替代top 你真的了解回流和重绘吗

transform-origin:提前提这个属性====>允许您更改转换元素的原点,默认圆点在中心 demo--->配合rotate,看出改变原点,旋转的样子会改变

transform-origin 详解

2D(二维)>>>>>>操作(translate(x,y) 位移) ---(rotate() 旋转 单位deg)---(skew() 倾斜单位deg)---(scale() 缩放)

都有X/Y轴之分

translate:平移>>>>>>>>translate(x, y) ====往x轴正方向平移x,往y轴正方向平移y
- translateX():>>>>>>>translateX(x) ====(只是用 X 轴的值)往x轴正方向平移x
- translateX():>>>>>>>translateX(x) ====(只是用 Y 轴的值)往x轴正方向平移y
```
transform:translate(120px, 180px);/translateX(120px)/translateY(180px)
```
scale:缩放[缩小/放大]>>>>>>>> scale(x, y) ====== 元素在x轴缩放(缩小/拉伸)到x倍,在y轴缩放(缩小/拉伸)到y倍
- scaleX():>>>>>>>>>scaleX(x)=======元素在x轴缩放(缩小/拉伸)到x倍
- scaleY():>>>>>>>>>scaleY(y)=======元素在y轴缩放(缩小/拉伸)到y倍
```
transform:scale(2, 0.5);/transform:scaleX(2);/transform:scaleY(0.5)
```
rotate:旋转>>>>>>>>rotate(x)===========元素平面旋转x deg单位 ---只有x
- rotateX():>>>>>>>>>>>rotateX(x)=========元素上下旋转x的角度
- rotateY():>>>>>>>>>>>rotateY(x)=========元素左右旋转y的角度
```
transform:rotate(120deg);/transform:rotateX(120deg);/transform:rotateY(120deg)
```
skew:倾斜>>>>>>>>>skew(x,y)==========元素在X轴倾斜x的角度,Y轴的倾斜y的角度
- skewX():>>>>>>>>>skewX(x)==========元素在X轴倾斜x的角度
- skewY():>>>>>>>>>skewY(y)==========元素在Y轴倾斜y的角度
```
transform:skew(120deg,120deg);/transform:skewX(120deg);/transform:skewY(120deg)
```

3D(三维)

学习学习学习学习

translate3d:>>>>>>>translate3d(x,y,z)----translateZ(z)
rotate3d:>>>>>>>rotate(x,y,z)----rotateZ(z)
scale3d:>>>>>>>scale3d(x,y,z)----scaleZ(z)

transform:translateZ(120px)/transform:rotateZ(120px)/transform:scaleZ(120px)

3D变化这边最主要的不是讲这几个基础知识,而是3D特效

讲到perspective/perspective-origin/backface-visibility/transform-style: preserve-3d;

透视方式>>>>>.近大远小的显示方式没法调整

镜头方向只能是平行Z轴向屏幕内，也就是从屏幕正前方向里看没法调整

可以调整镜头与平面位置可以调整

perspective属性设置镜头到元素平面的距离

perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心

demo

perspective :3D特效必有属性

解释--->perspective有第二种写法以及解释

在舞台元素上(动画元素们的共同父辈元素)====>写在父元素上(一般使用这个)

        .stage {
            perspective: 600px;
            }

解释:perspective：600px 意思就是，我在离屏幕600px 的地方观看这个元素。(这个属性，要设置在父元素上面)

perspective-origin:3D变形中另一个重要属性，主要用来决定perspective属性的源点角度,默认舞台或元素的中心.

往往我们看一样东西不可能一直都在中心位置看，想换个角度，换个位置一看究竟，这个时候就离不开perspective-origin这个属性

backface-visibility:当元素不面向屏幕时是否可见>>>>在旋转元素不希望看到其背面时，该属性很有用 visible|hidden;
transform-style:实现一些3D效果的时候，transform-style: preserve-3d是少不了的

----------------------------------》俩种思路 1. 先有一个perspective的3D（一级父元素）容器，再有transform-style变成（二级父元素）3D转换【俩个容器】，转动二级父元素 perspective与transform-style在同一个元素里（转动子元素）

旋转木马学习

CSS Grid 网格布局（Grid布局）

掘金学习学习学习学习例子

在线学习Grid游戏

CSS Grid是一个强大的 web 二维布局工具，能够以行和列来进行布局， Grid(网格) 模块为 display 属性提供了一个新的值：grid。当你将任何元素的 display 属性设置为 grid 时，那么这个元素就是一个网格容器(grid container)，它的所有直接子元素就成了网格项 span这类内联元素设置display:inline-grid，Grid布局即创建！

与弹性盒子布局一样针对容器的属性以及针对子元素的属性

grid容器

新知识点的普及： 1. fr 单位：fr 是为网格布局定义的一个新单位。它可以帮助你摆脱计算百分比，并将可用空间等分。

//剩余空间比例等分

    .game-board
        {
            grid-gap:2px;
            display: grid;
            width:300px;
            height:200px;
            grid-template-rows: 100px 1fr 1fr;
            grid-template-columns: 1fr 50px 1fr;
        }

repeat() 函数：它有两个参数。第一个是迭代次数，第二个是要重复的值。(简写)

   grid-template-rows: repeat(3, 1fr);======grid-template-rows: 1fr 1fr 1fr;

面对grid容器(网格)，首选操作行与列占比（大小）

grid-template-columns：定义竖直方向长度的划分，有几个数值，该列就有控制几个元素
grid-template-rows：定义水平方向的划分，有几个数值，该列就有几个元素

就管控了俩个网格的长度，第三个大小没控制

grid-template：grid-template-rows 和 grid-template-columns 的简写语法
1. 语法：grid-template: rows/columns

    grid-template: repeat(3, 1fr) / repeat(3, 1fr);

说完自身的大小划分，自然就说到，间隔的尺寸

grid-column-gap：定义网格中列与列之间网格间隙的尺寸
grid-template-rows：定义网格中行与行之间网格间隙的尺寸
grid-gap ：不用说也知道是，rid-template-rows与 grid-column-gap的简写
1. grid-gap: grid-rows/columns;

    grid-gap: 15px 10px;

对照着弹性盒子，Grid布局也同样有着排列方式之说

先总结一下六个属性

1. justify-items/align-items 

内容与网格元素的水平/垂直呈现方式------适用于容器内的所有的 grid items


2. justify-content/align-content 网格(线)的水平/垂直对齐方式
    -------前提**网格的总大小小于其网格容器的大小
    **(子元素没把容器撑满才有效果,不然网格(线)还能左右移动吗)

3. place-items：justify-items/align-items缩写  
   place-content:justify-content/align-content缩写

图关注点在内容与网格

align-items 【类比弹性盒子性质】
- start: 内容与网格区域的顶端对齐
- end: 内容与网格区域的底部对齐
- center: 内容位于网格区域的垂直中心位置
- stretch: 内容高度占据整个网格区域空间(这是默认值)
justify-items 【类比弹性盒子性质】
- start: 内容与网格区域的左端对齐
- end: 内容与网格区域的右端对齐
- center: 内容位于网格区域的中间位置
- stretch: 内容宽度占据整个网格区域空间(这是默认值)

图关注点在网格与网格容器

align-content
- start - 网格与****的顶部对齐
- end - 网格与网格容器的底部对齐
- center - 网格与网格容器的中间对齐
- stretch - 调整 grid item 的大小，让高度填充整个网格容器
- space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
- space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙
- space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘
justify-content
- start - 网格与网格容器的左边对齐
- end - 网格与网格容器的右边对齐
- center - 网格与网格容器的中间对齐
- stretch - 调整grid item 的大小，让宽度填充整个网格容器
- space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
- space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙
- space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘
grid-auto-columns / grid-auto-rows：指定自动生成的网格轨道（又名隐式网格轨道）的大小。隐式网格轨道在你显式的定位超出指定网格范围的行或列（使用 grid-template-rows/grid-template-columns）时被创建。

看图理解：demo

demo

说到这里的确看的有点累了吧，在线学习Grid游戏了解一下

grid-auto-flow ：控制没有明确指定位置的grid子项的放置方式（设置隐含创建的网格的默认流方向）
1. 属性: row | column | row dense | column dense demo

父容器讲完了，讲一下父容器与网格配合的俩个属性 grid-template-areas 与 grid-area demo

grid子项上的CSS属性
- grid-column-start, grid-column-end, grid-row-start和grid-row-end
  1. 表示grid子项所占据的区域的起始和终止位置，包括水平方向和垂直方向 2.属性 number：起止与第几条网格线。 name：自定义的网格线的名称。 span (number) :表示当前网格会自动跨越指定的网格数量。 span (name) :表示当前网格会自动扩展，直到命中指定的网格线名称。 auto :全自动，包括定位，跨度等。

细讲之前普及：

grid-column-start/grid-column-end(不多说，类似普及的解释参考上图)：正方向跨过网格线(列网格线的开始)------垂直网格线

grid-column-start

grid-row-start/grid-row-end(不多说，类似普及的解释参考上图）：正方向跨过网格线(行网格线的开始)-------水平网格线

允许您指定网格项从哪一行开始，以及它跨越了多少个轨道。grid-row-start

与grid-template-areas配合

第一种方式是网格名

    /* 命名网格领域 */
  grid-template-areas: 
    "a b c"
    "d e f"
    "g h i";
    
/* 现在引用指定的网格区域(而不是索引号) */
#grid > div:first-child {
  grid-row-start: d;
  background: limegreen;
  }

第二种方式网格线

第一种写法：

/* 命名网格领域 */
  grid-template-areas:
    "a b c"
    "d e f"
    "g h i"
    ;
    
/* 现在引用隐式的命名行 */
#grid > div:first-child {
  grid-row-start: d-start;
  background: limegreen;
  }

第二种写法
/* 指定列并命名行 */
grid-template-rows: [row1-start] 1fr [row2-start] 1fr [row3-start] 1fr;

/* 现在参考命名行 */
#grid > div:first-child {
  grid-row-start: row2-start;
  background: limegreen;
  }

累死，我靠，Grid东西真多，但是确实很有用（二维布局，想在哪里就在那里）接着讲最后三个

图解

justify-self：表示单个网格元素（网格里面的内容）的水平对齐方式,假设文档流方向没有变
- stretch：默认值，拉伸。表现为水平填充。
- start：表现为网格水平尺寸收缩为内容大小，同时沿着网格线左侧对齐显示。
- end：表现为网格水平尺寸收缩为内容大小，同时沿着网格线右侧对齐显示。
- center：表现为网格水平尺寸收缩为内容大小，同时在当前网格区域内部水平居中对齐显示。
align-self：指定了网格元素（网格里面的内容）的垂直呈现方式，是垂直拉伸显示，还是上中下对齐
- stretch：默认值，拉伸。表现为垂直填充。
- start：表现为网格垂直尺寸收缩为内容大小，同时沿着上网格线对齐显示。
- end：表现为网格垂直尺寸收缩为内容大小，同时沿着下网格线对齐显示。
- center：表现为网格垂直尺寸收缩为内容大小，同时在当前网格区域内部垂直居中对齐显示。
place-self：可以让align-self和justify-self属性写在单个声明中 不多说

其实还有个最牛逼的grid属性所有这些CSS属性的缩写集合，grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flow。

响应式布局的常用解决方案对比---》CSS 媒体查询（响应式布局）等

视口学习学习github 思否学习视口先了解几个概念问题

像素：像素是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域，像素分为两种类型：css像素和物理像素

代码中使用的px单位就是指的是css像素，（是 CSS 和 JS 中使用的一个抽象概念）

物理像素也称设备像素，只与设备或者说硬件有关，同样尺寸的屏幕，设备的密度越高，物理像素也就越多

css像素与物理像素的转换关系是怎么样?

了解视口：广义的视口（即PC 端的视口），是指浏览器显示内容的屏幕区域，狭义的视口（即移动端的视口）包括了布局视口、视觉视口和理想视口

移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。因此，引入了布局视口、视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。

(1). 布局视口（layout viewport）

移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的布局视口,iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

默认的布局视口宽度为 980px。如果要显式设置布局视口，可以使用 HTML 中的 meta 标签：

<meta name="viewport" content="width=600">

(2). 视觉视口:是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。(视觉视口的着重点在后面的网页的相对的可见区域，这个区域可以缩放变大小)

(3). 理想视口:在移动设备中就是指设备的分辨率

理清分辨率和物理像素:DPR（Device pixel ratio）设备像素比>>>>>>>DPR = 物理像素／分辨率（独立像素）

在移动端的布局中，我们可以通过viewport元标签来控制布局，比如一般情况下，我们可以通过下述标签使得移动端在理想视口下布局：

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

属性名	取值	描述
width	正整数	定义布局视口的宽度，单位为像素
height	正整数	定义布局视口的高度，单位为像素，很少使用
initial-scale	[0,10]	初始缩放比例，1表示不缩放
minimum-scale	[0,10]	最小缩放比例
maximum-scale	[0,10]	最大缩放比例
user-scalable	yes／no	是否允许手动缩放页面，默认值为yes

meta标签中我们会将width设置称为device-width，device-width一般是表示分辨率的宽，通过width=device-width的设置我们就将布局视口设置成了理想的视口。

媒体查询
- 从大到小

@media screen and (max-width: 960px){//最大960
    body{
      background-color:#FF6699
    }
}

@media screen and (max-width: 768px){最大768
    body{
      background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){//最大550
    body{
      background-color:#6633FF;
    }
}

@media screen and (max-width: 320px){//最大320
    body{
      background-color:#FFFF00;
    }
}

从小到大

@media screen and (min-width: 320px){//最小320
    body{
      background-color:#FFFF00;
    }
}

@media screen and (min-width: 550px){//最小550
    body{
      background-color:#6633FF;
    }
}

@media screen and (min-width: 768px){最小768
    body{
      background-color:#00FF66;
    }
}
@media screen and (min-width: 960px){//最小960
    body{
      background-color:#FF6699
    }
}

写法

css检测竖屏

@media all and (orientation : portrait){ }

css检测横屏

@media all and (orientation : landscape){ }

css适配特定屏幕长宽比的设备

@media only screen and (device-aspect-ratio:4/3){}

不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3X图，通过媒体查询就能很方便的实现。

新增单位

手册

新增的vw vh俩个单位，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度

单位	含义
vw	相对于视窗的宽度，视窗宽度是100vw
vh	相对于视窗的高度，视窗高度是100vh

rem ：rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示

用处等介绍

与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。默认情况下，html元素的font-size为16px.

这边需要衍生一个话题em/rem区别以及场景

学习

区别：

em 和 rem 单位之间的区别是浏览器根据谁来转化成px值
有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小

根据W3标准，它们是相对于使用em单位的元素的字体大小。(父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承)

Em 单位的遗传效果

使用 em 单位存在继承的时候，情况会变得比较棘手，因为每个元素将自动继承其父元素的字体大小。继承效果只能被明确的字体单位覆盖，比如px,vw

使用 em 单位的元素字体大小根据它们来定。但该元素可能继承其父元素的字体大小，而父元素又继承其父元素的字体大小，等等。因此，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响

em换算

h1 { font-size: 20px } /* 1em = 20px */
p { font-size: 16px } /* 1em = 16px */

rem换算

h1 {
  font-size: 2rem;
  margin-bottom: 1rem; /* 1rem = 16px */
}

p {
  font-size: 1rem;
  margin-bottom: 1rem; /* 1rem = 16px */
}

rem与em何时使用值得商榷（各有优缺点）外网

规则

如果属性根据它的字体大小进行缩放，使用em
所有其他属性都是按比例缩放的,使用rem。
如果你想为你的单位使用em，你必须小心你的布局。
在项目中使用em时，除了根元素之外，最好不要显式定义font-size
在间距（边距，填充等）和字体大小调整中使用rem
用em来做菜单这样的布局
让用户字体大小设置影响网站布局的每一个方面rem
不应该使用rem媒体查询外网文章
不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。

图像值 linear-gradient() 线性渐变/radial-gradient() 径性渐变

学习学习学习学习 linear-gradient、repeating-gradient 详解学习 radial-gradient 学习

渐变可以在任何使用 image 的地方使用官方MDN

基础线性渐变外网的test

只需指定两种颜色【这些被称为色标。 至少指定两个色标，也可以指定任意数量。】

  .simple-linear {
       background: linear-gradient(blue, pink);
}

更改渐变中心

.color-hint {
      background: linear-gradient(blue, 10%, pink);
}

改变渐变方向

  .horizontal-gradient {
              background: linear-gradient(to right, blue, pink);
    }

对角线渐变

  .diagonal-gradient {
      background: linear-gradient(to bottom right, blue, pink);
    }

设置渐变角度

  .angled-gradient {
      background: linear-gradient(70deg, blue, pink);
    }

使用多种颜色:局限于使用两种颜色，你想使用多少种颜色都可以！默认情况下，所设置颜色会均匀分布在渐变路径中

颜色终止位置：0% 表示起始点, 而100%表示终点

//从左到右，28px ,77%是位置不是长度

.multicolor-linear { 
       background: linear-gradient(to left, lime 28px, red 77%, cyan);
}

控制渐变的进展

   .colorhint-gradient {
      background: linear-gradient(to top, black, 20%, cyan);
        }

支持透明度

.layered-image {
      background: linear-gradient(to right, transparent, mistyrose),
      url("https://mdn.mozillademos.org/files/15525/critters.png");
}

堆积的渐变

.stacked-linear {
  background:
      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

radial gradients

基础径向渐变

   .simple-radial {
      background: radial-gradient(red, blue);
    }

大佬写得很好了

CSS3基础知识暂时说到这里，累了累了

汇总前端基础学习(系列一：HTML4/5，CSS2/3)

最全的(前端知识)汇总，以便自身复习

技术规范(基础了解,大佬尽可跳过)[本文持续性优化(增删改查)内容，更改排版(多提意见)]

HTML4>>>>>HTML5

CSS2>>>>>CSS3

总结：CSS3与CSS2的不同

TODO新增清单

CSS3选择器

CSS3伪类 所有主流浏览器均支持,除了 IE8 及更早的版本

CSS3新属性【有许多属性兼容性极度太差，不提及】

Background背景

边框(Border)

盒子(Box) 属性

颜色(Color) 属性

用户外观User-interface（IE不兼容）

轮廓(Outline),不占据空间，也就是他不会对盒模型产生影响

字体（Font） 属性

定位（Positioning） 属性（特殊属性，非新增属性）

文本（Text） 属性

动画效果分为帧动画的animation与过度动画Transition

过渡动画（-----------》对子组件进行生效）

动画属性animation，针动画

弹性盒子模型（弹性布局）

2D/3D 转换属性

CSS Grid 网格布局（Grid布局）

响应式布局的常用解决方案对比---》CSS 媒体查询（响应式布局）等

新增单位

图像值 linear-gradient() 线性渐变/radial-gradient() 径性渐变

CSS3伪类所有主流浏览器均支持,除了 IE8 及更早的版本

字体（Font）属性

定位（Positioning）属性（特殊属性，非新增属性）

文本（Text）属性