css部分
清楚浏览器默认格式：{margin：0，padding：0}
1、选择器
有一个直接后代选择器
#wrap > div{}
有这个>号代表着#wrap下的儿子代div会被渲染样式，没有>的话是下的所有div都会被渲染
颜色这种属性是可以继承的
div[]{} 括号里跟的是attr的值
就name/style/abc这种的都是HTML的attr（attribute）
css选择器优先级总结
****!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
当然同一种级别的可以叠加样式
内联样式表（行内样式就是标签自带的属性）的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
2、伪类与伪元素
伪类的作用是让dom节点拿到动态状态，伪元素是让css有机会去‘’
链接伪类：：link、：visited、：target
动态伪类：：hover（鼠标悬停时变化样式）、：active
–依靠样式跳转
结构性伪类：
nth-child(index)系列 如li：nth-child（2n+1） --默认选中li标签的第2n+1个元素（只能能是第一位的）（用于选择相同元素设置第几个）
：first-child
：last-child
：nth-last-child(index) 如p：nth-of-child（1）–找到p里面的第一个元素
：only-child
nth-of-type(index)系列
a:not(:last-of-type){border-right:1px solid red} 这个not含义把最后一个a标签的属性去掉保留前面a标签的
：nth-child(even) //偶数位 :nth-child(odd)//奇数位
**div:empty{backgroud:pink;} div空的部分 就对这种空的div进行设置
伪元素选择器 ::两个表示伪元素
** #wrap::after{content:"",display:block,width:20px,height:20px}
一个元素有两个伪元素一个after一个before 每个div这种的都会有这样两个
这种css创建的元素，在你当前页面之后创建一个这种元素，但这是css生成的并不在dom树中
** div ::first-letter{color:red,font-size:20px,font-weight:bold}
这个伪元素是将
** div::first-line{color:red,font-size:20px,font-weight:bold}
这个伪元素是将
** div::selection{backgroud:red,color:pink}
这个伪元素可以让你选中，拖拉时样式改变
css优先级（！important是最大的）
注在浏览器辅助功能里有用户声明可以自己修改相应的样式
文字阴影部分：
font:50px/100px 50代表大小100代表行高
text-shadow：pink 10px 10px 10x为文字添加阴影(颜色、偏移程度（两个10）、模糊程度)
可以这样的添加多层，用，分开就好
.wrap{
transition:1s //transition为其添加一个动画效果（过渡）
}
.text:hover{
color:rgba(0,0,0,0), //通过rgba可以变得模糊
text-shadow:black 0 0 100px
}
margin：0 0 0 0 上 右下左 0 auto 0 上左右下
自定义字体：@font-face
字体图标：1、制作一套矢量图2、将矢量图与字符绑定3、使用工具或者站点生成一套字体
模糊背景：利用filter:blur(10px)来使某个元素（背景）模糊显示
文字描边：只有webkit内核（谷歌的）才支持：-webkit-text-stroke：5px pink
设置倒影：-webkit-box-reflect:above/below/right/left 0px 为元素添加一个倒影
文字排版：margin:0 auto 是可以让盒子居中的 direction控制文字方向
direction:rtl/ltr 右靠左/左靠右
white-space:nowrap //文字超过不换行
text-overflow:ellipsis //超过部分换成…
小总结：odd代表奇数 even代表偶数
盒模型新增样式
盒居中::position:absolute; top:0;bottom:0;left:0;right:0;margin:auto;height:100px;width:100px(注要设置宽高的)
或 width:200px;height:200px;position:absolute;left:50%;top:50%;margin-left:-100px;margin-top:-100px
内部元素居中：text-align：center line-height:height
不定高div居中（能不使用position尽量不使用）
1、display: flex; justify-content: center;align-items: center（justify-content/align-items也可以设置成左对齐右对齐）
2、父盒子设置:display:relative
Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;
3、父盒子设置:display:table-cell; text-align:center;vertical-align:middle;
Div 设置: display:inline-block;vertical-align:middle;
块状元素居中（块状元素没发用text-align）
1.宽度一定：margin:auto
2.宽度不定：块级变行内，然后在父上text-aligin
图片的块级元素居中直接margin：0 auto 上下0左右auto
盒阴影box-shadow：10px 10px 10px 10px black inset //最后一个px能控制阴影大小 inset使内阴
resize:both/horizontal/vertical //允许某个元素在都/水平/垂直/方向拖动（配合overflow:auto）
overflow:auto
一个元素里面没有元素然后添加padding就是把该元素当成内部元素
box-sizing:border-box 盒子的宽高就是他的本身宽高，这个时候的padding不会影响
float:left/right(从左至右浮动/从右至左浮动) 这个时候设置盒子内部的属性（border、padding等）是需要设置border-box的
border-radius：0 60%//这个可以构建小风车
**负值的时候是往该方位的相反方向移动的
tansform：rotate（120deg）旋转120度 配合transition：2s使用
BFC
块级格式化上下文，是一个独立的渲染区域，与外部不相干
容器里面的子元素不会影响到外面的元素。反之也如此。有了这个特性，我们布局的时候就不会出现意外情况了。
在什么时候出现？*
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
就是有上面特征的就是BFC，他就符合下面的定律
bfc布局规则：
内部box会在垂直方向，一个一个放置
bfc区域不会与float box重叠
同一个BFC相邻的BOX的margin会重叠
主要用途
(1) 清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。
(2) 解决外边距合并问题
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
创建不属于同一个BFC，就不会发生margin重叠了。（重新定义一个BFC元素）
(3) 制作右侧自适应的盒子问题
普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文
就是如果做出来有覆盖或者是怎么样的，给另一个元素也变成bFC通过overflow hidden的方式就能实现改变
真实dom和虚拟dom
真实
Hello React
虚拟
{
type: ‘div’,
props: {
className: ‘foo’,
children: {
type: ‘h1’,
props:{
children: ‘Hello React’
}
}
}
}
虚拟的可以通过babel来转换成真实得
值得注意的是
虚拟DOM不会进行排版与重绘操作
虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
真实DOM频繁排版与重绘的效率是相当低的
虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部（同2）
content-box和border-box
一般情况下盒模型的默认样式（box-sizing）都是content-box
主要区别在于content-box的width不包括padding和border
而border-box的width包括padding和border
content-box：padding和border不被包含在定义的width和height之内。
**盒子的实际宽度=设置的width+padding+border
border-box：padding和border被包含在定义的width和height之内。
常用在通过padding来撑出盒子的宽度，并且改变padding不改变宽度
**盒子的实际宽度=设置的width（padding和border不会影响实际宽度，这一句是重点）
padding是padding、border是border不是宽度里的，设置了宽度也可以随意设置这两个值，并不会改变影响width值
相当于把这两个属性从width
里分离出来了
border-image-source：url（） //定义一张图片来代替边框样式
线性渐变：渐变不是颜色是图片
background-image:linear-gradient( to right，45deg,red,pink,black) 线性渐变(方向，角度，颜色)（是渐变色不是纯色）
rgba的a是Alpha透明度取值在0-1.0
****调式样式什么的是打开f12点到具体的样式然后试，用好之后再复制到代码，不是你这样调试的
radial-gradient径向渐变
过渡属性transition
当display时的某些属性是不能使用transition的
transition-property：width，background 制定那个地方使用动画
transition-duration：5s，2s 执行的时长
windows.onload = function(){
let a = documents.querySelector("#test")
let b = documents.querySelector(‘body’)
b.onMouseover(()=>{a.style.width = ‘100px’})
}
a.addEventListener(‘transitonend’,funtion(){alert(111)}) //动画效果也可以监听
css2D变换（transform这tm和动画transition不一样！！！）
transform:translateX(沿X轴向右平移)、translateY（沿Y轴向下平移）/translateZ
transform:translate(300px,300px)直接斜着走
transform:rotate(360deg)旋转多少度 rotateY、rotateX、rorateZ分别以YXZ轴转
transform:skew(45deg)斜切所少度正直左切负值朝右
transform：scale（2）缩放（缩放粒度正值放大，小数缩小）
基点的变换具体到某个api里
transform-origin：X,Y,Z（改变变换的基点，XYZ分别代表3个轴的什么地方）
2D变换组合
矩阵（上面的所有变换都是要矩阵）矩阵函数matrix
transform:matrix() 括号里可以填sin，cos表示角度，1,2,3等数字
扇形导航
注：img是行内元素，是在一行中的
行内元素会在一条直线上排列，水平方向排列，块级元素各占一行，垂直方向排列
块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素，只能包含文本或其他行内元素
在盒模型上，行内元素width、height无效，margin/padding上下无效
像div、h系列、ul、li、p、table系列都是块级元素
像a、input、img、label等都是行内元素
如果没有inline-block 的话实现inline-block的功能还得用float还有副作用
实现过程挺值得二刷，牵扯很多数学的问题，找准问题的逻辑思路其实就是，从一个位置改变到一个位置
过渡执行完会有一个事件叫做transitionend，可以监听
this.addEventListener(“transitionend”,fn)
function fn(){
this.removeEventListener(“transitionend”,fn) /确保该监听器监听完后解绑 聪明之举
}
一旦一个元素浮动起来或者是定位起来他的行内或者是块级元素的属性就没有了
有冒泡事件的话，阻止冒泡事件就显得很有必要 stopPagation
3D变换（3d缩放、旋转、平移）
景深（前端上就是肉眼距离到显示器的距离） perspective
一般景深有个包裹，他使内部元素产生变化，所以景深以及3d舞台一定要写在外层的div上
让3d场景有近大远小的效果，并且景深是一个不可继承的属性，但可以作用于**后代元素
灭点：景深越大灭点越远，元素变形越小。反之
给一个景深 perspective：100px 在一个动画transition上就会显示3D动画
perspective-origin 50%，50% 视角的位置
比如transform：rorate3d（1,1,1,360deg）
transform：translate3d(-50%,-50%,-100px) 最后这个-100就是对应景深的，有景深的话
可以出现近大远小改变大小的作用
transform-style：preserve-3d
营造有层级的3d舞台（后面的div是有层次的），是一个不可继承的属性，他作用于子元素
景深会叠加（要尽量避免，坐在外面写一个景深就好了）
做一个3d旋转的的立方体骰子
先构建外部的wrap div然后一个div内包裹着6个面的div
分别把这6个div布局到拆来那样的那个位置，
然后通过nth-child来选定具体的某个面，通过transform-origin:bottom/top/left/rigjt
选择基点，transform：rotateX/Y/Z(90deg)把各个面折进去
当然外部wrap上对于景深perspective：200px transform-style：preserve-3d构造舞台 transition：2s
来实现这个3d的动画
backface-visibility：hidden/visible 让元素的背面是否显示
————————————————————————————————————————————————————————————
多棱柱
let text = “”
let csstext = “”
for(let i =0;i<n;i++){
text+= “
csstext+= “#wrap .box:nth-child(”+(i+1)+"){transform:rotateY("+(i*degout)+“deg)}”
//css的样式也是直接这么写就可以了，然后参数也是和js非标准字符串一样写
后面创建一个专门的style标签存放进去就好
}
let stylenode = document.createElement(“style”)
stylenode.innerHtml = cssText
document.head.appendChild(stylenode)
————————————————————————————————————————————————————————————‘
动画 animation
直接搞简写的
animation：animation-duration，animation-delay
如animation：move 4s 2s both running 3 alternate step（1，end）
压力测试动画（就是加载（很多人一起用的时候，网速慢的时候））
就加载的动画，加完之后就预示着页面已经渲染完毕。
注：一般移动端开发的话原生上加上这一句
**块级元素是不能用transform的
先写一个2d的开机加载动画
css里定义好move的动画是啥
@keyframes move{
from{top:0px}
to{top:-10px}
}
window.onload = function(){
let spanNodes = documents.querySelectorAll("#wrap > .inner > span")
let colors = [“red”,“green”,“blue”,“purple”,“orange”]
for(let i=0;i<spanNodes.length;i++){
spanNodes[i].style.animation = “move .3s linear infinite alternate”
***这个动画效果是move代表移动 .3s是持续零点3秒 linear是线性的 infinite是持续放映 alternate是使动画平滑
spanNodes[i].style.color = colors[i]
}
}
加载开机3d动画（显示加载进度，加载完之后就 ）
#wrap{
height:100% //外面包裹的显示100%可以让其更高
position:relative
perspective:200px
}
#wrap >inner{
heigth:100%
position:relative
transform-style:preserve-3d
animation:move 1s linear infinite
}
@keyframa move{
from {
transform:translate3d(-50%,-50%,0 rotateY(0deg)) //因为定位是通过transform来居中的，所以就在动画起始点写上起源点
}
to{
transform:translate3d(-50%,-50%,0 rotate(360deg)
}
}
window.onload = function(){
let flag = 0 // 定义这个来控制进度
let arr=[]
let pNode = document.querySelector("#wrap > .inner >p")
for(item in imgData){
arr = arr.concat(imgData[item])
//拿到文件里的图片二维数据
**这个地方参考下把里面的二维数组拿到一块的方法
}
for(let i=0;i<arr.length;i++){
let img = new Image(); //定义一个图像变量
img.src = arr[i]
img.onload = function(){
flag++
pNode.innerHTML = “已加载”+（Math.round(flag/arr.length100)+"%"）
img.onerror = function(){
console.log(‘address wrong’)
}
//就是图片加载完之后，就会到100%的进度
}
}
}
————————————————————————————————————————————————————————————‘
flex（专门为布局而生）
这个flex在老版本里是-webkit-box
flex更适用于移动端
#wrap .item{
width:100px
height:100px
backgroud:pink
text-align:center
line-height:100px
/float:left/ 当设置float属性时，下面的元素会成水平方向排列，都BFC的
/display:flex/ 当设置flex时默认也会让元素水平排列，不同的是，当改变宽度时，这些元素位置不会变，他会改变内部元素的宽度，为整个的布局着想，而float会变会换行（浮动就比较随意。）
}
<div class="item">1</div> //元素
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
flex-direction:row/column /row-reverse/column-reverse（布局排列是水平还是垂直/排列方向是正还是反）
但是reserve之后富裕空间（就是空的那一块）会改变之前在后，reserve之后富裕空间会到前
justify-content富裕空间管理（flex-start、flex-end、center、space-between、space-around）
要想改变之前的情况就是让上面在flex-direction：row-reserve之后（让他左对齐）
设置justify-content：flex-end （就是相反情况的左对齐，没有reserve的话左对齐还是设置成flex-start）
justify-content：space-between会使每个元素都有均等的间隔这样布局
space-around：在between的情况下，使得富裕空间在两边上还有
align-items侧轴富裕空间管理（flex-start/flex-end/center/baseline/strech）
关于flex-start和flex-end和前面justify-content一样的（如果有reserve的话也是相反的对齐的）
align-items:baseline（按基线对齐）
align-items：stretch（等高布局，直接把他高度都撑满）
***弹性空间管理
是将主轴上的富裕空间按比例分配到项目的width/height上，就是没有富裕空间了，这一行都沾满了
即flex-grow：1 这个1就是弹性因子
即每个元素的宽度在包裹的总宽度里是一样的，比如wrap里有五个div，每个都是1的话就是5，假设总的宽度是100px
100/5=20px 得到每个div的宽度是20px。如果其中一个div的flex因子设为4的话，就是4+1+1+1+1=8 100/8≈12px 12*4=48px
第一个div就是宽度是48px
注意flex不会覆盖元素的
flex-wrap:wrap/nowrap/wrap-reverse 多出的div换不换行，如果不换行的话而且宽度不够，就会压缩内部的各个元素宽度，如果是老版的flex就会溢出了
**值得注意的是，换行之后如果设置了justify和align，换行之后不是紧挨着的，而是每行有一定的间隔。
这个时候想要去除掉这些间隔就用align-content：flex-start/flex-end，这个时候就听这个得了，就不听justify和align的了
align-content（当控制多行多列时，富裕空间的管理，就是会把所有航或者列看成一个整体）
flex-flow是flex-direction和flex-wrap的简写 默认值：row nowrap
对于项目（元素）来说
order：可以具体规划哪个元素的具体位置
#wrap .item:nth-child(3){
order:5
}
//第三个元素排在第五位
align-self（默认是align-items的值，flex-start/flex-end,center…）
定义元素自己的侧轴位置
flex-basis：指定了flex元素在主轴方向的初始大小。会影响flex-grow的
flex-shrink：与flex-grow相对，flex-grow是拉伸的话，flex-shrink就是伸缩元素（前提必须是nowrap,压缩到一行）
*****flex-shrink默认值是1 就是如果总的宽度不够的话那种情况这个shrink就生效了，算法和grow一样
flex-basis为0，shrink就不能是1了
flex是flex-grow,flex-shrink,flex-basis的简写属性默认值是 0 ，1，auto
flex:1 的话是flex-grow是1，flex-shrink：1，flex-basis：0%
这个设置可以做等分，其实把flex设置为2或者3或者4等代表的三个属性都是和1一样的都是等比的
这就是那个等分布局***
就侧轴富裕空间管理
单行单列
align-items和align-self（优先级更高）
多行多列
align-content
————————————————————————————————————————————————————————————
offsetXXX
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 间隔上方或上层控件的地位，整型，单位像素。
obj.offsetLeft 指 obj 间隔左方或上层控件的地位，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
offsetTop和style.Top的区别
offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
offsetTop 只读，而 style.top 可读写。
若是没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
clientHeight、offsetHeight、scrollHeight
clientHeight
对 clientHeight 都没有什么，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个对象条以下到状况栏以上的这个区域，与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 迁移转变条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
scrollTop、scrollLeft、scrollWidth、scrollHeight
scrollTop都是卷起来的高度值,动起来的值
scrollLeft 也是类似事理。
我们已经知道 offsetHeight 是自身元素的宽度。
而 scrollHeight 是内部元素的绝对宽度，包含内部元素的隐蔽的项目组。
上述中 p 的 scrollHeight 为 300，而 p 的 offsetHeight 为 100。
scrollWidth 也是类似事理。
IE 和 FireFox 周全支撑，而 Netscape 和 Opera 不支撑 scrollTop、scrollLeft（document.body 除外）。
******页面滚动的时候，元素的offsetXXX不变，要获取页面滚动距离用$(document).scrollTop()
————————————————————————————————————————————————————————————
响应式布局方案（pc端、移动端、平板端）
flex的话多用于移动端
响应式web设计-媒体查询
使用@media查询，针对不同的媒体类型（手机，电脑，平板）
对于不同设备有不同的样式
浏览窗口小于500px，背景变为浅蓝色
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
通过下方属性可以切换横屏还是竖屏
orientation：portrait(横屏) | landscape（竖屏）
媒体类型有：all所有媒体
screen彩色屏幕
print打印预览
projection 手持设备
tv 电视
Braille 盲文触觉设备
等
括号里的就是媒体属性
width （max-width，min-width相当于大于小于的） 这个宽高是浏览器窗口的宽高
height（…）
device-width (…)这个宽高是设备的宽高，这个地方才是用不同设备的时候（主要是看分辨率的不同）**
device-height (…)
device-pixel-radio (…) 这个就是DPR，屏幕高分显示，PC端默认的是1（高清屏），其他的话可以自己加判断条件
orientation :portrait/landscape（这里的横竖屏啊，宽比长高就是横屏，长比宽高就是竖屏）
关于关键字
and：代表与的意思，用来连接媒体类型的多个属性
@media only screen and (max-width: 500px) and （-webkit-device-width：600px）
only：是与浏览器的兼容性相关（因为老版本的浏览器只支持媒体类型，所以一般用的话都加上only）
（，）:逗号是表示或的意思
not：表示取反
@media也可以判断不同分辨率显示不同宽度布局实现自适应宽度
————————————————————————————————————————————————————————————
多列布局（分栏布局）
栏目宽度：column-width（指定每一列的宽度）
column-count：3 （直接指定列数，比较常用）
column-gap：设置栏间距
column-rule：1px solid red设置分割线
————————————————————————————————————————————————————————————
css规范
244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
