写本文的目的是巩固一下前端的一些基础，互相交流一下，做一个综合的归纳，附带一些HTML相关，序号不重要，可能是想到啥就写啥，如有误，请及时指出，看到会及时修改，文章引用较多
CSS
面试css方面的一些问题，或者介绍，持续更新
1.css选择器
新增的css3选择器可以再看下，过一遍
优先级：!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
如果优先级相同后者覆盖前者，直接编写的样式优先级大于继承的样式
2.盒模型
1.W3C 盒子模型(标准盒模型 content-box)
width = content-width
height = content-height
2.IE 盒子模型(怪异盒模型 border-box)
width = content-width + padding-width + border-width
height = content-height + padding-height + border-height
通常我们会在根元素使用 box-sizing: border-box; 改变盒子模型，
box-sizing属性介绍是： CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度
值有这些content-box|border-box|inherit|initial|unset; 主讲前两个，内容来源于mozilla
- content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
- border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高，border-box全局使用时，注意的坑是引入组件库，要注意组件库是否使用此属性。
3.BFC (块级格式化上下文)
一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到BFC中的内部元素，一个BFC就像是一个隔离区域，和其他区域互不影响。
1.创建BFC
- float不为none
- position不为static
- 弹性元素 display = inline-block | flex | inline-flex | table-cell | table-caption
- 网格元素 display = grid 或 inline-grid 元素的直接子元素等等。
- overflow的值不为visible（默认）
2.使用的场景
- BFC垂直方向，边距重叠
- 不会与float重叠
- 防止浮动导致父元素高度塌陷
- 清除浮动
4.清除浮动
可以从上文中的BFC中获得一些方法 方案有汗多，当前只列出一种，适合自己的就可以
.clear:after {
content:"";
height:0;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
.clear{
zoom:1;/*为了兼容IE*/
}
5.Flex 布局 display:flex
6.Grid 布局 display: grid
7.display:inline-block 间隔
1.同一行或把所有子标签写在同一行
2.使用浮动
3.父元素中设置font-size: 0
8.Box 垂直居中&&水平居中
1.table表格法
思路：显示设置父元素为：table，子元素为：cell-table，vertical-align: center
优点：父元素（parent）可以动态的改变高度（table元素的特性），缺点：IE8以下不支持
2.-50%定位法
思路：子元素绝对定位，距离顶部左边各50%，然后使用css3 transform:translate(-50%; -50%)
3.使用css3 flex布局法
思路：父元素display: flex; justify-content: center;align-items: center;
4.使用css3 flex||grid布局法
思路：父元素display: grid; 子元素 align-self: center; justify-self: center;
5.绝对定位法
思路：父元素使用定位（相对/绝对都行），子元素设置position:absolute; top: 0; left: 0; bottom: 0; right: 0; margin:auto;
方式其实还有很多，我就列几种常用的
9.布局方案
往上一点，我们的布局方案，大多是采用，浮动float+position来实现，能满足所有的要求 现在我们大多是采用flex、grid布局，flex采用的还是多一点，grid很强大但是兼容还是存在问题，常见的布局，我就不列了
比如，移动端和小程序可以通过flex 上下固定，中间自适应滚动布局
<style>
html,
body {
height: 100%;
}
.wrap {
display: flex;
-webkit-box-orient: vertical;
flex-direction: column;
flex-direction: column;
width: 100%;
height: 100%;
}
.header,
.footer {
height: 40px;
line-height: 40px;
background-color: #d8d8d8;
text-align: center;
}
.main {
flex: 1;
width: 100%;
overflow: auto;
}
</style>
<body>
<div class="wrap">
<div class="header">header</div>
<div class="main">
弹性滚动区域
</div>
<div class="footer">footer</div>
</div>
</body>
还有很多，后续看补充下
10.CSS创建三角形
思路一般是，宽高设为0，三边color设置为transparent
.box{
width:0px;
height:0px;
border: 50px solid;
border-color:transparent transparent transparent #ef4848;
}
11.CSS 1px有啥方案
1px的方案有很多种，只能列一个适合自己的，搭配scss或者less来实现会好很多
12.视差滚动效果
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。
关于视差是我帮别人做项目，然后强烈要求加入视差，然后就开始各种搜索
13.calc函数 （css3新增的一个计算函数）
介绍：calc函数是css3新增的功能，可以使用calc()计算border、margin、pading、font-size和width等属性设置动态值。
width: calc( 100% + 100px );
width: calc( 100% - 100px );
width: calc( 100% * 100px );
width: calc( 100% / 100px );
14.rem
rem 根元素的字体大小。rem是一个相对的CSS单位，1rem等于html元素上font-size的大小
rem曾经是移动端布局的首选方案，简单点就是根据屏幕的大小，动态的改变html标签的font-size的大小，配合meta标签中的dpr，通过计算最后得出转换后的单位，不过该方案现在用的少，新方案采用vw
现在自适应布局，不太考虑兼容老的浏览器情况下是使用rem还是一个挺好的方案，配合媒体查询
Rem布局的原理解析 知乎上大佬讲的也很好
15.vw vh
CSS3规范，视口单位主要包括以下4个：
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。
postcss-px-to-viewport 配合这个包来实现，包括上面的rem也可以
16. rgba和opacity
1.rgba和opacity都能实现透明效果，但最大的不同在于opacity作用于元素本身以及元素内的所有内容，而rgba只作用于元素本身，子元素不会继承透明效果。
2.rgba是CSS3的属性，用法说明：rgba(R,G,B,A)，参数说明R（红色值。正整数|百分数），G（绿色值。正整数|百分数），B（蓝色值。正整数|百分比），A（Alpha透明度。0（透明）~1）。IE6-8不支持rgba模式，可以使用IE滤镜处理：
3.opacity也是CSS3的属性，用法说明：opacity:value 其中value取值0（透明）~1
17.Filter
直接附上大佬们的文章
后续补充中 。。。。
